material-react-table 1.7.0 → 1.7.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "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}-size) 0 auto`
+      ? `var(--col-${column.id
+          .replaceAll('.', '_')
+          .replaceAll(' ', '_')}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -307,10 +309,12 @@ export const getCommonCellStyles = ({
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--col-${column.id}-size) * 1px), ${
-    column.columnDef.minSize ?? 30
-  }px)`,
-  width: `calc(var(--col-${column.id}-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

@@ -53,6 +53,18 @@ export const MRT_Table = ({ table }: Props) => {
       ? columnVirtualizerProps({ table })
       : columnVirtualizerProps;
 
+  const columnSizeVars = useMemo(() => {
+    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();
+    }
+    return colSizes;
+  }, [columns, columnSizing, columnSizingInfo]);
+
   //get first 16 column widths and average them
   const averageColumnWidth = useMemo(() => {
     if (!enableColumnVirtualization) return 0;
@@ -130,16 +142,6 @@ export const MRT_Table = ({ table }: Props) => {
     virtualPaddingRight,
   };
 
-  const columnSizeVars = useMemo(() => {
-    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`] = h.getSize();
-    }
-    return colSizes;
-  }, [columns, columnSizing, columnSizingInfo]);
-
   return (
     <Table
       stickyHeader={enableStickyHeader || isFullScreen}