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

package/src/utils/cell.utils.ts

@@ -48,3 +48,78 @@ export const openEditingCell = <TData extends MRT_RowData>({
     });
   }
 };
+
+export const cellNavigation = (
+  e: React.KeyboardEvent<HTMLTableCellElement>,
+) => {
+  if (
+    ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
+      e.key,
+    )
+  ) {
+    e.preventDefault();
+    const currentCell = e.currentTarget;
+    const currentRow = currentCell.closest('tr');
+
+    const tableElement = currentCell.closest('table');
+    const allCells = Array.from(tableElement?.querySelectorAll('th, td') || []);
+    const currentCellIndex = allCells.indexOf(currentCell);
+
+    const currentIndex = parseInt(
+      currentCell.getAttribute('data-index') || '0',
+    );
+    let nextCell: HTMLElement | undefined = undefined;
+
+    //home/end first or last cell in row
+    const findEdgeCell = (rowIndex: 'c' | 'f' | 'l', edge: 'f' | 'l') => {
+      const row =
+        rowIndex === 'c'
+          ? currentRow
+          : rowIndex === 'f'
+            ? currentCell.closest('table')?.querySelector('tr')
+            : currentCell.closest('table')?.lastElementChild?.lastElementChild;
+      const rowCells = Array.from(row?.children || []);
+      const targetCell =
+        edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
+      return targetCell as HTMLElement;
+    };
+
+    const findAdjacentCell = (
+      columnIndex: number,
+      searchDirection: 'f' | 'b',
+    ) => {
+      const searchArray =
+        searchDirection === 'f'
+          ? allCells.slice(currentCellIndex + 1)
+          : allCells.slice(0, currentCellIndex).reverse();
+      return searchArray.find((cell) =>
+        cell.matches(`[data-index="${columnIndex}"]`),
+      ) as HTMLElement | undefined;
+    };
+
+    switch (e.key) {
+      case 'ArrowRight':
+        nextCell = findAdjacentCell(currentIndex + 1, 'f');
+        break;
+      case 'ArrowLeft':
+        nextCell = findAdjacentCell(currentIndex - 1, 'b');
+        break;
+      case 'ArrowUp':
+        nextCell = findAdjacentCell(currentIndex, 'b');
+        break;
+      case 'ArrowDown':
+        nextCell = findAdjacentCell(currentIndex, 'f');
+        break;
+      case 'Home':
+        nextCell = findEdgeCell(e.ctrlKey ? 'f' : 'c', 'f');
+        break;
+      case 'End':
+        nextCell = findEdgeCell(e.ctrlKey ? 'l' : 'c', 'l');
+        break;
+    }
+
+    if (nextCell) {
+      nextCell.focus();
+    }
+  }
+};

package/src/utils/style.utils.ts

@@ -27,6 +27,7 @@ export const getMRTTheme = <TData extends MRT_RowData>(
       : muiTheme.palette.background.default);
   return {
     baseBackgroundColor,
+    cellNavigationOutlineColor: muiTheme.palette.primary.main,
     draggingBorderColor: muiTheme.palette.primary.main,
     matchHighlightColor:
       muiTheme.palette.mode === 'dark'
@@ -170,6 +171,10 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
         : columnDefType !== 'group' && isColumnPinned
           ? 1
           : 0,
+    '&:focus-visible': {
+      outline: `2px solid ${table.options.mrtTheme.cellNavigationOutlineColor}`,
+      outlineOffset: '-2px',
+    },
     ...pinnedStyles,
     ...widthStyles,
     ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),