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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0-alpha.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

@@ -16,7 +16,11 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { isCellEditable, openEditingCell } from '../../utils/cell.utils';
+import {
+  isCellEditable,
+  cellNavigation,
+  openEditingCell,
+} from '../../utils/cell.utils';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
@@ -54,6 +58,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       enableColumnOrdering,
       enableColumnPinning,
       enableGrouping,
+      enableCellNavigation,
       layoutMode,
       mrtTheme: { draggingBorderColor },
       muiSkeletonProps,
@@ -227,12 +232,26 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    if (enableCellNavigation) {
+      cellNavigation({
+        cell,
+        cellValue: cell.getValue<string>(),
+        event,
+        table,
+      });
+    }
+    tableCellProps?.onKeyDown?.(event);
+  };
+
   return (
     <TableCell
       align={theme.direction === 'rtl' ? 'right' : 'left'}
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
+      tabIndex={enableCellNavigation ? 0 : undefined}
       {...tableCellProps}
+      onKeyDown={handleKeyDown}
       onContextMenu={handleContextMenu}
       onDoubleClick={handleDoubleClick}
       onDragEnter={handleDragEnter}

package/src/components/body/MRT_TableBodyRow.tsx

@@ -248,6 +248,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
               staticRowIndex,
               table,
             };
+            const key = `${cell.id}-${staticRowIndex}`;
             return cell ? (
               memoMode === 'cells' &&
               cell.column.columnDef.columnDefType === 'data' &&
@@ -255,9 +256,9 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
               !draggingRow &&
               editingCell?.id !== cell.id &&
               editingRow?.id !== row.id ? (
-                <Memo_MRT_TableBodyCell key={cell.id} {...props} />
+                <Memo_MRT_TableBodyCell key={key} {...props} />
               ) : (
-                <MRT_TableBodyCell key={cell.id} {...props} />
+                <MRT_TableBodyCell key={key} {...props} />
               )
             ) : null;
           },

package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -94,7 +94,11 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
             <EditIcon />
           </IconButton>
         </Tooltip>
-      ) : renderRowActionMenuItems ? (
+      ) : renderRowActionMenuItems?.({
+          row,
+          staticRowIndex,
+          table,
+        } as any)?.length ? (
         <>
           <Tooltip {...getCommonTooltipProps()} title={localization.rowActions}>
             <IconButton

package/src/components/footer/MRT_TableFooter.tsx

@@ -19,7 +19,6 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableFooterProps<TData>) => {
   const {
-    getFooterGroups,
     getState,
     options: { enableStickyFooter, layoutMode, muiTableFooterProps },
     refs: { tableFooterRef },
@@ -36,6 +35,22 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   const stickFooter =
     (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
 
+  const footerGroups = table.getFooterGroups();
+
+  //if no footer cells at all, skip footer
+  if (
+    !footerGroups.some((footerGroup) =>
+      footerGroup.headers?.some(
+        (header) =>
+          (typeof header.column.columnDef.footer === 'string' &&
+            !!header.column.columnDef.footer) ||
+          header.column.columnDef.Footer,
+      ),
+    )
+  ) {
+    return null;
+  }
+
   return (
     <TableFooter
       {...tableFooterProps}
@@ -60,7 +75,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
         ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}
     >
-      {getFooterGroups().map((footerGroup) => (
+      {footerGroups.map((footerGroup) => (
         <MRT_TableFooterRow
           columnVirtualizer={columnVirtualizer}
           footerGroup={footerGroup as any}

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../types';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
+import { cellNavigation } from '../../utils/cell.utils';
 
 export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
   extends TableCellProps {
@@ -24,7 +25,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   const theme = useTheme();
   const {
     getState,
-    options: { enableColumnPinning, muiTableFooterCellProps },
+    options: {
+      enableColumnPinning,
+      muiTableFooterCellProps,
+      enableCellNavigation,
+    },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -43,6 +48,17 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    if (enableCellNavigation) {
+      cellNavigation({
+        event,
+        cellValue: footer.column.columnDef.footer,
+        table,
+      });
+    }
+    tableCellProps?.onKeyDown?.(event);
+  };
+
   return (
     <TableCell
       align={
@@ -57,6 +73,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       data-pinned={!!isColumnPinned || undefined}
       variant="footer"
       {...tableCellProps}
+      onKeyDown={handleKeyDown}
       sx={(theme) => ({
         fontWeight: 'bold',
         p:

package/src/components/head/MRT_TableHeadCell.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../types';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
+import { cellNavigation } from '../../utils/cell.utils';
 
 export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
   extends TableCellProps {
@@ -45,6 +46,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       enableColumnOrdering,
       enableColumnPinning,
       enableGrouping,
+      enableCellNavigation,
       enableMultiSort,
       layoutMode,
       mrtTheme: { draggingBorderColor },
@@ -147,6 +149,18 @@ 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,
+      });
+    }
+    tableCellProps?.onKeyDown?.(event);
+  };
+
   const HeaderElement =
     parseFromValuesOrFunc(columnDef.Header, {
       column,
@@ -185,7 +199,9 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
           }
         }
       }}
+      tabIndex={enableCellNavigation ? 0 : undefined}
       {...tableCellProps}
+      onKeyDown={handleKeyDown}
       sx={(theme: Theme) => ({
         '& :hover': {
           '.MuiButtonBase-root': {

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/components/menus/MRT_RowActionMenu.tsx

@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { ReactNode, useMemo, type MouseEvent } from 'react';
 import Menu, { type MenuProps } from '@mui/material/Menu';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import {
@@ -40,6 +40,30 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   } = table;
   const { density } = getState();
 
+  const menuItems = useMemo(() => {
+    const items: ReactNode[] = [];
+    const editItem = parseFromValuesOrFunc(enableEditing, row) &&
+      ['modal', 'row'].includes(editDisplayMode!) && (
+        <MRT_ActionMenuItem
+          icon={<EditIcon />}
+          label={localization.edit}
+          onClick={handleEdit}
+          table={table}
+        />
+      );
+    if (editItem) items.push(editItem);
+    const rowActionMenuItems = renderRowActionMenuItems?.({
+      closeMenu: () => setAnchorEl(null),
+      row,
+      staticRowIndex,
+      table,
+    });
+    if (rowActionMenuItems?.length) items.push(...rowActionMenuItems);
+    return items;
+  }, [renderRowActionMenuItems, row, staticRowIndex, table]);
+
+  if (!menuItems.length) return null;
+
   return (
     <Menu
       MenuListProps={{
@@ -55,21 +79,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
       open={!!anchorEl}
       {...rest}
     >
-      {parseFromValuesOrFunc(enableEditing, row) &&
-        ['modal', 'row'].includes(editDisplayMode!) && (
-          <MRT_ActionMenuItem
-            icon={<EditIcon />}
-            label={localization.edit}
-            onClick={handleEdit}
-            table={table}
-          />
-        )}
-      {renderRowActionMenuItems?.({
-        closeMenu: () => setAnchorEl(null),
-        row,
-        staticRowIndex,
-        table,
-      })}
+      {menuItems}
     </Menu>
   );
 };

package/src/fns/filterFns.ts

@@ -11,10 +11,14 @@ const fuzzy = <TData extends MRT_RowData>(
   columnId: string,
   filterValue: number | string,
   addMeta: (item: RankingInfo) => void,
-) => {
-  const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
-    threshold: rankings.MATCHES,
-  });
+): boolean => {
+  const itemRank = rankItem(
+    row.getValue<string | number | null>(columnId),
+    filterValue as string,
+    {
+      threshold: rankings.MATCHES,
+    },
+  );
   addMeta(itemRank);
   return itemRank.passed;
 };
@@ -25,10 +29,10 @@ const contains = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) =>
-  row
-    .getValue<number | string>(id)
-    .toString()
+): boolean =>
+  !!row
+    .getValue<number | string | null>(id)
+    ?.toString()
     .toLowerCase()
     .trim()
     .includes(filterValue.toString().toLowerCase().trim());
@@ -39,10 +43,10 @@ const startsWith = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) =>
-  row
-    .getValue<number | string>(id)
-    .toString()
+): boolean =>
+  !!row
+    .getValue<number | string | null>(id)
+    ?.toString()
     .toLowerCase()
     .trim()
     .startsWith(filterValue.toString().toLowerCase().trim());
@@ -53,10 +57,10 @@ const endsWith = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) =>
-  row
-    .getValue<number | string>(id)
-    .toString()
+): boolean =>
+  !!row
+    .getValue<number | string | null>(id)
+    ?.toString()
     .toLowerCase()
     .trim()
     .endsWith(filterValue.toString().toLowerCase().trim());
@@ -67,9 +71,9 @@ const equals = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) =>
-  row.getValue<number | string>(id).toString().toLowerCase().trim() ===
-  filterValue?.toString().toLowerCase().trim();
+): boolean =>
+  row.getValue<number | string | null>(id)?.toString().toLowerCase().trim() ===
+  filterValue.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
 
@@ -77,8 +81,8 @@ const notEquals = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) =>
-  row.getValue<number | string>(id).toString().toLowerCase().trim() !==
+): boolean =>
+  row.getValue<number | string | null>(id)?.toString().toLowerCase().trim() !==
   filterValue.toString().toLowerCase().trim();
 
 notEquals.autoRemove = (val: any) => !val;
@@ -87,11 +91,13 @@ const greaterThan = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) =>
+): boolean =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
-    ? +row.getValue<number | string>(id) > +filterValue
-    : row.getValue<number | string>(id).toString().toLowerCase().trim() >
-      filterValue?.toString().toLowerCase().trim();
+    ? +(row.getValue<number | string | null>(id) ?? 0) > +filterValue
+    : (row.getValue<number | string | null>(id) ?? '')
+        ?.toString()
+        .toLowerCase()
+        .trim() > filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
 
@@ -99,7 +105,7 @@ const greaterThanOrEqualTo = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+): boolean => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 
@@ -107,11 +113,13 @@ const lessThan = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) =>
+): boolean =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
-    ? +row.getValue<number | string>(id) < +filterValue
-    : row.getValue<number | string>(id).toString().toLowerCase().trim() <
-      filterValue?.toString().toLowerCase().trim();
+    ? +(row.getValue<number | string | null>(id) ?? 0) < +filterValue
+    : (row.getValue<number | string | null>(id) ?? '')
+        ?.toString()
+        .toLowerCase()
+        .trim() < filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
 
@@ -119,7 +127,7 @@ const lessThanOrEqualTo = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
-) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+): boolean => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
 
@@ -127,7 +135,7 @@ const between = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValues: [number | string, number | string],
-) =>
+): boolean =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThan(row, id, filterValues[0])) &&
   ((!isNaN(+filterValues[0]) &&
@@ -142,7 +150,7 @@ const betweenInclusive = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValues: [number | string, number | string],
-) =>
+): boolean =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThanOrEqualTo(row, id, filterValues[0])) &&
   ((!isNaN(+filterValues[0]) &&
@@ -157,7 +165,7 @@ const empty = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   _filterValue: number | string,
-) => !row.getValue<number | string>(id).toString().trim();
+): boolean => !row.getValue<number | string | null>(id)?.toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
@@ -165,7 +173,7 @@ const notEmpty = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   _filterValue: number | string,
-) => !!row.getValue<number | string>(id).toString().trim();
+): boolean => !!row.getValue<number | string | null>(id)?.toString().trim();
 
 notEmpty.autoRemove = (val: any) => !val;
 

package/src/hooks/useMRT_TableOptions.ts

@@ -76,6 +76,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,
+  enableCellNavigation = true,
   enableMultiRowSelection = true,
   enableMultiSort = true,
   enablePagination = true,
@@ -203,6 +204,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableGlobalFilterRankedResults,
     enableGrouping,
     enableHiding,
+    enableCellNavigation,
     enableMultiRowSelection,
     enableMultiSort,
     enablePagination,