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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "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.",
@@ -35,11 +35,11 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "53 KB"
+      "limit": "55 KB"
     },
     {
       "path": "dist/index.esm.js",
-      "limit": "50 KB"
+      "limit": "51 KB"
     }
   ],
   "engines": {
@@ -78,11 +78,11 @@
     "@storybook/preview-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
-    "@types/node": "^22.5.1",
+    "@types/node": "^22.5.2",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.9.1",
     "eslint-plugin-mui-path-imports": "^0.0.15",

package/src/components/body/MRT_TableBodyCell.tsx

@@ -232,11 +232,16 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTableCellElement>) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
     if (enableCellNavigation) {
-      cellNavigation(e);
+      cellNavigation({
+        cell,
+        cellValue: cell.getValue<string>(),
+        event,
+        table,
+      });
     }
-    tableCellProps?.onKeyDown?.(e);
+    tableCellProps?.onKeyDown?.(event);
   };
 
   return (

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -48,11 +48,15 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTableCellElement>) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
     if (enableCellNavigation) {
-      cellNavigation(e);
+      cellNavigation({
+        event,
+        cellValue: footer.column.columnDef.footer,
+        table,
+      });
     }
-    tableCellProps?.onKeyDown?.(e);
+    tableCellProps?.onKeyDown?.(event);
   };
 
   return (

package/src/components/head/MRT_TableHeadCell.tsx

@@ -149,11 +149,16 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTableCellElement>) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
     if (enableCellNavigation) {
-      cellNavigation(e);
+      cellNavigation({
+        event,
+        cellValue: header.column.columnDef.header,
+        table,
+        header,
+      });
     }
-    tableCellProps?.onKeyDown?.(e);
+    tableCellProps?.onKeyDown?.(event);
   };
 
   const HeaderElement =

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -338,6 +338,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         : filterPlaceholder,
     variant: 'standard',
     ...textFieldProps,
+    onKeyDown: (e) => {
+      e.stopPropagation();
+      textFieldProps.onKeyDown?.(e);
+    },
     sx: (theme) => ({
       minWidth: isDateFilter
         ? '160px'

package/src/components/menus/MRT_ActionMenuItem.tsx

@@ -35,6 +35,7 @@ export const MRT_ActionMenuItem = <TData extends MRT_RowData>({
         my: 0,
         py: '6px',
       }}
+      tabIndex={0}
       {...rest}
     >
       <Box

package/src/types.ts

@@ -1099,9 +1099,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => CheckboxProps | RadioProps)
     | (CheckboxProps | RadioProps);
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiSkeletonProps?:
     | ((props: {
         cell: MRT_Cell<TData>;
@@ -1236,6 +1233,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   renderCaption?:
     | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
     | ReactNode;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   renderCellActionMenuItems?: (props: {
     cell: MRT_Cell<TData>;
     closeMenu: () => void;
@@ -1246,12 +1246,18 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   renderColumnActionsMenuItems?: (props: {
     closeMenu: () => void;
     column: MRT_Column<TData>;
     internalColumnMenuItems: ReactNode[];
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   renderColumnFilterModeMenuItems?: (props: {
     column: MRT_Column<TData>;
     internalFilterOptions: MRT_InternalFilterOption[];

package/src/utils/cell.utils.ts

@@ -1,8 +1,13 @@
 import {
+  MRT_Header,
   type MRT_Cell,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
+import {
+  getMRT_RowSelectionHandler,
+  getMRT_SelectAllHandler,
+} from './row.utils';
 import { parseFromValuesOrFunc } from './utils';
 
 export const isCellEditable = <TData extends MRT_RowData>({
@@ -49,20 +54,77 @@ export const openEditingCell = <TData extends MRT_RowData>({
   }
 };
 
-export const cellNavigation = (
-  e: React.KeyboardEvent<HTMLTableCellElement>,
-) => {
-  if (
+export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
+  cell,
+  cellElements,
+  cellValue,
+  containerElement,
+  event,
+  header,
+  parentElement,
+  table,
+}: {
+  cell?: MRT_Cell<TData>;
+  header?: MRT_Header<TData>;
+  cellElements?: Array<HTMLTableCellElement>;
+  cellValue?: string;
+  containerElement?: HTMLTableElement;
+  event: React.KeyboardEvent<HTMLTableCellElement>;
+  parentElement?: HTMLTableRowElement;
+  table: MRT_TableInstance<TData>;
+}) => {
+  if (cellValue && (event.ctrlKey || event.metaKey) && event.key === 'c') {
+    navigator.clipboard.writeText(cellValue);
+  } else if (['Enter', ' '].includes(event.key)) {
+    if (cell?.column?.id === 'mrt-row-select') {
+      getMRT_RowSelectionHandler({
+        row: cell.row,
+        table,
+        //@ts-ignore
+        staticRowIndex: +event.target.getAttribute('data-index'),
+      })(event as any);
+    } else if (
+      header?.column?.id === 'mrt-row-select' &&
+      table.options.enableSelectAll
+    ) {
+      getMRT_SelectAllHandler({
+        table,
+      })(event as any);
+    } else if (
+      cell?.column?.id === 'mrt-row-expand' &&
+      (cell.row.getCanExpand() ||
+        table.options.renderDetailPanel?.({ row: cell.row, table }))
+    ) {
+      cell.row.toggleExpanded();
+    } else if (
+      header?.column?.id === 'mrt-row-expand' &&
+      table.options.enableExpandAll
+    ) {
+      table.toggleAllRowsExpanded();
+    } else if (header?.column?.getCanSort()) {
+      header.column.toggleSorting();
+    } else if (cell?.column.id === 'mrt-row-pin') {
+      cell.row.getIsPinned()
+        ? cell.row.pin(false)
+        : cell.row.pin(
+            table.options.rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top',
+          );
+    }
+  } else if (
     ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
-      e.key,
+      event.key,
     )
   ) {
-    e.preventDefault();
-    const currentCell = e.currentTarget;
-    const currentRow = currentCell.closest('tr');
+    event.preventDefault();
+    const currentCell = event.currentTarget;
+    const currentRow = parentElement || currentCell.closest('tr');
 
-    const tableElement = currentCell.closest('table');
-    const allCells = Array.from(tableElement?.querySelectorAll('th, td') || []);
+    const tableElement = containerElement || currentCell.closest('table');
+    const allCells =
+      cellElements ||
+      Array.from(tableElement?.querySelectorAll('th, td') || []);
     const currentCellIndex = allCells.indexOf(currentCell);
 
     const currentIndex = parseInt(
@@ -76,8 +138,8 @@ export const cellNavigation = (
         rowIndex === 'c'
           ? currentRow
           : rowIndex === 'f'
-            ? currentCell.closest('table')?.querySelector('tr')
-            : currentCell.closest('table')?.lastElementChild?.lastElementChild;
+            ? tableElement?.querySelector('tr')
+            : tableElement?.lastElementChild?.lastElementChild;
       const rowCells = Array.from(row?.children || []);
       const targetCell =
         edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
@@ -97,7 +159,7 @@ export const cellNavigation = (
       ) as HTMLElement | undefined;
     };
 
-    switch (e.key) {
+    switch (event.key) {
       case 'ArrowRight':
         nextCell = findAdjacentCell(currentIndex + 1, 'f');
         break;
@@ -111,10 +173,10 @@ export const cellNavigation = (
         nextCell = findAdjacentCell(currentIndex, 'f');
         break;
       case 'Home':
-        nextCell = findEdgeCell(e.ctrlKey ? 'f' : 'c', 'f');
+        nextCell = findEdgeCell(event.ctrlKey ? 'f' : 'c', 'f');
         break;
       case 'End':
-        nextCell = findEdgeCell(e.ctrlKey ? 'l' : 'c', 'l');
+        nextCell = findEdgeCell(event.ctrlKey ? 'l' : 'c', 'l');
         break;
     }