material-react-table 2.8.0 → 2.9.0

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -86,9 +86,11 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
       id: 'mrt-row-expand',
       size:
         groupedColumnMode === 'remove'
-          ? defaultColumn?.size
+          ? defaultColumn?.size ?? 180
           : renderDetailPanel
-            ? 60
+            ? enableExpandAll
+              ? 60
+              : 70
             : 100,
       tableOptions,
     }),

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -30,6 +30,7 @@ export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'rowNumbers',
       id: 'mrt-row-numbers',
+      size: 50,
       tableOptions,
     }),
   };

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -24,6 +24,7 @@ export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'pin',
       id: 'mrt-row-pin',
+      size: 60,
       tableOptions,
     }),
   };

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -28,12 +28,13 @@ export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
     ),
     Header:
       enableSelectAll && enableMultiRowSelection
-        ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
+        ? ({ table }) => <MRT_SelectCheckbox table={table} />
         : undefined,
     grow: false,
     ...defaultDisplayColumnProps({
       header: 'select',
       id: 'mrt-row-select',
+      size: enableSelectAll ? 60 : 70,
       tableOptions,
     }),
   };

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -16,7 +16,10 @@ export const useMRT_ColumnVirtualizer = <
   table: MRT_TableInstance<TData>,
 ): MRT_ColumnVirtualizer | undefined => {
   const {
+    getLeftLeafColumns,
+    getRightLeafColumns,
     getState,
+    getVisibleLeafColumns,
     options: {
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
@@ -25,7 +28,9 @@ export const useMRT_ColumnVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { columnPinning, columnVisibility, draggingColumn } = getState();
+  const { columnPinning, draggingColumn } = getState();
+
+  if (!enableColumnVirtualization) return undefined;
 
   const columnVirtualizerProps = parseFromValuesOrFunc(
     columnVirtualizerOptions,
@@ -34,91 +39,87 @@ export const useMRT_ColumnVirtualizer = <
     },
   );
 
+  const visibleColumns = getVisibleLeafColumns();
+
   const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
-      enableColumnVirtualization && enableColumnPinning
+      enableColumnPinning
         ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-              .getRightLeafColumns()
+            getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            getRightLeafColumns()
               .map(
-                (c) =>
-                  table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
+                (column) => visibleColumns.length - column.getPinnedIndex() - 1,
               )
               .sort((a, b) => a - b),
           ]
         : [[], []],
-    [columnPinning, enableColumnVirtualization, enableColumnPinning],
+    [columnPinning, enableColumnPinning],
   );
 
-  //get first 16 column widths and average them if calc is needed
-  const averageColumnWidth = useMemo(() => {
-    if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize) {
-      return 0;
-    }
-    const columnsWidths =
-      table
-        .getRowModel()
-        .rows[0]?.getCenterVisibleCells()
-        ?.slice(0, 16)
-        ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
-    return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
-  }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-
-  const draggingColumnIndex = draggingColumn?.id
-    ? table
-        .getVisibleLeafColumns()
-        .findIndex((c) => c.id === draggingColumn?.id)
-    : undefined;
-
-  const columnVirtualizer = enableColumnVirtualization
-    ? (useVirtualizer({
-        count: table.getVisibleLeafColumns().length,
-        estimateSize: () => averageColumnWidth,
-        getScrollElement: () => tableContainerRef.current,
-        horizontal: true,
-        overscan: 3,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            const newIndexes = extraIndexRangeExtractor(
-              range,
-              draggingColumnIndex,
-            );
-            return [
-              ...new Set([
-                ...leftPinnedIndexes,
-                ...newIndexes,
-                ...rightPinnedIndexes,
-              ]),
-            ];
-          },
-          [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
-        ),
-        ...columnVirtualizerProps,
-      }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>)
-    : undefined;
-
-  if (columnVirtualizer) {
-    const virtualColumns = columnVirtualizer.getVirtualItems();
-    columnVirtualizer.virtualColumns = virtualColumns;
-    if (virtualColumns.length) {
-      columnVirtualizer.virtualPaddingLeft =
-        (virtualColumns[leftPinnedIndexes.length]?.start ?? 0) -
-        (virtualColumns[leftPinnedIndexes.length - 1]?.end ?? 0);
-      columnVirtualizer.virtualPaddingRight =
-        columnVirtualizer.getTotalSize() -
-        (virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]
-          ?.end ?? 0) -
-        (rightPinnedIndexes.length
-          ? columnVirtualizer.getTotalSize() -
-            (virtualColumns[virtualColumns.length - rightPinnedIndexes.length]
-              ?.start ?? 0)
-          : 0);
-    }
-    if (columnVirtualizerInstanceRef) {
-      //@ts-ignore
-      columnVirtualizerInstanceRef.current = columnVirtualizer;
-    }
+  const numPinnedLeft = leftPinnedIndexes.length;
+  const numPinnedRight = rightPinnedIndexes.length;
+
+  const draggingColumnIndex = useMemo(
+    () =>
+      draggingColumn?.id
+        ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id)
+        : undefined,
+    [draggingColumn?.id],
+  );
+
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(),
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    overscan: 3,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
+        if (!numPinnedLeft && !numPinnedRight) {
+          return newIndexes;
+        }
+        return [
+          ...new Set([
+            ...leftPinnedIndexes,
+            ...newIndexes,
+            ...rightPinnedIndexes,
+          ]),
+        ];
+      },
+      [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
+    ),
+    ...columnVirtualizerProps,
+  }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>;
+
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  columnVirtualizer.virtualColumns = virtualColumns;
+  const numColumns = virtualColumns.length;
+
+  if (numColumns) {
+    const totalSize = columnVirtualizer.getTotalSize();
+
+    const leftNonPinnedStart = virtualColumns[numPinnedLeft]?.start || 0;
+    const leftNonPinnedEnd =
+      virtualColumns[leftPinnedIndexes.length - 1]?.end || 0;
+
+    const rightNonPinnedStart =
+      virtualColumns[numColumns - numPinnedRight]?.start || 0;
+    const rightNonPinnedEnd =
+      virtualColumns[numColumns - numPinnedRight - 1]?.end || 0;
+
+    columnVirtualizer.virtualPaddingLeft =
+      leftNonPinnedStart - leftNonPinnedEnd;
+
+    columnVirtualizer.virtualPaddingRight =
+      totalSize -
+      rightNonPinnedEnd -
+      (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
+  }
+
+  if (columnVirtualizerInstanceRef) {
+    //@ts-ignore
+    columnVirtualizerInstanceRef.current = columnVirtualizer;
   }
 
   return columnVirtualizer as any;

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -30,6 +30,8 @@ export const useMRT_RowVirtualizer = <
   } = table;
   const { density, draggingRow, expanded } = getState();
 
+  if (!enableRowVirtualization) return undefined;
+
   const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
     table,
   });
@@ -39,39 +41,35 @@ export const useMRT_RowVirtualizer = <
   const normalRowHeight =
     density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
 
-  const rowVirtualizer = enableRowVirtualization
-    ? (useVirtualizer({
-        count: renderDetailPanel ? rowCount * 2 : rowCount,
-        estimateSize: (index) =>
-          renderDetailPanel && index % 2 === 1
-            ? expanded === true
-              ? 100
-              : 0
-            : normalRowHeight,
-        getScrollElement: () => tableContainerRef.current,
-        measureElement:
-          typeof window !== 'undefined' &&
-          navigator.userAgent.indexOf('Firefox') === -1
-            ? (element) => element?.getBoundingClientRect().height
-            : undefined,
-        overscan: 4,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
-          },
-          [draggingRow],
-        ),
-        ...rowVirtualizerProps,
-      }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>)
-    : undefined;
+  const rowVirtualizer = useVirtualizer({
+    count: renderDetailPanel ? rowCount * 2 : rowCount,
+    estimateSize: (index) =>
+      renderDetailPanel && index % 2 === 1
+        ? expanded === true
+          ? 100
+          : 0
+        : normalRowHeight,
+    getScrollElement: () => tableContainerRef.current,
+    measureElement:
+      typeof window !== 'undefined' &&
+      navigator.userAgent.indexOf('Firefox') === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+    overscan: 4,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+      },
+      [draggingRow],
+    ),
+    ...rowVirtualizerProps,
+  }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>;
+
+  rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
 
-  if (rowVirtualizer) {
-    const virtualRows = rowVirtualizer.getVirtualItems();
-    rowVirtualizer.virtualRows = virtualRows;
-    if (rowVirtualizerInstanceRef) {
-      //@ts-ignore
-      rowVirtualizerInstanceRef.current = rowVirtualizer;
-    }
+  if (rowVirtualizerInstanceRef) {
+    //@ts-ignore
+    rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 
   return rowVirtualizer;

package/src/hooks/useMRT_TableOptions.ts

@@ -51,6 +51,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableColumnOrdering = false,
   enableColumnPinning = false,
   enableColumnResizing = false,
+  enableColumnVirtualization,
   enableDensityToggle = true,
   enableExpandAll = true,
   enableExpanding,
@@ -66,6 +67,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enablePagination = true,
   enableRowPinning = false,
   enableRowSelection = false,
+  enableRowVirtualization,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = false,
@@ -96,31 +98,37 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   ...rest
 }: MRT_TableOptions<TData>) => {
   const theme = useTheme();
-  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
-  const _localization = useMemo(
+
+  icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
+  localization = useMemo(
     () => ({
       ...MRT_Localization_EN,
       ...localization,
     }),
     [localization],
   );
-  const _aggregationFns = useMemo(
+  aggregationFns = useMemo(
     () => ({ ...MRT_AggregationFns, ...aggregationFns }),
     [],
   );
-  const _filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
-  const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
-  const _defaultColumn = useMemo(
+  filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
+  sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
+  defaultColumn = useMemo(
     () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
     [defaultColumn],
   );
-  const _defaultDisplayColumn = useMemo(
+  defaultDisplayColumn = useMemo(
     () => ({
       ...MRT_DefaultDisplayColumn,
       ...defaultDisplayColumn,
     }),
     [defaultDisplayColumn],
   );
+  //cannot be changed after initialization
+  [enableColumnVirtualization, enableRowVirtualization] = useMemo(
+    () => [enableColumnVirtualization, enableRowVirtualization],
+    [],
+  );
 
   if (!columnResizeDirection) {
     columnResizeDirection = theme.direction || 'ltr';
@@ -130,12 +138,12 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
   if (
     layoutMode === 'semantic' &&
-    (rest.enableRowVirtualization || rest.enableColumnVirtualization)
+    (enableRowVirtualization || enableColumnVirtualization)
   ) {
     layoutMode = 'grid';
   }
 
-  if (rest.enableRowVirtualization) {
+  if (enableRowVirtualization) {
     enableStickyHeader = true;
   }
 
@@ -151,14 +159,14 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   }
 
   return {
-    aggregationFns: _aggregationFns,
+    aggregationFns,
     autoResetExpanded,
     columnFilterDisplayMode,
     columnResizeDirection,
     columnResizeMode,
     createDisplayMode,
-    defaultColumn: _defaultColumn,
-    defaultDisplayColumn: _defaultDisplayColumn,
+    defaultColumn,
+    defaultDisplayColumn,
     editDisplayMode,
     enableBottomToolbar,
     enableColumnActions,
@@ -166,6 +174,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableColumnOrdering,
     enableColumnPinning,
     enableColumnResizing,
+    enableColumnVirtualization,
     enableDensityToggle,
     enableExpandAll,
     enableExpanding,
@@ -181,6 +190,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enablePagination,
     enableRowPinning,
     enableRowSelection,
+    enableRowVirtualization,
     enableSelectAll,
     enableSorting,
     enableStickyHeader,
@@ -188,10 +198,10 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableTableHead,
     enableToolbarInternalActions,
     enableTopToolbar,
-    filterFns: _filterFns,
-    icons: _icons,
+    filterFns,
+    icons,
     layoutMode,
-    localization: _localization,
+    localization,
     manualFiltering,
     manualGrouping,
     manualPagination,
@@ -207,7 +217,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     rowNumberDisplayMode,
     rowPinningDisplayMode,
     selectAllMode,
-    sortingFns: _sortingFns,
+    sortingFns,
     ...rest,
-  };
+  } as MRT_DefinedTableOptions<TData>;
 };

package/src/locales/ja.ts

@@ -78,10 +78,10 @@ export const MRT_Localization_JA: MRT_Localization = {
   showHideColumns: '列の表示状態',
   showHideFilters: '検索バーを表示',
   showHideSearch: '検索',
-  sortByColumnAsc: '{column}を昇順でを並べ替え',
-  sortByColumnDesc: '{column}を降順でを並べ替え',
-  sortedByColumnAsc: '{column}を昇順でを並べ替え',
-  sortedByColumnDesc: '{column}を降順でを並べ替え',
+  sortByColumnAsc: '{column}を昇順で並べ替え',
+  sortByColumnDesc: '{column}を降順で並べ替え',
+  sortedByColumnAsc: '{column}を昇順で並べ替え',
+  sortedByColumnDesc: '{column}を降順で並べ替え',
   thenBy: 'さらに',
   toggleDensity: 'テーブルの高さを変更',
   toggleFullScreen: 'フルスクリーン切り替え',

package/src/types.ts

@@ -1164,6 +1164,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   renderBottomToolbarCustomActions?: (props: {
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
+  renderCaption?:
+    | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
+    | ReactNode;
   renderColumnActionsMenuItems?: (props: {
     closeMenu: () => void;
     column: MRT_Column<TData>;

package/src/utils/displayColumn.utils.ts

@@ -10,12 +10,12 @@ import { getAllLeafColumnDefs, getColumnId } from './column.utils';
 export function defaultDisplayColumnProps<TData extends MRT_RowData>({
   header,
   id,
-  size = 60,
+  size,
   tableOptions,
 }: {
   header?: keyof MRT_Localization;
   id: MRT_DisplayColumnIds;
-  size?: number;
+  size: number;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }) {
   const { defaultDisplayColumn, displayColumnDefOptions, localization } =

package/src/utils/row.utils.ts

@@ -1,4 +1,25 @@
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const getIsRowSelected = <TData extends MRT_RowData>({
+  row,
+  table,
+}: {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const { options: enableRowSelection } = table;
+  return (
+    row.getIsSelected() ||
+    (parseFromValuesOrFunc(enableRowSelection, row) &&
+      row.getCanSelectSubRows() &&
+      row.getIsAllSubRowsSelected())
+  );
+};
 
 export const getCanRankRows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,

package/src/utils/style.utils.ts

@@ -42,6 +42,49 @@ export const getMRTTheme = <TData extends MRT_RowData>(
   };
 };
 
+export const pinnedBeforeAfterStyles = {
+  content: '""',
+  height: '100%',
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  width: '100%',
+  zIndex: -1,
+};
+
+export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
+  column,
+  table,
+  theme,
+}: {
+  column?: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => {
+  const { baseBackgroundColor } = getMRTTheme(table, theme);
+  return {
+    '&[data-pinned="true"]': {
+      '&:before': {
+        backgroundColor: alpha(
+          darken(
+            baseBackgroundColor,
+            theme.palette.mode === 'dark' ? 0.05 : 0.01,
+          ),
+          0.97,
+        ),
+        boxShadow: column
+          ? getIsLastLeftPinnedColumn(table, column)
+            ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+            : getIsFirstRightPinnedColumn(column)
+              ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+              : undefined
+          : undefined,
+        ...pinnedBeforeAfterStyles,
+      },
+    },
+  };
+};
+
 export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   column,
   header,
@@ -56,17 +99,20 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   theme: Theme;
 }) => {
   const {
-    options: { layoutMode },
+    options: { enableColumnVirtualization, layoutMode },
   } = table;
   const { columnDef } = column;
 
+  const isColumnPinned =
+    columnDef.columnDefType !== 'group' && column.getIsPinned();
+
   const widthStyles: CSSProperties = {
     minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
     )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
     width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
-    )}-size) * 1px${header && layoutMode === 'grid-no-grow' ? ` + ${header?.subHeaders?.length ?? 0}rem` : ''})`,
+    )}-size) * 1px)`,
   };
 
   if (layoutMode === 'grid') {
@@ -81,44 +127,38 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
   }
 
+  const pinnedStyles = isColumnPinned
+    ? {
+        ...getCommonPinnedCellStyles({ column, table, theme }),
+        left:
+          isColumnPinned === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        opacity: 0.97,
+        position: 'sticky',
+        right:
+          isColumnPinned === 'right'
+            ? `${getTotalRight(table, column)}px`
+            : undefined,
+        zIndex: 1,
+      }
+    : {};
+
   return {
-    backgroundColor:
-      column.getIsPinned() && columnDef.columnDefType !== 'group'
-        ? alpha(
-            darken(
-              getMRTTheme(table, theme).baseBackgroundColor,
-              theme.palette.mode === 'dark' ? 0.05 : 0.01,
-            ),
-            0.97,
-          )
-        : 'inherit',
+    backgroundColor: 'inherit',
     backgroundImage: 'inherit',
-    boxShadow: getIsLastLeftPinnedColumn(table, column)
-      ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-      : getIsFirstRightPinnedColumn(column)
-        ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-        : undefined,
     display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-    left:
-      column.getIsPinned() === 'left'
-        ? `${column.getStart('left')}px`
-        : undefined,
     opacity:
       table.getState().draggingColumn?.id === column.id ||
       table.getState().hoveredColumn?.id === column.id
         ? 0.5
         : 1,
-    position:
-      column.getIsPinned() && columnDef.columnDefType !== 'group'
-        ? 'sticky'
-        : undefined,
-    right:
-      column.getIsPinned() === 'right'
-        ? `${getTotalRight(table, column)}px`
-        : undefined,
-    transition: table.options.enableColumnVirtualization
+    position: 'relative',
+    transition: enableColumnVirtualization
       ? 'none'
       : `padding 150ms ease-in-out`,
+    zIndex: 0,
+    ...pinnedStyles,
     ...widthStyles,
     ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
   };