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

package/src/types.ts

@@ -246,6 +246,7 @@ export interface MRT_Localization {
 
 export interface MRT_Theme {
   baseBackgroundColor: string;
+  cellNavigationOutlineColor: string;
   draggingBorderColor: string;
   matchHighlightColor: string;
   menuBackgroundColor: string;
@@ -270,6 +271,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   | 'getColumn'
   | 'getExpandedRowModel'
   | 'getFlatHeaders'
+  | 'getFooterGroups'
   | 'getHeaderGroups'
   | 'getLeafHeaders'
   | 'getLeftLeafColumns'
@@ -292,6 +294,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getColumn: (columnId: string) => MRT_Column<TData>;
   getExpandedRowModel: () => MRT_RowModel<TData>;
   getFlatHeaders: () => MRT_Header<TData>[];
+  getFooterGroups: () => MRT_HeaderGroup<TData>[];
   getHeaderGroups: () => MRT_HeaderGroup<TData>[];
   getLeafHeaders: () => MRT_Header<TData>[];
   getLeftLeafColumns: () => MRT_Column<TData>[];
@@ -810,9 +813,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   columnFilterModeOptions?: Array<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
-  columnVirtualizerInstanceRef?: MutableRefObject<
-    MRT_ColumnVirtualizer | null
-  >;
+  columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
   columnVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;
@@ -869,6 +870,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   enableFullScreenToggle?: boolean;
   enableGlobalFilterModes?: boolean;
   enableGlobalFilterRankedResults?: boolean;
+  enableCellNavigation?: boolean;
   enablePagination?: boolean;
   enableRowActions?: boolean;
   enableRowDragging?: boolean;
@@ -920,18 +922,27 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => CircularProgressProps & { Component?: ReactNode })
     | (CircularProgressProps & { Component?: ReactNode });
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiColumnActionsButtonProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiColumnDragHandleProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiCopyButtonProps?:
     | ((props: {
         cell: MRT_Cell<TData>;
@@ -958,6 +969,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => DialogProps)
     | DialogProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiEditTextFieldProps?:
     | ((props: {
         cell: MRT_Cell<TData>;
@@ -976,18 +990,27 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiFilterAutocompleteProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => AutocompleteProps<any, any, any, any>)
     | AutocompleteProps<any, any, any, any>;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiFilterCheckboxProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => CheckboxProps)
     | CheckboxProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiFilterDatePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -995,6 +1018,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => DatePickerProps<never>)
     | DatePickerProps<never>;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiFilterDateTimePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1002,12 +1028,18 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => DateTimePickerProps<never>)
     | DateTimePickerProps<never>;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => SliderProps)
     | SliderProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiFilterTextFieldProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1015,6 +1047,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => TextFieldProps)
     | TextFieldProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiFilterTimePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1072,6 +1107,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => SkeletonProps)
     | SkeletonProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiTableBodyCellProps?:
     | ((props: {
         cell: MRT_Cell<TData>;
@@ -1109,6 +1147,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => TableRowProps)
     | TableRowProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiTableHeadCellProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1192,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;
@@ -1202,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[];
@@ -1241,7 +1291,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
     row: MRT_Row<TData>;
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
-  }) => ReactNode[];
+  }) => ReactNode[] | undefined;
   renderRowActions?: (props: {
     cell: MRT_Cell<TData>;
     row: MRT_Row<TData>;
@@ -1271,9 +1321,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
     | 'sticky'
     | 'top'
     | 'top-and-bottom';
-  rowVirtualizerInstanceRef?: MutableRefObject<
-    MRT_RowVirtualizer | null
-  >;
+  rowVirtualizerInstanceRef?: MutableRefObject<MRT_RowVirtualizer | null>;
   rowVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;

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>({
@@ -48,3 +53,135 @@ export const openEditingCell = <TData extends MRT_RowData>({
     });
   }
 };
+
+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(
+      event.key,
+    )
+  ) {
+    event.preventDefault();
+    const currentCell = event.currentTarget;
+    const currentRow = parentElement || currentCell.closest('tr');
+
+    const tableElement = containerElement || currentCell.closest('table');
+    const allCells =
+      cellElements ||
+      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'
+            ? tableElement?.querySelector('tr')
+            : tableElement?.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 (event.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(event.ctrlKey ? 'f' : 'c', 'f');
+        break;
+      case 'End':
+        nextCell = findEdgeCell(event.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),