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

package/package.json

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

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,21 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTableCellElement>) => {
+    if (enableCellNavigation) {
+      cellNavigation(e);
+    }
+    tableCellProps?.onKeyDown?.(e);
+  };
+
   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,13 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTableCellElement>) => {
+    if (enableCellNavigation) {
+      cellNavigation(e);
+    }
+    tableCellProps?.onKeyDown?.(e);
+  };
+
   return (
     <TableCell
       align={
@@ -57,6 +69,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,13 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTableCellElement>) => {
+    if (enableCellNavigation) {
+      cellNavigation(e);
+    }
+    tableCellProps?.onKeyDown?.(e);
+  };
+
   const HeaderElement =
     parseFromValuesOrFunc(columnDef.Header, {
       column,
@@ -185,7 +194,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/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,

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>;
@@ -1064,6 +1099,9 @@ 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>;
@@ -1072,6 +1110,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 +1150,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>;
@@ -1241,7 +1285,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 +1315,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>;