material-react-table 1.7.0 → 1.7.2

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

@@ -243,7 +243,9 @@ 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}-size) 0 auto`
+            ? `var(--col-${column.id
+                .replaceAll('.', '_')
+                .replaceAll(' ', '_')}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
@@ -267,7 +269,11 @@ const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
             ? '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}-size) * 1px), ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: `calc(var(--col-${column.id}-size) * 1px)` }));
+        : 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)` }));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -2627,6 +2633,15 @@ const MRT_Table = ({ table }) => {
     const vProps = columnVirtualizerProps instanceof Function
         ? columnVirtualizerProps({ table })
         : columnVirtualizerProps;
+    const columnSizeVars = useMemo(() => {
+        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();
+        }
+        return colSizes;
+    }, [columns, columnSizing, columnSizingInfo]);
     //get first 16 column widths and average them
     const averageColumnWidth = useMemo(() => {
         var _a, _b, _c, _d;
@@ -2674,15 +2689,6 @@ const MRT_Table = ({ table }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    const columnSizeVars = useMemo(() => {
-        const headers = getFlatHeaders();
-        const colSizes = {};
-        for (let i = 0; i < headers.length; i++) {
-            const h = headers[i];
-            colSizes[`--col-${h.column.id}-size`] = h.getSize();
-        }
-        return colSizes;
-    }, [columns, columnSizing, columnSizingInfo]);
     return (React.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }),