material-react-table 1.7.2 → 1.7.4

package/dist/cjs/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/cjs/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/cjs/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/esm/material-react-table.esm.js

@@ -13,7 +13,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';
@@ -234,8 +233,8 @@ const getIsFirstRightPinnedColumn = (column) => {
 const getTotalRight = (table, column) => {
     return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200);
 };
-const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
@@ -243,37 +242,31 @@ const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, 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((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'left' &&
             column.getPinnedIndex() === 0
-            ? `-${column.getSize() * ((_b = (_a = table.getState().columnPinning.left) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1)}px`
+            ? `-${column.getSize() * ((_c = (_b = table.getState().columnPinning.left) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1)}px`
             : undefined, mr: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'right' &&
             column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
             ? `-${column.getSize() *
-                ((_d = (_c = table.getState().columnPinning.right) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 1) *
+                ((_e = (_d = table.getState().columnPinning.right) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 1) *
                 1.2}px`
-            : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
-            ((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
+            : undefined, opacity: ((_f = table.getState().draggingColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id ||
+            ((_g = table.getState().hoveredColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id
             ? 0.5
             : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? 'sticky'
             : undefined, right: column.getIsPinned() === 'right'
             ? `${getTotalRight(table, column)}px`
-            : undefined, transition: table.options.enableColumnVirtualization || column.getIsResizing()
+            : undefined, transition: table.options.enableColumnVirtualization
             ? 'none'
             : `padding 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
         ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${column.id
-            .replaceAll('.', '_')
-            .replaceAll(' ', '_')}-size) * 1px), ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: `calc(var(--col-${column.id
-            .replaceAll('.', '_')
-            .replaceAll(' ', '_')}-size) * 1px)` }));
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${parseCSSVarId((_h = header === null || header === void 0 ? void 0 : header.id) !== null && _h !== void 0 ? _h : column.id)}-size) * 1px), ${(_j = column.columnDef.minSize) !== null && _j !== void 0 ? _j : 30}px)`, width: `calc(var(--col-${parseCSSVarId((_k = header === null || header === void 0 ? void 0 : header.id) !== null && _k !== void 0 ? _k : column.id)}-size) * 1px)` }));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -295,6 +288,7 @@ const MRT_DefaultDisplayColumn = {
     enableResizing: false,
     enableSorting: false,
 };
+const parseCSSVarId = (id) => id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');
 
 const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
     const itemRank = rankItem(row.getValue(columnId), filterValue, {
@@ -392,7 +386,6 @@ const MRT_Default_Icons = {
     DragHandleIcon,
     DynamicFeedIcon,
     EditIcon,
-    ExpandLessIcon,
     ExpandMoreIcon,
     FilterAltIcon,
     FilterListIcon,
@@ -427,7 +420,7 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
     Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
 const MRT_ExpandAllButton = ({ table }) => {
-    var _a;
+    var _a, _b;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
     const { density, isLoading } = getState();
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
@@ -440,15 +433,14 @@ const MRT_ExpandAllButton = ({ table }) => {
         React.createElement("span", null,
             React.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React.createElement(KeyboardDoubleArrowDownIcon, { style: {
-                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React.createElement(KeyboardDoubleArrowDownIcon, { style: {
+                    transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                    transition: 'transform 150ms',
+                } }))))));
 };
 
 const MRT_ExpandButton = ({ row, table }) => {
-    var _a;
+    var _a, _b;
     const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
     const { density } = getState();
     const iconButtonProps = muiExpandButtonProps instanceof Function
@@ -468,11 +460,10 @@ const MRT_ExpandButton = ({ row, table }) => {
         React.createElement("span", null,
             React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React.createElement(ExpandMoreIcon, { style: {
-                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React.createElement(ExpandMoreIcon, { style: {
+                    transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
+                    transition: 'transform 150ms',
+                } }))))));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -1469,7 +1460,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1820,10 +1811,8 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
 const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     var _a;
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
-    const { density, showColumnFilters } = getState();
+    const { density } = getState();
     const { column } = header;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
     return (React.createElement(Box, { onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
@@ -1845,7 +1834,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
         React.createElement(Divider, { flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
-                height: showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
+                height: '24px',
                 touchAction: 'none',
                 transition: column.getIsResizing()
                     ? undefined
@@ -1963,6 +1952,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                     ? 2
                     : 1 }, getCommonCellStyles({
             column,
+            header,
             table,
             tableCellProps,
             theme,
@@ -2216,7 +2206,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
 };
 
 const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const theme = useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
@@ -2343,12 +2333,12 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             theme,
             tableCellProps,
         })), draggingBorders)) }),
-        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
                 column.id === 'mrt-row-expand' ||
-                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+                !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
             cell,
             renderedCellValue: cell.renderValue(),
             column,
@@ -2358,8 +2348,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             columnDef.enableClickToCopy !== false ? (React.createElement(MRT_CopyButton, { cell: cell, table: table },
             React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
         cell.getIsGrouped() && !columnDef.GroupedCell && (React.createElement(React.Fragment, null,
-            " (", (_b = row.subRows) === null || _b === void 0 ? void 0 :
-            _b.length,
+            " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
+            _d.length,
             ")"))));
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
@@ -2637,8 +2627,10 @@ const MRT_Table = ({ table }) => {
         const headers = getFlatHeaders();
         const colSizes = {};
         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]);