more progress on v3 migration and keyboard navigation

Author: KevinVandy

apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx

@@ -17,8 +17,9 @@ This will be the easiest MRT upgrade ever! Material React Table V3 is mostly jus
 
 ### New Feature Highlights
 
-1. Compatible with Material UI V6
-2. **Almost no other changes**. MRT is not taking advantage of the new optional features in Material UI V6 yet. MRT V3 will serve as an easy upgrade target for those who are just looking to upgrade their Material UI package versions.
+1. Compatible with Material UI V6 with generally better performance across the board
+2. Keyboard navigation improvements that are now included by default
+3. **Almost no other changes**. MRT is not taking advantage of the new optional features in Material UI V6 yet. MRT V3 will serve as an easy upgrade target for those who are just looking to upgrade their Material UI package versions.
 
 ### Upgrade Dependencies
 
@@ -46,18 +47,59 @@ npx npm-check-updates -u material-react-table
 
 And then perform the actual install (downloading the new version):
 
-<InstallCommand packagesString="material-react-table" />
+<InstallCommand packagesString="" />
 
 You should now be on Material React Table V3! Look for any code or type errors in your project and fix them as needed.
 
 ### Breaking Changes
 
-- `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages
+- `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages (you might be able to get away with lower MUI versions for a while, but eventually MUI V6 APIs will be used internally by MRT and your project will break)
 - `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency
-
 - Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types
-
 - Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types.
+- Deprecated several `mui*Props` table options that were column-specific. These table options should either be specified in column defs or in the `defaultColumn` table option.
+  - `muiColumnActionsButtonProps`
+  - `muiColumnDragHandleProps`
+  - `muiCopyButtonProps`
+  - `muiEditTextFieldProps`
+  - `muiFilterAutocompleteProps`
+  - `muiFilterCheckboxProps`
+  - `muiFilterDatePickerProps`
+  - `muiFilterDateTimePickerProps`
+  - `muiFilterSliderProps`
+  - `muiFilterTextFieldProps`
+  - `muiFilterTimePickerProps`
+  - `muiSkeletonProps`
+  - `muiTableBodyCellProps`
+  - `muiTableHeadCellProps`
+  - `renderCellActionMenuItems`
+  - `renderColumnActionsMenuItems`
+  - `renderColumnFilterModeMenuItems`
+
+```diff
+const table = useTable({
+  columns,
+  data,
+  // Recommended to specify these table options in the defaultColumn instead
++ defaultColumn: { // applies to all columns
++    muiTableBodyCellProps: {
++      align: 'center',
++    },
++    muiFilterAutocompleteProps: {
++      sx: { my: 2 },
++    },
++  },
+// these table options will be removed in MRT V4
+-  muiTableBodyCellProps: {
+-    align: 'center',
+-  },
+-  muiFilterAutocompleteProps: {
+-    sx: { my: 2 },
+-  },
+)};
+```
+
+You can be lazy with these changes. These table options are just marked as deprecated, but they will still work until MRT V4.
 
 > Can I uninstall Emotion Yet? No, Emotion is still required for Material React Table V3, but it won't be for long. MRT V4 will remove the Emotion dependency in favor of [Pigment CSS](https://mui.com/blog/introducing-pigment-css/).
 

packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx

@@ -232,11 +232,11 @@ 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({ event, cellValue: cell.getValue<string>() });
     }
-    tableCellProps?.onKeyDown?.(e);
+    tableCellProps?.onKeyDown?.(event);
   };
 
   return (

packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx

@@ -48,11 +48,11 @@ 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.footer });
     }
-    tableCellProps?.onKeyDown?.(e);
+    tableCellProps?.onKeyDown?.(event);
   };
 
   return (

packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx

@@ -149,11 +149,11 @@ 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.header });
     }
-    tableCellProps?.onKeyDown?.(e);
+    tableCellProps?.onKeyDown?.(event);
   };
 
   const HeaderElement =

packages/material-react-table/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

packages/material-react-table/src/types.ts

@@ -1236,6 +1236,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 +1249,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[];

packages/material-react-table/src/utils/cell.utils.ts

@@ -49,20 +49,35 @@ export const openEditingCell = <TData extends MRT_RowData>({
   }
 };
 
-export const cellNavigation = (
-  e: React.KeyboardEvent<HTMLTableCellElement>,
-) => {
+export const cellNavigation = ({
+  cellElements,
+  cellValue,
+  containerElement,
+  event,
+  parentElement,
+}: {
+  cellElements?: Array<HTMLTableCellElement | HTMLDivElement>;
+  cellValue?: string;
+  containerElement?: HTMLDivElement | HTMLTableElement;
+  event: React.KeyboardEvent<HTMLTableCellElement | HTMLDivElement>;
+  parentElement?: HTMLTableRowElement | HTMLDivElement;
+}) => {
+  if (cellValue && (event.ctrlKey || event.metaKey) && event.key === 'c') {
+    navigator.clipboard.writeText(cellValue);
+  }
   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 +91,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 +112,7 @@ export const cellNavigation = (
       ) as HTMLElement | undefined;
     };
 
-    switch (e.key) {
+    switch (event.key) {
       case 'ArrowRight':
         nextCell = findAdjacentCell(currentIndex + 1, 'f');
         break;
@@ -111,10 +126,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;
     }