material-react-table 0.7.4 → 0.8.0-alpha.1

package/dist/menus/{MRT_FilterTypeMenu.d.ts → MRT_FilterOptionMenu.d.ts}

@@ -7,5 +7,5 @@ interface Props {
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     tableInstance: MRT_TableInstance;
 }
-export declare const MRT_FilterTypeMenu: FC<Props>;
+export declare const MRT_FilterOptionMenu: FC<Props>;
 export {};

package/dist/table/MRT_Table.d.ts

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    pinned: 'left' | 'center' | 'right' | 'none';
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_Table: FC<Props>;

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -8,6 +8,7 @@ export declare const commonToolbarStyles: ({ theme }: {
     backgroundImage: string;
     display: string;
     p: string;
+    transition: string;
     width: string;
     zIndex: number;
 };

package/dist/utils.d.ts

@@ -1,12 +1,12 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterType } from '.';
+import { MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
-export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
-    [key: string]: MRT_FilterType;
+export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
+    [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
-    [key: string]: MRT_FilterType;
+export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
+    [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterFn" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.4",
+  "version": "0.8.0-alpha.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -55,39 +55,39 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.9",
+    "@babel/core": "^7.18.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.1",
-    "@faker-js/faker": "^6.2.0",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.2",
+    "@faker-js/faker": "^7.1.0",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/material": "^5.8.1",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-a11y": "^6.5.5",
+    "@storybook/addon-actions": "^6.5.5",
     "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-essentials": "^6.5.5",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@types/react": "^17.0.41",
-    "@types/react-dom": "^17.0.14",
+    "@storybook/addon-links": "^6.5.5",
+    "@storybook/addon-storysource": "^6.5.5",
+    "@storybook/addons": "^6.5.5",
+    "@storybook/react": "^6.5.5",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.14.0",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "husky": "^7.0.4",
+    "eslint": "^8.16.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "husky": "^8.0.1",
     "prettier": "^2.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-is": "^18.1.0",
     "size-limit": "^7.0.8",
     "storybook-addon-paddings": "^4.3.0",
-    "storybook-dark-mode": "^1.0.9",
+    "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.3"
+    "typescript": "^4.7.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.45",
-    "match-sorter": "^6.3.1"
+    "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
+    "@tanstack/react-table": "^8.0.0-alpha.87"
   }
 }

package/src/MaterialReactTable.tsx

@@ -30,34 +30,37 @@ import {
   Cell,
   Column,
   ColumnDef,
-  DefaultGenerics,
-  FilterType,
+  FilterFn,
+  FilterFnOption,
   Header,
   HeaderGroup,
-  Options,
   Overwrite,
   PaginationState,
+  ReactTableGenerics,
   Row,
+  TableGenerics,
   TableInstance,
   TableState,
+  UseTableInstanceOptions,
   VisibilityState,
 } from '@tanstack/react-table';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
-import { MRT_FILTER_TYPE } from './enums';
+import { MRT_FILTER_OPTION } from './enums';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
   Omit<
-    Options<D>,
-    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
+    UseTableInstanceOptions<ReactTableGenerics>,
+    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn' | 'filterFns'
   >
 > & {
   columns: MRT_ColumnDef<D>[];
   data: D[];
+  expandRowsFn?: (dataRow: D) => D[];
+  filterFns?: MRT_FILTER_OPTION | FilterFn<D> | string | number | symbol;
   initialState?: Partial<MRT_TableState<D>>;
   state?: Partial<MRT_TableState<D>>;
-  expandRowsFn?: (dataRow: D) => D[];
 };
 
 export interface MRT_RowModel<D extends Record<string, any> = {}> {
@@ -69,7 +72,7 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
 export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   TableInstance<
     Overwrite<
-      Partial<DefaultGenerics>,
+      Partial<TableGenerics>,
       {
         Row: D;
       }
@@ -96,17 +99,16 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   options: MaterialReactTableProps<D> & {
     icons: MRT_Icons;
     idPrefix: string;
-    filterTypes: { [key in MRT_FILTER_TYPE]: any };
     localization: MRT_Localization;
   };
-  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell<D> | null>>;
-  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
-  setCurrentFilterTypes: Dispatch<
+  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
+  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
+  setCurrentFilterFns: Dispatch<
     SetStateAction<{
-      [key: string]: MRT_FilterType;
+      [key: string]: MRT_FilterFn;
     }>
   >;
-  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
+  setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn<D>>>;
   setIsDensePadding: Dispatch<SetStateAction<boolean>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
@@ -119,34 +121,33 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
 > & {
   currentEditingCell: MRT_Cell<D> | null;
   currentEditingRow: MRT_Row<D> | null;
-  currentFilterTypes: Record<string, string | Function>;
-  currentGlobalFilterType: Record<string, string | Function>;
+  currentFilterFns: Record<string, string | Function>;
+  currentGlobalFilterFn: Record<string, string | Function>;
   isDensePadding: boolean;
+  isLoading: boolean;
   isFullScreen: boolean;
+  pagination: Partial<PaginationState>;
   showFilters: boolean;
   showGlobalFilter: boolean;
-  pagination: Partial<PaginationState>;
+  showProgressBars: boolean;
+  showSkeletons: boolean;
 };
 
 export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
-  'header' | 'footer' | 'columns'
+  'header' | 'footer' | 'columns' | 'filterFn'
 > & {
   Edit?: ({
     cell,
     tableInstance,
-  }: // onChange,
-  {
+  }: {
     cell: MRT_Cell<D>;
     tableInstance: MRT_TableInstance<D>;
-    // onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   }) => ReactNode;
   Filter?: ({
-    // onChange,
     header,
     tableInstance,
   }: {
-    // onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     header: MRT_Header<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
@@ -176,8 +177,8 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
   enableEditing?: boolean;
-  enabledColumnFilterTypes?: (MRT_FILTER_TYPE | string)[];
-  filter?: MRT_FilterType | string | FilterType<D>;
+  enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
+  filterFn?: MRT_FilterFn;
   filterSelectOptions?: (string | { text: string; value: string })[];
   footer?: string;
   header: string;
@@ -297,18 +298,9 @@ export type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<
 
 export type MRT_Row<D extends Record<string, any> = {}> = Omit<
   Row<D>,
-  | 'getVisibleCells'
-  | 'getAllCells'
-  | 'subRows'
-  | 'original'
-  | 'getLeftVisibleCells'
-  | 'getRightVisibleCells'
-  | 'getCenterVisibleCells'
+  'getVisibleCells' | 'getAllCells' | 'subRows' | 'original'
 > & {
   getAllCells: () => MRT_Cell<D>[];
-  getCenterVisibleCells: () => MRT_Cell<D>[];
-  getLeftVisibleCells: () => MRT_Cell<D>[];
-  getRightVisibleCells: () => MRT_Cell<D>[];
   getVisibleCells: () => MRT_Cell<D>[];
   subRows?: MRT_Row<D>[];
   original: D;
@@ -322,7 +314,13 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
   row: MRT_Row<D>;
 };
 
-export type MRT_FilterType = MRT_FILTER_TYPE | Function;
+export type MRT_FilterFn<D extends Record<string, any> = {}> =
+  | FilterFn<TableGenerics>
+  | FilterFnOption<D>
+  | MRT_FILTER_OPTION
+  | number
+  | string
+  | symbol;
 
 export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
@@ -344,12 +342,10 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
     enableToolbarTop?: boolean;
-    enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
-    filterTypes?: { [key in MRT_FILTER_TYPE]: any };
+    enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
+    enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isLoading?: boolean;
-    isReloading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
       | LinearProgressProps
@@ -770,6 +766,7 @@ export default <D extends Record<string, any> = {}>({
   enableHiding = true,
   enableMultiRowSelection = true,
   enablePagination = true,
+  enablePinning = false,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = true,
@@ -792,8 +789,8 @@ export default <D extends Record<string, any> = {}>({
     columnResizeMode={columnResizeMode}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
-    enableColumnResizing={enableColumnResizing}
     enableColumnFilters={enableColumnFilters}
+    enableColumnResizing={enableColumnResizing}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
     enableFilters={enableFilters}
@@ -802,6 +799,7 @@ export default <D extends Record<string, any> = {}>({
     enableHiding={enableHiding}
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
+    enablePinning={enablePinning}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}
     enableStickyHeader={enableStickyHeader}

package/src/body/MRT_TableBody.tsx

@@ -4,15 +4,13 @@ import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  pinned: 'left' | 'center' | 'right' | 'none';
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBody: FC<Props> = ({ pinned, tableInstance }) => {
+export const MRT_TableBody: FC<Props> = ({ tableInstance }) => {
   const {
     getPaginationRowModel,
     getPrePaginationRowModel,
-    getTableBodyProps,
     options: { enablePagination, muiTableBodyProps },
   } = tableInstance;
 
@@ -20,22 +18,16 @@ export const MRT_TableBody: FC<Props> = ({ pinned, tableInstance }) => {
     ? getPaginationRowModel().rows
     : getPrePaginationRowModel().rows;
 
-  const mTableBodyProps =
+  const tableBodyProps =
     muiTableBodyProps instanceof Function
       ? muiTableBodyProps({ tableInstance })
       : muiTableBodyProps;
 
-  const tableBodyProps = {
-    ...getTableBodyProps(),
-    ...mTableBodyProps,
-  };
-
   return (
     <TableBody {...tableBodyProps}>
       {rows.map((row) => (
         <MRT_TableBodyRow
-          key={row.getRowProps().key}
-          pinned={pinned}
+          key={row.id}
           row={row}
           tableInstance={tableInstance}
         />

package/src/body/MRT_TableBodyCell.tsx

@@ -1,25 +1,27 @@
 import React, { FC, MouseEvent, useMemo } from 'react';
-import { Skeleton, TableCell } from '@mui/material';
+import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 
 interface Props {
   cell: MRT_Cell;
+  enableHover?: boolean;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
+export const MRT_TableBodyCell: FC<Props> = ({
+  cell,
+  enableHover,
+  tableInstance,
+}) => {
   const {
-    getIsSomeColumnsPinned,
     getState,
     options: {
       editingMode,
       enableClickToCopy,
       enableEditing,
-      enablePinning,
       idPrefix,
-      isLoading,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
@@ -27,7 +29,13 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     setCurrentEditingCell,
   } = tableInstance;
 
-  const { currentEditingCell, currentEditingRow, isDensePadding } = getState();
+  const {
+    currentEditingCell,
+    currentEditingRow,
+    isDensePadding,
+    isLoading,
+    showSkeletons,
+  } = getState();
 
   const { column, row } = cell;
 
@@ -42,7 +50,6 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
       : column.muiTableBodyCellProps;
 
   const tableCellProps = {
-    ...cell.getCellProps(),
     ...mTableCellBodyProps,
     ...mcTableCellBodyProps,
   };
@@ -50,10 +57,10 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
   const skeletonWidth = useMemo(
     () =>
       column.columnDefType === 'display'
-        ? column.getWidth() / 2
-        : Math.random() * (column.getWidth() - column.getWidth() / 3) +
-          column.getWidth() / 3,
-    [column.columnDefType, column.getWidth()],
+        ? column.getSize() / 2
+        : Math.random() * (column.getSize() - column.getSize() / 3) +
+          column.getSize() / 3,
+    [column.columnDefType, column.getSize()],
   );
 
   const isEditable =
@@ -84,6 +91,26 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     }
   };
 
+  const getIsLastLeftPinnedColumn = () => {
+    return (
+      column.getIsPinned() === 'left' &&
+      tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+    );
+  };
+
+  const getIsFirstRightPinnedColumn = () => {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+  };
+
+  const getTotalRight = () => {
+    return (
+      (tableInstance.getRightLeafHeaders().length -
+        1 -
+        column.getPinnedIndex()) *
+      150
+    );
+  };
+
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
@@ -91,10 +118,22 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
-      sx={{
+      sx={(theme) => ({
+        backgroundColor: column.getIsPinned()
+          ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+          : undefined,
+        boxShadow: getIsLastLeftPinnedColumn()
+          ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          : getIsFirstRightPinnedColumn()
+          ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
-        maxWidth: `min(${column.getWidth()}px, fit-content)`,
-        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
+        left:
+          column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max${column.getSize()}px, ${column.minSize}px`,
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -106,46 +145,58 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id === 'mrt-expand'
             ? `${row.depth + (isDensePadding ? 0.5 : 0.75)}rem`
             : undefined,
+        position: column.getIsPinned() ? 'sticky' : 'relative',
+        right:
+          column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: 'all 0.2s ease-in-out',
-        whiteSpace:
-          isDensePadding || (enablePinning && getIsSomeColumnsPinned())
-            ? 'nowrap'
-            : 'normal',
-        width: column.getWidth(),
-        //@ts-ignore
-        ...tableCellProps?.sx,
-      }}
+        whiteSpace: isDensePadding ? 'nowrap' : 'normal',
+        width: column.getSize(),
+        zIndex: column.getIsPinned() ? 1 : undefined,
+        '&:hover': {
+          backgroundColor: enableHover
+            ? theme.palette.mode === 'dark'
+              ? `${lighten(theme.palette.background.default, 0.13)} !important`
+              : `${darken(theme.palette.background.default, 0.07)} !important`
+            : undefined,
+        },
+        ...(tableCellProps?.sx as any),
+      })}
     >
-      {isLoading ? (
-        <Skeleton
-          animation="wave"
-          height={20}
-          width={skeletonWidth}
-          {...muiTableBodyCellSkeletonProps}
-        />
-      ) : column.columnDefType === 'display' ? (
-        column.Cell?.({ cell, tableInstance })
-      ) : cell.getIsPlaceholder() ||
-        (row.getIsGrouped() &&
-          column.id !==
-            row.groupingColumnId) ? null : cell.getIsAggregated() ? (
-        cell.renderAggregatedCell()
-      ) : isEditing ? (
-        <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
-      ) : (enableClickToCopy || column.enableClickToCopy) &&
-        column.enableClickToCopy !== false ? (
-        <>
-          <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
+      <>
+        {isLoading || showSkeletons ? (
+          <Skeleton
+            animation="wave"
+            height={20}
+            width={skeletonWidth}
+            {...muiTableBodyCellSkeletonProps}
+          />
+        ) : column.columnDefType === 'display' ? (
+          column.Cell?.({ cell, tableInstance })
+        ) : cell.getIsPlaceholder() ||
+          (row.getIsGrouped() &&
+            column.id !==
+              row.groupingColumnId) ? null : cell.getIsAggregated() ? (
+          cell.renderAggregatedCell()
+        ) : isEditing ? (
+          <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
+        ) : (enableClickToCopy || column.enableClickToCopy) &&
+          column.enableClickToCopy !== false ? (
+          <>
+            <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
+              <>
+                {cell.column?.Cell?.({ cell, tableInstance }) ??
+                  cell.renderCell()}
+              </>
+            </MRT_CopyButton>
+            {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+          </>
+        ) : (
+          <>
             {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
-          </MRT_CopyButton>
-          {row.getIsGrouped() && <> ({row.subRows?.length})</>}
-        </>
-      ) : (
-        <>
-          {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
-          {row.getIsGrouped() && <> ({row.subRows?.length})</>}
-        </>
-      )}
+            {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+          </>
+        )}
+      </>
     </TableCell>
   );
 };