material-react-table 1.7.1 → 1.7.3

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

@@ -137,3 +137,4 @@ export declare const MRT_DefaultDisplayColumn: {
     readonly enableResizing: false;
     readonly enableSorting: false;
 };
+export declare const parseCSSVarId: (id: string) => string;

package/dist/esm/material-react-table.esm.js

@@ -243,7 +243,7 @@ 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('.', '_')}-size) 0 auto`
+            ? `var(--col-${parseCSSVarId(column.id)}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
@@ -263,11 +263,11 @@ const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
             ? '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('.', '_')}-size) * 1px), ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: `calc(var(--col-${column.id.replaceAll('.', '_')}-size) * 1px)` }));
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px), ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: `calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px)` }));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -289,6 +289,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, {
@@ -2632,7 +2633,7 @@ const MRT_Table = ({ table }) => {
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
             const h = headers[i];
-            colSizes[`--col-${h.column.id}-size`.replaceAll('.', '_')] = h.getSize();
+            colSizes[`--col-${parseCSSVarId(h.column.id)}-size`] = h.getSize();
         }
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo]);