From 6d4ca5bf6c66cb2851e853a14fd67dbcc9075b1c Mon Sep 17 00:00:00 2001
From: Johannes Obermair <johannes.obermair@vivid-planet.com>
Date: Mon, 25 Sep 2023 13:46:46 +0200
Subject: [PATCH] Deprecate Table component The `Table` component has been
 deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/)
 in combination with `useDataGridRemote`. See
 [docs](https://storybook.comet-dxp.com/?path=/story/docs-components-table-basics--page)
 for further information.

---
 .changeset/mighty-lizards-sit.md              |  7 ++++
 .../components/Table/01_Basics.stories.mdx    |  3 ++
 .../Table/02_TableQuery.stories.mdx           |  2 ++
 .../components/Table/03_Sorting.stories.mdx   |  2 ++
 .../Table/04_Pagination.stories.mdx           |  2 ++
 .../components/Table/05_FilterBar.stories.mdx |  2 ++
 .../Table/06_ExcelExport.stories.mdx          |  2 ++
 .../Table/07_TableDndOrder.stories.mdx        |  2 ++
 .../Table/08_SelectionTable.stories.mdx       |  2 ++
 packages/admin/admin/src/table/AddButton.tsx  |  3 ++
 .../admin/admin/src/table/DeleteButton.tsx    |  3 ++
 .../admin/src/table/ExcelExportButton.tsx     |  3 ++
 .../admin/src/table/LocalChangesToolbar.tsx   |  3 ++
 packages/admin/admin/src/table/Pagination.tsx |  3 ++
 packages/admin/admin/src/table/Table.tsx      | 36 +++++++++++++++++++
 .../admin/admin/src/table/TableBodyRow.tsx    |  9 +++++
 .../admin/admin/src/table/TableDndOrder.tsx   |  3 ++
 .../admin/src/table/TableFilterFinalForm.tsx  |  3 ++
 .../admin/src/table/TableLocalChanges.tsx     |  9 +++++
 .../admin/src/table/TableQuery.styles.ts      |  3 ++
 packages/admin/admin/src/table/TableQuery.tsx |  9 +++++
 .../admin/src/table/TableQueryContext.tsx     |  9 +++++
 .../admin/src/table/excelexport/IExportApi.ts |  3 ++
 .../excelexport/createExcelExportDownload.ts  |  6 ++++
 .../useExportDisplayedTableData.tsx           |  3 ++
 .../excelexport/useExportPagedTableQuery.tsx  |  3 ++
 .../table/excelexport/useExportTableQuery.tsx |  3 ++
 .../admin/src/table/filterbar/FilterBar.tsx   |  9 +++++
 .../FilterBarActiveFilterBadge.styles.tsx     |  3 ++
 .../FilterBarActiveFilterBadge.tsx            |  6 ++++
 .../FilterBarButton.styles.tsx                |  3 ++
 .../filterBarButton/FilterBarButton.tsx       |  6 ++++
 .../FilterBarMoreFilters.styles.tsx           |  3 ++
 .../FilterBarMoreFilters.tsx                  |  6 ++++
 .../FilterBarPopoverFilter.styles.tsx         |  3 ++
 .../FilterBarPopoverFilter.tsx                |  6 ++++
 .../admin/src/table/paging/IPagingInfo.ts     |  3 ++
 .../paging/createOffsetLimitPagingAction.ts   |  3 ++
 .../table/paging/createPagePagingActions.ts   |  3 ++
 .../table/paging/createRelayPagingActions.ts  |  3 ++
 .../table/paging/createRestPagingActions.ts   |  3 ++
 .../createRestStartLimitPagingActions.ts      |  3 ++
 .../admin/src/table/usePersistedState.tsx     |  3 ++
 .../admin/src/table/usePersistedStateId.tsx   |  3 ++
 .../admin/admin/src/table/useTableQuery.ts    |  9 +++++
 .../admin/src/table/useTableQueryFilter.tsx   |  6 ++++
 .../admin/src/table/useTableQueryPaging.tsx   |  9 +++++
 .../admin/src/table/useTableQuerySort.tsx     | 12 +++++++
 .../admin/src/table/withDirtyHandlerApi.tsx   |  6 ++++
 .../admin/src/table/withTableQueryContext.tsx |  6 ++++
 50 files changed, 255 insertions(+)
 create mode 100644 .changeset/mighty-lizards-sit.md

diff --git a/.changeset/mighty-lizards-sit.md b/.changeset/mighty-lizards-sit.md
new file mode 100644
index 0000000000..59028a88a5
--- /dev/null
+++ b/.changeset/mighty-lizards-sit.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin": minor
+---
+
+Deprecate `Table` component
+
+The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. See [docs](https://storybook.comet-dxp.com/?path=/story/docs-components-table-basics--page) for further information.
diff --git a/packages/admin/admin-stories/src/docs/components/Table/01_Basics.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/01_Basics.stories.mdx
index 5b1224e158..505fbb975a 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/01_Basics.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/01_Basics.stories.mdx
@@ -1,9 +1,12 @@
 import { Meta, Canvas, Story, Source } from "@storybook/addon-docs";
+import { Alert, Link } from "@mui/material";
 
 import dedent from "ts-dedent";
 
 <Meta title="Docs/Components/Table/Basics" />
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 # Table
 
 > Tables display information in a way that's easy to scan, so that users can look for patterns and insights.
diff --git a/packages/admin/admin-stories/src/docs/components/Table/02_TableQuery.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/02_TableQuery.stories.mdx
index b6149d7ee7..e21e4e02bc 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/02_TableQuery.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/02_TableQuery.stories.mdx
@@ -4,6 +4,8 @@ import dedent from "ts-dedent";
 
 <Meta title="Docs/Components/Table/TableQuery" />
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 # TableQuery
 
 To fill a `Table` with API data, you can use the `useTableQuery()` hook in combination with the
diff --git a/packages/admin/admin-stories/src/docs/components/Table/03_Sorting.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/03_Sorting.stories.mdx
index 103efd9511..6f5f923817 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/03_Sorting.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/03_Sorting.stories.mdx
@@ -4,6 +4,8 @@ import dedent from "ts-dedent";
 
 <Meta title="Docs/Components/Table/Sorting" />
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 # Sorting
 
 The `Table` component has built-in support for sorting by column.
diff --git a/packages/admin/admin-stories/src/docs/components/Table/04_Pagination.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/04_Pagination.stories.mdx
index a887238dca..5cb9f69859 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/04_Pagination.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/04_Pagination.stories.mdx
@@ -4,6 +4,8 @@ import dedent from "ts-dedent";
 
 <Meta title="Docs/Components/Table/Pagination" />
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 # Pagination
 
 The `Table` has built-in support for pagination.
diff --git a/packages/admin/admin-stories/src/docs/components/Table/05_FilterBar.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/05_FilterBar.stories.mdx
index 4ee5110260..41bd86bebd 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/05_FilterBar.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/05_FilterBar.stories.mdx
@@ -2,6 +2,8 @@ import { Meta, Canvas, Story, Source } from "@storybook/addon-docs";
 
 import dedent from "ts-dedent";
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 <Meta title="Docs/Components/Table/Filterbar" />
 
 # Filterbar
diff --git a/packages/admin/admin-stories/src/docs/components/Table/06_ExcelExport.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/06_ExcelExport.stories.mdx
index 1df7d24ffe..c28af04a1e 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/06_ExcelExport.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/06_ExcelExport.stories.mdx
@@ -2,6 +2,8 @@ import { Meta, Canvas, Story, Source } from "@storybook/addon-docs";
 
 import dedent from "ts-dedent";
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 <Meta title="Docs/Components/Table/Excel Export" />
 
 # Excel Export
diff --git a/packages/admin/admin-stories/src/docs/components/Table/07_TableDndOrder.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/07_TableDndOrder.stories.mdx
index 919b46fb1b..5f5dbf3be0 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/07_TableDndOrder.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/07_TableDndOrder.stories.mdx
@@ -4,6 +4,8 @@ import dedent from "ts-dedent";
 
 <Meta title="Docs/Components/Table/TableDndOrder" />
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 # TableDndOrder
 
 `TableDndOrder` is a special version of the `Table`.
diff --git a/packages/admin/admin-stories/src/docs/components/Table/08_SelectionTable.stories.mdx b/packages/admin/admin-stories/src/docs/components/Table/08_SelectionTable.stories.mdx
index fcc306673a..8023fb214b 100644
--- a/packages/admin/admin-stories/src/docs/components/Table/08_SelectionTable.stories.mdx
+++ b/packages/admin/admin-stories/src/docs/components/Table/08_SelectionTable.stories.mdx
@@ -4,6 +4,8 @@ import dedent from "ts-dedent";
 
 <Meta title="Docs/Components/Table/Selection Table" />
 
+**The `Table` component has been deprecated in favor of [MUI X Data Grid](https://mui.com/x/react-data-grid/) in combination with `useDataGridRemote`. View [docs](?path=/story/docs-components-datagrid--page).**
+
 # Selection Table
 
 The `Table` component has a built-in [selection](/story/docs-components-selection--page) functionality.
diff --git a/packages/admin/admin/src/table/AddButton.tsx b/packages/admin/admin/src/table/AddButton.tsx
index 7cfcef0f39..3b531be2c5 100644
--- a/packages/admin/admin/src/table/AddButton.tsx
+++ b/packages/admin/admin/src/table/AddButton.tsx
@@ -10,6 +10,9 @@ interface IProps {
     selectionApi: ISelectionApi;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export class TableAddButton extends React.Component<IProps> {
     public render() {
         return (
diff --git a/packages/admin/admin/src/table/DeleteButton.tsx b/packages/admin/admin/src/table/DeleteButton.tsx
index db7e40ec0f..c002282005 100644
--- a/packages/admin/admin/src/table/DeleteButton.tsx
+++ b/packages/admin/admin/src/table/DeleteButton.tsx
@@ -20,6 +20,9 @@ interface IProps {
 
 const DeleteMessage = () => <FormattedMessage {...messages.delete} />;
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export class TableDeleteButton extends React.Component<IProps> {
     public render() {
         const { selectedId, mutation, refetchQueries, icon = <DeleteIcon />, text = <DeleteMessage />, color } = this.props;
diff --git a/packages/admin/admin/src/table/ExcelExportButton.tsx b/packages/admin/admin/src/table/ExcelExportButton.tsx
index a5a0514f2c..af6b36a5ee 100644
--- a/packages/admin/admin/src/table/ExcelExportButton.tsx
+++ b/packages/admin/admin/src/table/ExcelExportButton.tsx
@@ -11,6 +11,9 @@ interface IProps {
     loadingComponent?: React.ReactNode;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const ExcelExportButton: React.FunctionComponent<IProps> = ({ onClick, children, exportApi, loadingComponent }) => {
     const onClickButtonPressed = () => {
         if (onClick != null) {
diff --git a/packages/admin/admin/src/table/LocalChangesToolbar.tsx b/packages/admin/admin/src/table/LocalChangesToolbar.tsx
index 9310fc445b..d8bdcd3cf8 100644
--- a/packages/admin/admin/src/table/LocalChangesToolbar.tsx
+++ b/packages/admin/admin/src/table/LocalChangesToolbar.tsx
@@ -13,6 +13,9 @@ interface Props {
     loading: boolean;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const TableLocalChangesToolbar = ({ tableLocalChangesApi, localChangesCount, updateMutation, loading }: Props) => {
     const handleSaveClick = () => {
         tableLocalChangesApi.submitLocalDataChanges();
diff --git a/packages/admin/admin/src/table/Pagination.tsx b/packages/admin/admin/src/table/Pagination.tsx
index b4c664d735..2d23d03a8c 100644
--- a/packages/admin/admin/src/table/Pagination.tsx
+++ b/packages/admin/admin/src/table/Pagination.tsx
@@ -13,6 +13,9 @@ interface IProps {
     rowName?: string | ((count: number) => string);
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const TablePagination: React.FunctionComponent<IProps> = ({ totalCount, pagingInfo, rowName }) => {
     if (typeof rowName === "function") {
         rowName = rowName(totalCount);
diff --git a/packages/admin/admin/src/table/Table.tsx b/packages/admin/admin/src/table/Table.tsx
index eb8bb32f8d..780c4d9ac6 100644
--- a/packages/admin/admin/src/table/Table.tsx
+++ b/packages/admin/admin/src/table/Table.tsx
@@ -16,6 +16,9 @@ import { safeColumnGet } from "./safeColumnGet";
 import { TableBodyRow, TableBodyRowProps } from "./TableBodyRow";
 import { ISortApi, SortDirection } from "./useTableQuerySort";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type ITableHeadRowProps<TRow extends IRow> = ITableHeadColumnsProps<TRow>;
 function DefaultHeadTableRow<TRow extends IRow>({ columns, sortApi }: ITableHeadRowProps<TRow>) {
     return (
@@ -25,11 +28,17 @@ function DefaultHeadTableRow<TRow extends IRow>({ columns, sortApi }: ITableHead
     );
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableHeadColumnsProps<TRow extends IRow> {
     columns: Array<ITableColumn<TRow>>;
     sortApi?: ISortApi;
 }
 // render default TableCell fragments for given columns
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function TableHeadColumns<TRow extends IRow>({ columns, sortApi }: ITableHeadColumnsProps<TRow>) {
     const handleSortClick = (name: string, ev: React.MouseEvent) => {
         if (sortApi) sortApi.changeSort(name);
@@ -60,11 +69,17 @@ export function TableHeadColumns<TRow extends IRow>({ columns, sortApi }: ITable
     );
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableColumnsProps<TRow extends IRow> {
     row: TRow;
     columns: Array<ITableColumn<TRow>>;
 }
 // render default TableCell fragments for given columns
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function TableColumns<TRow extends IRow>({ row, columns }: ITableColumnsProps<TRow>) {
     return (
         <>
@@ -79,15 +94,27 @@ export function TableColumns<TRow extends IRow>({ row, columns }: ITableColumnsP
         </>
     );
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IRow {
     id: string | number;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export enum VisibleType {
     Browser = "browser",
     Export = "export",
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type Visible = boolean | { [key in VisibleType]?: boolean };
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableColumn<TRow extends IRow> {
     name: string;
     visible?: Visible;
@@ -101,12 +128,18 @@ export interface ITableColumn<TRow extends IRow> {
     headerProps?: TableCellProps;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableRowProps<TRow extends IRow> extends ITableColumnsProps<TRow> {
     index: number;
     key: any;
     rowProps: TableBodyRowProps;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableProps<TRow extends IRow> {
     data: TRow[];
     totalCount: number;
@@ -134,6 +167,9 @@ function DefaultTableRow<TRow extends IRow>({ columns, row, rowProps }: ITableRo
     );
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export class Table<TRow extends IRow> extends React.Component<ITableProps<TRow>> {
     private domRef: React.RefObject<HTMLTableElement>;
     constructor(props: ITableProps<TRow>) {
diff --git a/packages/admin/admin/src/table/TableBodyRow.tsx b/packages/admin/admin/src/table/TableBodyRow.tsx
index 2d91e52437..3ea7107cf1 100644
--- a/packages/admin/admin/src/table/TableBodyRow.tsx
+++ b/packages/admin/admin/src/table/TableBodyRow.tsx
@@ -3,8 +3,14 @@ import { TableRowProps } from "@mui/material/TableRow";
 import { createStyles, WithStyles, withStyles } from "@mui/styles";
 import * as React from "react";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type TableBodyRowClassKey = "root" | "even" | "odd";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface TableBodyRowProps extends TableRowProps {
     index?: number;
     hideTableHead?: boolean;
@@ -25,6 +31,9 @@ const Row = React.forwardRef<HTMLTableRowElement, TableBodyRowProps & WithStyles
     },
 );
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const TableBodyRow = withStyles(styles, { name: "CometAdminTableBodyRow" })(Row);
 
 declare module "@mui/material/styles" {
diff --git a/packages/admin/admin/src/table/TableDndOrder.tsx b/packages/admin/admin/src/table/TableDndOrder.tsx
index 381405bf01..e91ea2df86 100644
--- a/packages/admin/admin/src/table/TableDndOrder.tsx
+++ b/packages/admin/admin/src/table/TableDndOrder.tsx
@@ -176,6 +176,9 @@ const styles = () =>
         },
     });
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 const TableDndOrderWithStyles = withStyles(styles, { name: "CometAdminTableDndOrder" })(TableDndOrder);
 export { TableDndOrderWithStyles as TableDndOrder };
 
diff --git a/packages/admin/admin/src/table/TableFilterFinalForm.tsx b/packages/admin/admin/src/table/TableFilterFinalForm.tsx
index e751b6b2ff..6c036546c9 100644
--- a/packages/admin/admin/src/table/TableFilterFinalForm.tsx
+++ b/packages/admin/admin/src/table/TableFilterFinalForm.tsx
@@ -15,6 +15,9 @@ type Props<FilterValues = AnyObject> = Omit<FormProps<FilterValues>, "onSubmit"
     filterApi: IFilterApi<FilterValues>;
 };
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export class TableFilterFinalForm<FilterValues = AnyObject> extends React.Component<Props<FilterValues>> {
     public render() {
         // remove render, children and component from forwardProps as we define render and those would interfere
diff --git a/packages/admin/admin/src/table/TableLocalChanges.tsx b/packages/admin/admin/src/table/TableLocalChanges.tsx
index 510f1bad8a..86a8fcbab3 100644
--- a/packages/admin/admin/src/table/TableLocalChanges.tsx
+++ b/packages/admin/admin/src/table/TableLocalChanges.tsx
@@ -4,6 +4,9 @@ import * as React from "react";
 
 import { DirtyHandlerApiContext } from "../DirtyHandlerApiContext";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export async function submitChangesWithMutation(options: {
     changes: { [id: string]: object };
     variables?: object;
@@ -22,6 +25,9 @@ export async function submitChangesWithMutation(options: {
     }
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableLocalChangesApi {
     setLocalDataChange: (id: string, column: string, value: any) => void;
     moveRow: (dragIndex: number, hoverIndex: number) => void;
@@ -45,6 +51,9 @@ interface IState<TData> {
     };
     loading: boolean;
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export class TableLocalChanges<TData extends { id: string; [key: string]: any }> extends React.Component<IProps<TData>, IState<TData>> {
     public static contextType = DirtyHandlerApiContext;
     protected static defaultProps = {
diff --git a/packages/admin/admin/src/table/TableQuery.styles.ts b/packages/admin/admin/src/table/TableQuery.styles.ts
index 4f6ee33147..362a0d3008 100644
--- a/packages/admin/admin/src/table/TableQuery.styles.ts
+++ b/packages/admin/admin/src/table/TableQuery.styles.ts
@@ -3,6 +3,9 @@ import { createStyles } from "@mui/styles";
 
 import { IProps } from "./TableQuery";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type TableQueryClassKey = "root" | "loadingContainer" | "loadingPaper";
 
 export const styles = ({ zIndex }: Theme) => {
diff --git a/packages/admin/admin/src/table/TableQuery.tsx b/packages/admin/admin/src/table/TableQuery.tsx
index fb5114741e..633b152220 100644
--- a/packages/admin/admin/src/table/TableQuery.tsx
+++ b/packages/admin/admin/src/table/TableQuery.tsx
@@ -8,12 +8,18 @@ import { Loading } from "../common/Loading";
 import { styles, TableQueryClassKey } from "./TableQuery.styles";
 import { ITableQueryApi, TableQueryContext } from "./TableQueryContext";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const parseIdFromIri = (iri: string) => {
     const m = iri.match(/\/(\d+)/);
     if (!m) return null;
     return m[1];
 };
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IDefaultVariables {}
 
@@ -57,6 +63,9 @@ export function Query({ classes, ...otherProps }: IProps & WithStyles<typeof sty
     );
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const TableQuery = withStyles(styles, { name: "CometAdminTableQuery" })(Query);
 
 declare module "@mui/material/styles" {
diff --git a/packages/admin/admin/src/table/TableQueryContext.tsx b/packages/admin/admin/src/table/TableQueryContext.tsx
index c37e950df8..fbb4750577 100644
--- a/packages/admin/admin/src/table/TableQueryContext.tsx
+++ b/packages/admin/admin/src/table/TableQueryContext.tsx
@@ -3,6 +3,9 @@ import * as React from "react";
 
 import { ITableData } from "./useTableQuery";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableQueryApi {
     getVariables: () => object;
     getInnerOptions: () => object;
@@ -12,8 +15,14 @@ export interface ITableQueryApi {
     onRowDeleted: () => void;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableQueryContext {
     api: ITableQueryApi;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const TableQueryContext = React.createContext<ITableQueryContext | undefined>(undefined);
diff --git a/packages/admin/admin/src/table/excelexport/IExportApi.ts b/packages/admin/admin/src/table/excelexport/IExportApi.ts
index 598d49aa1b..8efe2b9de2 100644
--- a/packages/admin/admin/src/table/excelexport/IExportApi.ts
+++ b/packages/admin/admin/src/table/excelexport/IExportApi.ts
@@ -1,5 +1,8 @@
 import { IRow, Table } from "../Table";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IExportApi<TRow extends IRow> {
     loading: boolean;
     progress?: number;
diff --git a/packages/admin/admin/src/table/excelexport/createExcelExportDownload.ts b/packages/admin/admin/src/table/excelexport/createExcelExportDownload.ts
index a80108f821..05718a5613 100644
--- a/packages/admin/admin/src/table/excelexport/createExcelExportDownload.ts
+++ b/packages/admin/admin/src/table/excelexport/createExcelExportDownload.ts
@@ -10,11 +10,17 @@ import { safeColumnGet } from "../safeColumnGet";
 import { IRow, ITableColumn, VisibleType } from "../Table";
 import { applyDefaultStyling } from "./applyDefaultStyling";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IExcelExportOptions {
     fileName?: string;
     worksheetName?: string;
     styling?: (worksheet: Excel.Worksheet) => void;
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export async function createExcelExportDownload<TRow extends IRow>(
     columns: Array<ITableColumn<TRow>>,
     data: TRow[],
diff --git a/packages/admin/admin/src/table/excelexport/useExportDisplayedTableData.tsx b/packages/admin/admin/src/table/excelexport/useExportDisplayedTableData.tsx
index 40c1d23904..2ab40ac83f 100644
--- a/packages/admin/admin/src/table/excelexport/useExportDisplayedTableData.tsx
+++ b/packages/admin/admin/src/table/excelexport/useExportDisplayedTableData.tsx
@@ -4,6 +4,9 @@ import { Table } from "../Table";
 import { createExcelExportDownload, IExcelExportOptions } from "./createExcelExportDownload";
 import { IExportApi } from "./IExportApi";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function useExportDisplayedTableData(options?: IExcelExportOptions): IExportApi<any> {
     let tableRef: Table<any> | undefined;
 
diff --git a/packages/admin/admin/src/table/excelexport/useExportPagedTableQuery.tsx b/packages/admin/admin/src/table/excelexport/useExportPagedTableQuery.tsx
index d7d988f8b0..7edd684da3 100644
--- a/packages/admin/admin/src/table/excelexport/useExportPagedTableQuery.tsx
+++ b/packages/admin/admin/src/table/excelexport/useExportPagedTableQuery.tsx
@@ -12,6 +12,9 @@ interface IOptions<IVariables> {
     toPage?: number;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function useExportPagedTableQuery<IVariables>(
     api: ITableQueryApi,
     options: IOptions<IVariables>,
diff --git a/packages/admin/admin/src/table/excelexport/useExportTableQuery.tsx b/packages/admin/admin/src/table/excelexport/useExportTableQuery.tsx
index 832103388f..93d647f1c3 100644
--- a/packages/admin/admin/src/table/excelexport/useExportTableQuery.tsx
+++ b/packages/admin/admin/src/table/excelexport/useExportTableQuery.tsx
@@ -6,6 +6,9 @@ import { ITableQueryApi } from "../TableQueryContext";
 import { createExcelExportDownload, IExcelExportOptions } from "./createExcelExportDownload";
 import { IExportApi } from "./IExportApi";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function useExportTableQuery<IVariables>(api: ITableQueryApi, variables: IVariables, options?: IExcelExportOptions): IExportApi<any> {
     let tableRef: Table<any> | undefined;
     const [loading, setLoading] = React.useState(false);
diff --git a/packages/admin/admin/src/table/filterbar/FilterBar.tsx b/packages/admin/admin/src/table/filterbar/FilterBar.tsx
index 304b21a11f..c9a619fc65 100644
--- a/packages/admin/admin/src/table/filterbar/FilterBar.tsx
+++ b/packages/admin/admin/src/table/filterbar/FilterBar.tsx
@@ -2,8 +2,14 @@ import { ComponentsOverrides, Theme } from "@mui/material";
 import { createStyles, WithStyles, withStyles } from "@mui/styles";
 import * as React from "react";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type FilterBarClassKey = "root" | "barWrapper";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface FilterBarProps {
     children?: React.ReactNode;
 }
@@ -30,6 +36,9 @@ function Bar({ children, classes }: FilterBarProps & WithStyles<typeof styles>):
     );
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const FilterBar = withStyles(styles, { name: "CometAdminFilterBar" })(Bar);
 
 declare module "@mui/material/styles" {
diff --git a/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.styles.tsx b/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.styles.tsx
index 94902b5033..ff20b17955 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.styles.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.styles.tsx
@@ -3,6 +3,9 @@ import { createStyles } from "@mui/styles";
 
 import { FilterBarActiveFilterBadgeProps } from "./FilterBarActiveFilterBadge";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type FilterBarActiveFilterBadgeClassKey = "hasValueCount";
 
 export const styles = ({ palette }: Theme) => {
diff --git a/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.tsx b/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.tsx
index 01ff3760ac..9007061aab 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.tsx
@@ -4,6 +4,9 @@ import * as React from "react";
 
 import { FilterBarActiveFilterBadgeClassKey, styles } from "./FilterBarActiveFilterBadge.styles";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface FilterBarActiveFilterBadgeProps {
     countValue: number;
 }
@@ -22,6 +25,9 @@ function FilterBadge({ countValue, classes }: React.PropsWithChildren<FilterBarA
     }
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const FilterBarActiveFilterBadge = withStyles(styles, { name: "CometAdminFilterBarActiveFilterBadge" })(FilterBadge);
 
 declare module "@mui/material/styles" {
diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx
index ad8b4a063d..0cc2aa6881 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx
@@ -3,6 +3,9 @@ import createStyles from "@mui/styles/createStyles";
 
 import { FilterBarButtonProps } from "./FilterBarButton";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type FilterBarButtonClassKey = "root" | "open" | "hasDirtyFields" | "filterBadge";
 
 export const styles = (theme: Theme) => {
diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx
index ded1c88b69..e93ff47d63 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx
@@ -9,6 +9,9 @@ import * as React from "react";
 import { FilterBarActiveFilterBadge, FilterBarActiveFilterBadgeProps } from "../filterBarActiveFilterBadge/FilterBarActiveFilterBadge";
 import { FilterBarButtonClassKey, styles } from "./FilterBarButton.styles";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface FilterBarButtonProps extends ButtonProps {
     dirtyFieldsBadge?: React.ComponentType<FilterBarActiveFilterBadgeProps>;
     numberDirtyFields?: number;
@@ -45,6 +48,9 @@ const FilterBarButton = ({
     );
 };
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 const FilterBarButtonWithStyles = withStyles(styles, { name: "CometAdminFilterBarButton" })(FilterBarButton);
 
 export { FilterBarButtonWithStyles as FilterBarButton };
diff --git a/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.styles.tsx b/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.styles.tsx
index d0e21eaa6c..db010c58d0 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.styles.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.styles.tsx
@@ -3,6 +3,9 @@ import { createStyles } from "@mui/styles";
 
 import { FilterBarMoreFiltersProps } from "./FilterBarMoreFilters";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type FilterBarMoveFilersClassKey = "root" | "textWrapper";
 
 export const styles = ({ palette, typography }: Theme) => {
diff --git a/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.tsx b/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.tsx
index 7015d23315..804fe65bd5 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.tsx
@@ -6,6 +6,9 @@ import { FormattedMessage } from "react-intl";
 
 import { FilterBarMoveFilersClassKey, styles } from "./FilterBarMoreFilters.styles";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface FilterBarMoreFiltersProps {
     icon?: React.ReactNode;
 }
@@ -32,6 +35,9 @@ export function MoreFilters({
     }
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const FilterBarMoreFilters = withStyles(styles, { name: "CometAdminFilterBarMoreFilters" })(MoreFilters);
 
 declare module "@mui/material/styles" {
diff --git a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx
index be3dbab67b..969a843493 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx
@@ -3,6 +3,9 @@ import { createStyles } from "@mui/styles";
 
 import { FilterBarPopoverFilterProps } from "./FilterBarPopoverFilter";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export type FilterBarPopoverFilterClassKey = "root" | "fieldBarWrapper" | "popoverContentContainer" | "paper" | "buttonsContainer";
 
 export const styles = ({ palette }: Theme) => {
diff --git a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
index 9d853ef1bc..dfaffaeedc 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
@@ -11,6 +11,9 @@ import { FilterBarActiveFilterBadgeProps } from "../filterBarActiveFilterBadge/F
 import { FilterBarButton, FilterBarButtonProps } from "../filterBarButton/FilterBarButton";
 import { FilterBarPopoverFilterClassKey, styles } from "./FilterBarPopoverFilter.styles";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface FilterBarPopoverFilterProps {
     label: string;
     dirtyFieldsBadge?: React.ComponentType<FilterBarActiveFilterBadgeProps>;
@@ -124,6 +127,9 @@ function PopoverFilter({
     );
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const FilterBarPopoverFilter = withStyles(styles, { name: "CometAdminFilterBarPopoverFilter" })(PopoverFilter);
 
 declare module "@mui/material/styles" {
diff --git a/packages/admin/admin/src/table/paging/IPagingInfo.ts b/packages/admin/admin/src/table/paging/IPagingInfo.ts
index 97722b93f6..d66ba0af3f 100644
--- a/packages/admin/admin/src/table/paging/IPagingInfo.ts
+++ b/packages/admin/admin/src/table/paging/IPagingInfo.ts
@@ -1,5 +1,8 @@
 import * as React from "react";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IPagingInfo {
     fetchNextPage?: () => void;
     fetchPreviousPage?: () => void;
diff --git a/packages/admin/admin/src/table/paging/createOffsetLimitPagingAction.ts b/packages/admin/admin/src/table/paging/createOffsetLimitPagingAction.ts
index 8bc885b36c..f539e94f58 100644
--- a/packages/admin/admin/src/table/paging/createOffsetLimitPagingAction.ts
+++ b/packages/admin/admin/src/table/paging/createOffsetLimitPagingAction.ts
@@ -5,6 +5,9 @@ interface OffsetLimitPagingData {
     totalCount: number;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function createOffsetLimitPagingAction<TData extends OffsetLimitPagingData>(
     pagingApi: IPagingApi<number>,
     { totalCount }: TData,
diff --git a/packages/admin/admin/src/table/paging/createPagePagingActions.ts b/packages/admin/admin/src/table/paging/createPagePagingActions.ts
index e214771f9e..fed0c1b0dd 100644
--- a/packages/admin/admin/src/table/paging/createPagePagingActions.ts
+++ b/packages/admin/admin/src/table/paging/createPagePagingActions.ts
@@ -7,6 +7,9 @@ interface IPagePagingData {
     totalPages?: number | null;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function createPagePagingActions<TData extends IPagePagingData>(pagingApi: IPagingApi<number>, data: TData): IPagingInfo {
     const nextPage = data.nextPage ? data.nextPage : null;
     const previousPage = data.previousPage ? data.previousPage : null;
diff --git a/packages/admin/admin/src/table/paging/createRelayPagingActions.ts b/packages/admin/admin/src/table/paging/createRelayPagingActions.ts
index 8a0f3abec2..da6ca9876a 100644
--- a/packages/admin/admin/src/table/paging/createRelayPagingActions.ts
+++ b/packages/admin/admin/src/table/paging/createRelayPagingActions.ts
@@ -13,6 +13,9 @@ interface IRelayPagingVariables {
     after?: string;
     before?: string;
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function createRelayPagingActions<TData extends IRelayPagingData>(pagingApi: IPagingApi<IRelayPagingVariables>, data: TData): IPagingInfo {
     return {
         fetchNextPage:
diff --git a/packages/admin/admin/src/table/paging/createRestPagingActions.ts b/packages/admin/admin/src/table/paging/createRestPagingActions.ts
index 19313f301d..4a74ffb788 100644
--- a/packages/admin/admin/src/table/paging/createRestPagingActions.ts
+++ b/packages/admin/admin/src/table/paging/createRestPagingActions.ts
@@ -18,6 +18,9 @@ interface IOptions {
     pageParameterName: string;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function createRestPagingActions<TData extends IRestPagingData>(
     pagingApi: IPagingApi<number>,
     data: TData,
diff --git a/packages/admin/admin/src/table/paging/createRestStartLimitPagingActions.ts b/packages/admin/admin/src/table/paging/createRestStartLimitPagingActions.ts
index b11bb50fd1..b7b431b1ab 100644
--- a/packages/admin/admin/src/table/paging/createRestStartLimitPagingActions.ts
+++ b/packages/admin/admin/src/table/paging/createRestStartLimitPagingActions.ts
@@ -6,6 +6,9 @@ interface IRestPagingData {
     loadLimit: number;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function createRestStartLimitPagingActions<TData extends IRestPagingData>(pagingApi: IPagingApi<number>, data: TData): IPagingInfo {
     const loadLimit = Math.max(1, data.loadLimit); // min value 1 -> avoid division by zero
 
diff --git a/packages/admin/admin/src/table/usePersistedState.tsx b/packages/admin/admin/src/table/usePersistedState.tsx
index 0357f94cf6..b275bf6746 100644
--- a/packages/admin/admin/src/table/usePersistedState.tsx
+++ b/packages/admin/admin/src/table/usePersistedState.tsx
@@ -5,6 +5,9 @@ const allStates: { [key: string]: any } = {};
 interface IOptions {
     persistedStateId?: string;
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function usePersistedState<T>(defaultValue: T, options: IOptions = {}): [T, React.Dispatch<React.SetStateAction<T>>] {
     const stateId = options.persistedStateId;
 
diff --git a/packages/admin/admin/src/table/usePersistedStateId.tsx b/packages/admin/admin/src/table/usePersistedStateId.tsx
index 25deb18e8d..3ee235324c 100644
--- a/packages/admin/admin/src/table/usePersistedStateId.tsx
+++ b/packages/admin/admin/src/table/usePersistedStateId.tsx
@@ -1,6 +1,9 @@
 import useConstant from "use-constant";
 import { v4 as uuid } from "uuid";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function usePersistedStateId(): string {
     const id = useConstant<string>(() => uuid());
     return id;
diff --git a/packages/admin/admin/src/table/useTableQuery.ts b/packages/admin/admin/src/table/useTableQuery.ts
index 1486e3ef64..869eb5c7c1 100644
--- a/packages/admin/admin/src/table/useTableQuery.ts
+++ b/packages/admin/admin/src/table/useTableQuery.ts
@@ -7,6 +7,9 @@ import { ISelectionApi } from "../SelectionApi";
 import { IPagingInfo } from "./paging/IPagingInfo";
 import { ITableQueryApi } from "./TableQueryContext";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableData<TRow extends { id: string | number } = { id: string | number }> {
     data?: TRow[];
     totalCount?: number;
@@ -18,11 +21,17 @@ interface ITableQueryHookOptions<TData, TVariables, TTableData extends ITableDat
     globalErrorHandling?: boolean;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ITableQueryHookResult<TData, TVariables, TTableData extends ITableData> extends QueryResult<TData, TVariables> {
     tableData?: TTableData;
     api: ITableQueryApi;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function useTableQuery<TInnerData, TInnerVariables>() {
     function useTableQueryInner<TTableData extends ITableData>(
         q: DocumentNode,
diff --git a/packages/admin/admin/src/table/useTableQueryFilter.tsx b/packages/admin/admin/src/table/useTableQueryFilter.tsx
index 8d73f43ce5..846e868092 100644
--- a/packages/admin/admin/src/table/useTableQueryFilter.tsx
+++ b/packages/admin/admin/src/table/useTableQueryFilter.tsx
@@ -6,10 +6,16 @@ import * as React from "react";
 import { usePersistedState } from "./usePersistedState";
 import { IPagingApi } from "./useTableQueryPaging";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IFilterApi<FilterValues> {
     current: FilterValues;
     formApi: FormApi<FilterValues>;
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function useTableQueryFilter<FilterValues>(
     defaultValues: FilterValues,
     options: {
diff --git a/packages/admin/admin/src/table/useTableQueryPaging.tsx b/packages/admin/admin/src/table/useTableQueryPaging.tsx
index 2a46eea210..1603c9c7ec 100644
--- a/packages/admin/admin/src/table/useTableQueryPaging.tsx
+++ b/packages/admin/admin/src/table/useTableQueryPaging.tsx
@@ -2,6 +2,9 @@ import * as React from "react";
 
 import { usePersistedState } from "./usePersistedState";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IPagingApi<T> {
     init: T;
     current: T;
@@ -10,10 +13,16 @@ export interface IPagingApi<T> {
     attachTableRef: (ref: React.RefObject<HTMLDivElement | undefined>) => void;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IChangePageOptions {
     noScrollToTop?: boolean;
 }
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function useTableQueryPaging<T>(
     init: T,
     options: {
diff --git a/packages/admin/admin/src/table/useTableQuerySort.tsx b/packages/admin/admin/src/table/useTableQuerySort.tsx
index 89316947d5..50696994de 100644
--- a/packages/admin/admin/src/table/useTableQuerySort.tsx
+++ b/packages/admin/admin/src/table/useTableQuerySort.tsx
@@ -1,17 +1,29 @@
 import { usePersistedState } from "./usePersistedState";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export enum SortDirection {
     ASC = "ASC",
     DESC = "DESC",
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ISortInformation {
     columnName: string;
     direction: SortDirection;
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface ISortApi {
     current: ISortInformation;
     changeSort: (columnName: string) => void;
 }
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export function useTableQuerySort(
     defaultSort: ISortInformation,
     options: {
diff --git a/packages/admin/admin/src/table/withDirtyHandlerApi.tsx b/packages/admin/admin/src/table/withDirtyHandlerApi.tsx
index 8c014b3225..17d4539232 100644
--- a/packages/admin/admin/src/table/withDirtyHandlerApi.tsx
+++ b/packages/admin/admin/src/table/withDirtyHandlerApi.tsx
@@ -2,6 +2,9 @@ import * as React from "react";
 
 import { DirtyHandlerApiContext, IDirtyHandlerApi } from "../DirtyHandlerApiContext";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IWithDirtyHandlerApiProps {
     dirtyHandlerApi?: IDirtyHandlerApi;
 }
@@ -10,6 +13,9 @@ type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 type Subtract<T, K> = Omit<T, keyof K>;
 
 // TODO implement ref forwarding with typescript
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const withDirtyHandlerApi =
     <P extends IWithDirtyHandlerApiProps>(WrappedComponent: React.ComponentType<P>): React.SFC<Subtract<P, IWithDirtyHandlerApiProps>> =>
     (props: any) =>
diff --git a/packages/admin/admin/src/table/withTableQueryContext.tsx b/packages/admin/admin/src/table/withTableQueryContext.tsx
index 2f8b14fac8..9fd0cedb81 100644
--- a/packages/admin/admin/src/table/withTableQueryContext.tsx
+++ b/packages/admin/admin/src/table/withTableQueryContext.tsx
@@ -2,6 +2,9 @@ import * as React from "react";
 
 import { ITableQueryContext, TableQueryContext } from "./TableQueryContext";
 
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export interface IWithTableQueryProps {
     tableQuery?: ITableQueryContext;
 }
@@ -19,6 +22,9 @@ type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 type Subtract<T, K> = Omit<T, keyof K>;
 
 // TODO implement ref forwarding with typescript
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
 export const withTableQueryContext =
     <P extends IWithTableQueryProps>(WrappedComponent: React.ComponentType<P>): React.SFC<Subtract<P, IWithTableQueryProps>> =>
     (props: any) =>