material-react-table 3.0.0-beta.1 → 3.0.0-rc.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-rc.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -110,8 +110,8 @@
     "@mui/icons-material": ">=6",
     "@mui/material": ">=6",
     "@mui/x-date-pickers": ">=7.15",
-    "react": ">=17.0",
-    "react-dom": ">=17.0"
+    "react": ">=18.0",
+    "react-dom": ">=18.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.19.4",

package/src/components/body/MRT_TableBodyCell.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../types';
 import {
   isCellEditable,
-  cellNavigation,
+  cellKeyboardShortcuts,
   openEditingCell,
 } from '../../utils/cell.utils';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
@@ -58,7 +58,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       enableColumnOrdering,
       enableColumnPinning,
       enableGrouping,
-      enableCellNavigation,
+      enableKeyboardShortcuts,
       layoutMode,
       mrtTheme: { draggingBorderColor },
       muiSkeletonProps,
@@ -233,14 +233,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
-    if (enableCellNavigation) {
-      cellNavigation({
-        cell,
-        cellValue: cell.getValue<string>(),
-        event,
-        table,
-      });
-    }
+    cellKeyboardShortcuts({
+      cell,
+      cellValue: cell.getValue<string>(),
+      event,
+      table,
+    });
     tableCellProps?.onKeyDown?.(event);
   };
 
@@ -249,7 +247,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       align={theme.direction === 'rtl' ? 'right' : 'left'}
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
-      tabIndex={enableCellNavigation ? 0 : undefined}
+      tabIndex={enableKeyboardShortcuts ? 0 : undefined}
       {...tableCellProps}
       onKeyDown={handleKeyDown}
       onContextMenu={handleContextMenu}

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -49,7 +49,9 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
     >
       <IconButton
         aria-label={localization.pin}
+        onBlur={() => setTooltipOpened(false)}
         onClick={handleTogglePin}
+        onFocus={() => setTooltipOpened(true)}
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}
         size="small"

package/src/components/buttons/MRT_ToggleFullScreenButton.tsx

@@ -36,7 +36,9 @@ export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
     >
       <IconButton
         aria-label={localization.toggleFullScreen}
+        onBlur={() => setTooltipOpened(false)}
         onClick={handleToggleFullScreen}
+        onFocus={() => setTooltipOpened(true)}
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}
         {...rest}

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../types';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
-import { cellNavigation } from '../../utils/cell.utils';
+import { cellKeyboardShortcuts } from '../../utils/cell.utils';
 
 export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
   extends TableCellProps {
@@ -28,7 +28,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
     options: {
       enableColumnPinning,
       muiTableFooterCellProps,
-      enableCellNavigation,
+      enableKeyboardShortcuts,
     },
   } = table;
   const { density } = getState();
@@ -49,13 +49,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
-    if (enableCellNavigation) {
-      cellNavigation({
-        event,
-        cellValue: footer.column.columnDef.footer,
-        table,
-      });
-    }
+    cellKeyboardShortcuts({
+      event,
+      cellValue: footer.column.columnDef.footer,
+      table,
+    });
     tableCellProps?.onKeyDown?.(event);
   };
 
@@ -71,6 +69,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       colSpan={footer.colSpan}
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
+      tabIndex={enableKeyboardShortcuts ? 0 : undefined}
       variant="footer"
       {...tableCellProps}
       onKeyDown={handleKeyDown}

package/src/components/head/MRT_TableHeadCell.tsx

@@ -17,7 +17,7 @@ import {
 } from '../../types';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
-import { cellNavigation } from '../../utils/cell.utils';
+import { cellKeyboardShortcuts } from '../../utils/cell.utils';
 
 export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
   extends TableCellProps {
@@ -41,12 +41,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       columnFilterDisplayMode,
       columnResizeDirection,
       columnResizeMode,
+      enableKeyboardShortcuts,
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
       enableColumnPinning,
       enableGrouping,
-      enableCellNavigation,
       enableMultiSort,
       layoutMode,
       mrtTheme: { draggingBorderColor },
@@ -150,14 +150,13 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
-    if (enableCellNavigation) {
-      cellNavigation({
-        event,
-        cellValue: header.column.columnDef.header,
-        table,
-        header,
-      });
-    }
+    cellKeyboardShortcuts({
+      event,
+      cellValue: header.column.columnDef.header,
+      table,
+      header,
+    });
+
     tableCellProps?.onKeyDown?.(event);
   };
 
@@ -199,7 +198,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
           }
         }
       }}
-      tabIndex={enableCellNavigation ? 0 : undefined}
+      tabIndex={enableKeyboardShortcuts ? 0 : undefined}
       {...tableCellProps}
       onKeyDown={handleKeyDown}
       sx={(theme: Theme) => ({

package/src/components/table/MRT_TableLoadingOverlay.tsx

@@ -17,6 +17,7 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
 }: MRT_TableLoadingOverlayProps<TData>) => {
   const {
     options: {
+      id,
       localization,
       mrtTheme: { baseBackgroundColor },
       muiCircularProgressProps,
@@ -48,7 +49,7 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
       {circularProgressProps?.Component ?? (
         <CircularProgress
           aria-label={localization.noRecordsToDisplay}
-          id="mrt-progress"
+          id={`mrt-progress-${id}`}
           {...circularProgressProps}
         />
       )}

package/src/components/table/MRT_TablePaper.tsx

@@ -1,5 +1,6 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
-import { useTheme } from '@mui/material';
+import FocusTrap from '@mui/material/Unstable_TrapFocus/FocusTrap';
+import { useTheme } from '@mui/material/styles';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -37,52 +38,55 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
   const theme = useTheme();
 
   return (
-    <Paper
-      elevation={2}
-      {...paperProps}
-      ref={(ref: HTMLDivElement) => {
-        tablePaperRef.current = ref;
-        if (paperProps?.ref) {
-          //@ts-ignore
-          paperProps.ref.current = ref;
-        }
-      }}
-      style={{
-        ...(isFullScreen
-          ? {
-              bottom: 0,
-              height: '100dvh',
-              left: 0,
-              margin: 0,
-              maxHeight: '100dvh',
-              maxWidth: '100dvw',
-              padding: 0,
-              position: 'fixed',
-              right: 0,
-              top: 0,
-              width: '100dvw',
-              zIndex: theme.zIndex.modal,
-            }
-          : {}),
-        ...paperProps?.style,
-      }}
-      sx={(theme) => ({
-        backgroundColor: baseBackgroundColor,
-        backgroundImage: 'unset',
-        overflow: 'hidden',
-        transition: 'all 100ms ease-in-out',
-        ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
-      })}
-    >
-      {enableTopToolbar &&
-        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
-          <MRT_TopToolbar table={table} />
-        ))}
-      <MRT_TableContainer table={table} />
-      {enableBottomToolbar &&
-        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
-          <MRT_BottomToolbar table={table} />
-        ))}
-    </Paper>
+    <FocusTrap open={isFullScreen}>
+      <Paper
+        elevation={2}
+        onKeyDown={(e) => e.key === 'Escape' && table.setIsFullScreen(false)}
+        {...paperProps}
+        ref={(ref: HTMLDivElement) => {
+          tablePaperRef.current = ref;
+          if (paperProps?.ref) {
+            //@ts-ignore
+            paperProps.ref.current = ref;
+          }
+        }}
+        style={{
+          ...(isFullScreen
+            ? {
+                bottom: 0,
+                height: '100dvh',
+                left: 0,
+                margin: 0,
+                maxHeight: '100dvh',
+                maxWidth: '100dvw',
+                padding: 0,
+                position: 'fixed',
+                right: 0,
+                top: 0,
+                width: '100dvw',
+                zIndex: theme.zIndex.modal,
+              }
+            : {}),
+          ...paperProps?.style,
+        }}
+        sx={(theme) => ({
+          backgroundColor: baseBackgroundColor,
+          backgroundImage: 'unset',
+          overflow: 'hidden',
+          transition: 'all 100ms ease-in-out',
+          ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
+        })}
+      >
+        {enableTopToolbar &&
+          (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+            <MRT_TopToolbar table={table} />
+          ))}
+        <MRT_TableContainer table={table} />
+        {enableBottomToolbar &&
+          (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+            <MRT_BottomToolbar table={table} />
+          ))}
+      </Paper>
+    </FocusTrap>
   );
 };

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -41,6 +41,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     options: {
       enableToolbarInternalActions,
       icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
+      id,
       localization,
       muiPaginationProps,
       paginationDisplayMode,
@@ -107,7 +108,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     >
       {showRowsPerPage && (
         <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
-          <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
+          <InputLabel htmlFor={`mrt-rows-per-page-${id}`} sx={{ mb: 0 }}>
             {localization.rowsPerPage}
           </InputLabel>
           <Select
@@ -116,7 +117,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             disabled={disabled}
             inputProps={{
               'aria-label': localization.rowsPerPage,
-              id: 'mrt-rows-per-page',
+              id: `mrt-rows-per-page-${id}`,
             }}
             label={localization.rowsPerPage}
             onChange={(event) =>

package/src/hooks/useMRT_TableOptions.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -76,7 +76,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,
-  enableCellNavigation = true,
+  enableKeyboardShortcuts = true,
   enableMultiRowSelection = true,
   enableMultiSort = true,
   enablePagination = true,
@@ -92,6 +92,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableTopToolbar = true,
   filterFns,
   icons,
+  id = useId(),
   layoutMode,
   localization,
   manualFiltering,
@@ -204,7 +205,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableGlobalFilterRankedResults,
     enableGrouping,
     enableHiding,
-    enableCellNavigation,
+    enableKeyboardShortcuts,
     enableMultiRowSelection,
     enableMultiSort,
     enablePagination,
@@ -244,6 +245,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
       enableSorting && !manualSorting ? getSortedRowModel() : undefined,
     getSubRows: (row) => row?.subRows,
     icons,
+    id,
     layoutMode,
     localization,
     manualFiltering,

package/src/types.ts

@@ -184,9 +184,10 @@ export interface MRT_Localization {
   filterFuzzy: string;
   filterGreaterThan: string;
   filterGreaterThanOrEqualTo: string;
-  filterInNumberRange: string;
   filterIncludesString: string;
   filterIncludesStringSensitive: string;
+  filteringByColumn: string;
+  filterInNumberRange: string;
   filterLessThan: string;
   filterLessThanOrEqualTo: string;
   filterMode: string;
@@ -194,7 +195,6 @@ export interface MRT_Localization {
   filterNotEquals: string;
   filterStartsWith: string;
   filterWeakEquals: string;
-  filteringByColumn: string;
   goToFirstPage: string;
   goToLastPage: string;
   goToNextPage: string;
@@ -412,6 +412,22 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     | 'id'
     | 'sortingFn'
   > {
+  /**
+   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
+   * Specify a function here to point to the correct property in the data object.
+   *
+   * @example accessorFn: (row) => row.username
+   */
+  accessorFn?: (originalRow: TData) => TValue;
+  /**
+   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
+   * Specify which key in the row this column should use to access the correct data.
+   * Also supports Deep Key Dot Notation.
+   *
+   * @example accessorKey: 'username' //simple
+   * @example accessorKey: 'name.firstName' //deep key dot notation
+   */
+  accessorKey?: DeepKeys<TData> | (string & {});
   AggregatedCell?: (props: {
     cell: MRT_Cell<TData, TValue>;
     column: MRT_Column<TData, TValue>;
@@ -420,6 +436,7 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     staticColumnIndex?: number;
     staticRowIndex?: number;
   }) => ReactNode;
+  aggregationFn?: Array<MRT_AggregationFn<TData>> | MRT_AggregationFn<TData>;
   Cell?: (props: {
     cell: MRT_Cell<TData, TValue>;
     column: MRT_Column<TData, TValue>;
@@ -430,63 +447,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
-  Edit?: (props: {
-    cell: MRT_Cell<TData, TValue>;
-    column: MRT_Column<TData, TValue>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  Filter?: (props: {
-    column: MRT_Column<TData, TValue>;
-    header: MRT_Header<TData>;
-    rangeFilterIndex?: number;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  Footer?:
-    | ((props: {
-        column: MRT_Column<TData, TValue>;
-        footer: MRT_Header<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => ReactNode)
-    | ReactNode;
-  GroupedCell?: (props: {
-    cell: MRT_Cell<TData, TValue>;
-    column: MRT_Column<TData, TValue>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-    staticColumnIndex?: number;
-    staticRowIndex?: number;
-  }) => ReactNode;
-  Header?:
-    | ((props: {
-        column: MRT_Column<TData, TValue>;
-        header: MRT_Header<TData>;
-        table: MRT_TableInstance<TData>;
-      }) => ReactNode)
-    | ReactNode;
-  PlaceholderCell?: (props: {
-    cell: MRT_Cell<TData, TValue>;
-    column: MRT_Column<TData, TValue>;
-    row: MRT_Row<TData>;
-    table: MRT_TableInstance<TData>;
-  }) => ReactNode;
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   * Specify a function here to point to the correct property in the data object.
-   *
-   * @example accessorFn: (row) => row.username
-   */
-  accessorFn?: (originalRow: TData) => TValue;
-  /**
-   * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
-   * Specify which key in the row this column should use to access the correct data.
-   * Also supports Deep Key Dot Notation.
-   *
-   * @example accessorKey: 'username' //simple
-   * @example accessorKey: 'name.firstName' //deep key dot notation
-   */
-  accessorKey?: DeepKeys<TData> | (string & {});
-  aggregationFn?: Array<MRT_AggregationFn<TData>> | MRT_AggregationFn<TData>;
   /**
    * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
    * Leave this blank if you are just creating a normal data column.
@@ -500,6 +460,12 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     LiteralUnion<string & MRT_FilterOption>
   > | null;
   columns?: MRT_ColumnDef<TData, TValue>[];
+  Edit?: (props: {
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   editSelectOptions?:
     | ((props: {
         cell: MRT_Cell<TData, TValue>;
@@ -519,6 +485,12 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
   enableColumnOrdering?: boolean;
   enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
   enableFilterMatchHighlighting?: boolean;
+  Filter?: (props: {
+    column: MRT_Column<TData, TValue>;
+    header: MRT_Header<TData>;
+    rangeFilterIndex?: number;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: DropdownOption[];
   filterVariant?:
@@ -539,6 +511,21 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
    */
   footer?: string;
+  Footer?:
+    | ((props: {
+        column: MRT_Column<TData, TValue>;
+        footer: MRT_Header<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode)
+    | ReactNode;
+  GroupedCell?: (props: {
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+    staticColumnIndex?: number;
+    staticRowIndex?: number;
+  }) => ReactNode;
   /**
    * If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
    */
@@ -547,6 +534,13 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
    * header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
    */
   header: string;
+  Header?:
+    | ((props: {
+        column: MRT_Column<TData, TValue>;
+        header: MRT_Header<TData>;
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode)
+    | ReactNode;
   /**
    * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
    *
@@ -651,6 +645,12 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
         table: MRT_TableInstance<TData>;
       }) => TableCellProps)
     | TableCellProps;
+  PlaceholderCell?: (props: {
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   renderCellActionMenuItems?: (props: {
     cell: MRT_Cell<TData>;
     closeMenu: () => void;
@@ -813,12 +813,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   columnFilterModeOptions?: Array<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
-  columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
-  columnVirtualizerOptions?:
-    | ((props: {
-        table: MRT_TableInstance<TData>;
-      }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>)
-    | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
   /**
    * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` table option.
    *
@@ -830,6 +824,12 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
    * @link https://www.material-react-table.com/docs/api/column-options
    */
   columns: MRT_ColumnDef<TData, any>[];
+  columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
+  columnVirtualizerOptions?:
+    | ((props: {
+        table: MRT_TableInstance<TData>;
+      }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>)
+    | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
   createDisplayMode?: 'custom' | 'modal' | 'row';
   /**
    * Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.
@@ -870,7 +870,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   enableFullScreenToggle?: boolean;
   enableGlobalFilterModes?: boolean;
   enableGlobalFilterRankedResults?: boolean;
-  enableCellNavigation?: boolean;
+  enableKeyboardShortcuts?: boolean;
   enablePagination?: boolean;
   enableRowActions?: boolean;
   enableRowDragging?: boolean;
@@ -894,6 +894,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   globalFilterFn?: MRT_FilterOption;
   globalFilterModeOptions?: MRT_FilterOption[] | null;
   icons?: Partial<MRT_Icons>;
+  id?: string;
   initialState?: Partial<MRT_TableState<TData>>;
   /**
    * Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
@@ -1132,6 +1133,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   muiTableContainerProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => TableContainerProps)
     | TableContainerProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiTableFooterCellProps?:
     | ((props: {
         column: MRT_Column<TData>;