material-react-table 1.7.1 → 1.7.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.1",
+  "version": "1.7.2",
   "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.",

package/src/column.utils.ts

@@ -263,7 +263,9 @@ export const getCommonCellStyles = ({
   display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   flex:
     table.options.layoutMode === 'grid'
-      ? `var(--col-${column.id.replaceAll('.', '_')}-size) 0 auto`
+      ? `var(--col-${column.id
+          .replaceAll('.', '_')
+          .replaceAll(' ', '_')}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -307,11 +309,12 @@ export const getCommonCellStyles = ({
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--col-${column.id.replaceAll(
-    '.',
-    '_',
-  )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-  width: `calc(var(--col-${column.id.replaceAll('.', '_')}-size) * 1px)`,
+  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)`,
 });
 
 export const MRT_DefaultColumn = {

package/src/table/MRT_Table.tsx

@@ -58,7 +58,9 @@ export const MRT_Table = ({ table }: Props) => {
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
       const h = headers[i];
-      colSizes[`--col-${h.column.id}-size`.replaceAll('.', '_')] = h.getSize();
+      colSizes[
+        `--col-${h.column.id}-size`.replaceAll('.', '_').replaceAll(' ', '_')
+      ] = h.getSize();
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo]);