material-react-table 1.7.2 → 1.7.4

package/dist/esm/types/MaterialReactTable.d.ts

@@ -243,6 +243,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnD
         header: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode);
+    PlaceholderCell?: (props: {
+        cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     /**
      * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
      * Specify a function here to point to the correct property in the data object.

package/dist/esm/types/column.utils.d.ts

@@ -4,7 +4,7 @@ import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 import type { TableCellProps } from '@mui/material/TableCell';
 import type { Theme } from '@mui/material/styles';
-import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_TableInstance } from '.';
+import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
@@ -111,8 +111,9 @@ export declare const getIsLastColumn: (column: MRT_Column, table: MRT_TableInsta
 export declare const getIsLastLeftPinnedColumn: (table: MRT_TableInstance, column: MRT_Column) => boolean;
 export declare const getIsFirstRightPinnedColumn: (column: MRT_Column) => boolean;
 export declare const getTotalRight: (table: MRT_TableInstance, column: MRT_Column) => number;
-export declare const getCommonCellStyles: ({ column, table, tableCellProps, theme, }: {
+export declare const getCommonCellStyles: ({ column, header, table, tableCellProps, theme, }: {
     column: MRT_Column;
+    header?: MRT_Header<{}> | undefined;
     table: MRT_TableInstance;
     tableCellProps: TableCellProps;
     theme: Theme;
@@ -137,3 +138,4 @@ export declare const MRT_DefaultDisplayColumn: {
     readonly enableResizing: false;
     readonly enableSorting: false;
 };
+export declare const parseCSSVarId: (id: string) => string;

package/dist/esm/types/icons.d.ts

@@ -11,7 +11,6 @@ export interface MRT_Icons {
     DragHandleIcon: any;
     DynamicFeedIcon: any;
     EditIcon: any;
-    ExpandLessIcon: any;
     ExpandMoreIcon: any;
     FilterAltIcon: any;
     FilterListIcon: any;

package/dist/index.d.ts

@@ -116,7 +116,6 @@ interface MRT_Icons {
     DragHandleIcon: any;
     DynamicFeedIcon: any;
     EditIcon: any;
-    ExpandLessIcon: any;
     ExpandMoreIcon: any;
     FilterAltIcon: any;
     FilterListIcon: any;
@@ -364,6 +363,12 @@ type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TDat
         header: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode);
+    PlaceholderCell?: (props: {
+        cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     /**
      * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
      * Specify a function here to point to the correct property in the data object.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.2",
+  "version": "1.7.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -46,7 +46,6 @@
   },
   "scripts": {
     "build": "rm -rf dist && rollup -c && size-limit",
-    "dev": "rm -rf dist && rollup -c -w",
     "lib:build": "rm -rf dist && rollup -c && size-limit",
     "lib:dev": "rm -rf dist && rollup -c -w",
     "lint": "eslint .",
@@ -58,17 +57,17 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.4",
+    "@mui/material": "^5.11.8",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@size-limit/preset-small-lib": "^8.1.0",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.26",
+    "@size-limit/preset-small-lib": "^8.1.2",
+    "@types/node": "^18.13.0",
+    "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "eslint": "^8.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "eslint": "^8.34.0",
     "eslint-plugin-mui-path-imports": "^0.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -77,9 +76,9 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^5.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^8.1.0",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4"
+    "size-limit": "^8.1.2",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -92,7 +91,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.7.6",
     "@tanstack/react-table": "8.7.9",
-    "@tanstack/react-virtual": "3.0.0-beta.30",
+    "@tanstack/react-virtual": "3.0.0-beta.47",
     "highlight-words": "1.2.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -304,6 +304,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
         header: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
       }) => ReactNode);
+  PlaceholderCell?: (props: {
+    cell: MRT_Cell<TData>;
+    column: MRT_Column<TData>;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   /**
    * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
    * Specify a function here to point to the correct property in the data object.

package/src/body/MRT_TableBodyCell.tsx

@@ -259,7 +259,9 @@ export const MRT_TableBodyCell = ({
       })}
     >
       <>
-        {cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (
+        {cell.getIsPlaceholder() ? (
+          columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
+        ) : isLoading || showSkeletons ? (
           <Skeleton
             animation="wave"
             height={20}

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -59,14 +59,16 @@ export const MRT_ExpandAllButton = ({ table }: Props) => {
           })}
           title={undefined}
         >
-          <KeyboardDoubleArrowDownIcon
-            style={{
-              transform: `rotate(${
-                isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
-              }deg)`,
-              transition: 'transform 150ms',
-            }}
-          />
+          {iconButtonProps?.children ?? (
+            <KeyboardDoubleArrowDownIcon
+              style={{
+                transform: `rotate(${
+                  isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
+                }deg)`,
+                transition: 'transform 150ms',
+              }}
+            />
+          )}
         </IconButton>
       </span>
     </Tooltip>

package/src/buttons/MRT_ExpandButton.tsx

@@ -61,14 +61,16 @@ export const MRT_ExpandButton = ({ row, table }: Props) => {
           })}
           title={undefined}
         >
-          <ExpandMoreIcon
-            style={{
-              transform: `rotate(${
-                !canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0
-              }deg)`,
-              transition: 'transform 150ms',
-            }}
-          />
+          {iconButtonProps?.children ?? (
+            <ExpandMoreIcon
+              style={{
+                transform: `rotate(${
+                  !canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0
+                }deg)`,
+                transition: 'transform 150ms',
+              }}
+            />
+          )}
         </IconButton>
       </span>
     </Tooltip>

package/src/column.utils.ts

@@ -16,6 +16,7 @@ import type {
   MRT_DefinedColumnDef,
   MRT_DisplayColumnIds,
   MRT_FilterOption,
+  MRT_Header,
   MRT_TableInstance,
 } from '.';
 
@@ -241,11 +242,13 @@ export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
 
 export const getCommonCellStyles = ({
   column,
+  header,
   table,
   tableCellProps,
   theme,
 }: {
   column: MRT_Column;
+  header?: MRT_Header;
   table: MRT_TableInstance;
   tableCellProps: TableCellProps;
   theme: Theme;
@@ -263,9 +266,7 @@ export const getCommonCellStyles = ({
   display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   flex:
     table.options.layoutMode === 'grid'
-      ? `var(--col-${column.id
-          .replaceAll('.', '_')
-          .replaceAll(' ', '_')}-size) 0 auto`
+      ? `var(--col-${parseCSSVarId(header?.id ?? column.id)}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -302,19 +303,18 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'right'
       ? `${getTotalRight(table, column)}px`
       : undefined,
-  transition:
-    table.options.enableColumnVirtualization || column.getIsResizing()
-      ? 'none'
-      : `padding 150ms ease-in-out`,
+  transition: table.options.enableColumnVirtualization
+    ? 'none'
+    : `padding 150ms ease-in-out`,
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--col-${column.id
-    .replaceAll('.', '_')
-    .replaceAll(' ', '_')}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-  width: `calc(var(--col-${column.id
-    .replaceAll('.', '_')
-    .replaceAll(' ', '_')}-size) * 1px)`,
+  minWidth: `max(calc(var(--col-${parseCSSVarId(
+    header?.id ?? column.id,
+  )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
+  width: `calc(var(--col-${parseCSSVarId(
+    header?.id ?? column.id,
+  )}-size) * 1px)`,
 });
 
 export const MRT_DefaultColumn = {
@@ -338,3 +338,6 @@ export const MRT_DefaultDisplayColumn = {
   enableResizing: false,
   enableSorting: false,
 } as const;
+
+export const parseCSSVarId = (id: string) =>
+  id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');

package/src/head/MRT_TableHeadCell.tsx

@@ -165,6 +165,7 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
             : 1,
         ...getCommonCellStyles({
           column,
+          header,
           table,
           tableCellProps,
           theme,

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -67,7 +67,7 @@ export const MRT_TableHeadCellColumnActionsButton = ({
             height: '2rem',
             m: '-8px -4px',
             opacity: 0.5,
-            transform: 'scale(0.85)',
+            transform: 'scale(0.85) translateX(-4px)',
             transition: 'opacity 150ms',
             width: '2rem',
             '&:hover': {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -14,10 +14,8 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
     options: { columnResizeMode },
     setColumnSizingInfo,
   } = table;
-  const { density, showColumnFilters } = getState();
+  const { density } = getState();
   const { column } = header;
-  const { columnDef } = column;
-  const { columnDefType } = columnDef;
 
   return (
     <Box
@@ -54,8 +52,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
         sx={{
           borderRadius: '2px',
           borderWidth: '2px',
-          height:
-            showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
+          height: '24px',
           touchAction: 'none',
           transition: column.getIsResizing()
             ? undefined

package/src/icons.ts

@@ -9,7 +9,6 @@ import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
@@ -41,7 +40,6 @@ export interface MRT_Icons {
   DragHandleIcon: any;
   DynamicFeedIcon: any;
   EditIcon: any;
-  ExpandLessIcon: any;
   ExpandMoreIcon: any;
   FilterAltIcon: any;
   FilterListIcon: any;
@@ -72,7 +70,6 @@ export const MRT_Default_Icons: MRT_Icons = {
   DragHandleIcon,
   DynamicFeedIcon,
   EditIcon,
-  ExpandLessIcon,
   ExpandMoreIcon,
   FilterAltIcon,
   FilterListIcon,

package/src/table/MRT_Table.tsx

@@ -9,6 +9,7 @@ import Table from '@mui/material/Table';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { parseCSSVarId } from '../column.utils';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
@@ -57,10 +58,10 @@ export const MRT_Table = ({ table }: Props) => {
     const headers = getFlatHeaders();
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
-      const h = headers[i];
-      colSizes[
-        `--col-${h.column.id}-size`.replaceAll('.', '_').replaceAll(' ', '_')
-      ] = h.getSize();
+      const header = headers[i];
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo]);