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

@@ -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.

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.

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

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.

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.

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

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

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`.

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.

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 (

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;

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) {

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();

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);

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>) {

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" {

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 };
 

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

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 = {

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) => {

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" {

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);

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;