material-react-table 1.7.1 → 1.7.3

package/dist/esm/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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.1",
+  "version": "1.7.3",
   "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,7 @@ 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-${parseCSSVarId(column.id)}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -300,18 +300,16 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'right'
       ? `${getTotalRight(table, column)}px`
       : undefined,
-  transition:
-    table.options.enableColumnVirtualization || column.getIsResizing()
-      ? 'none'
-      : `padding 150ms ease-in-out`,
+  transition: table.options.enableColumnVirtualization
+    ? 'none'
+    : `padding 150ms ease-in-out`,
   ...(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-${parseCSSVarId(column.id)}-size) * 1px), ${
+    column.columnDef.minSize ?? 30
+  }px)`,
+  width: `calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px)`,
 });
 
 export const MRT_DefaultColumn = {
@@ -335,3 +333,6 @@ export const MRT_DefaultDisplayColumn = {
   enableResizing: false,
   enableSorting: false,
 } as const;
+
+export const parseCSSVarId = (id: string) =>
+  id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');

package/src/table/MRT_Table.tsx

@@ -9,6 +9,7 @@ import Table from '@mui/material/Table';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { parseCSSVarId } from '../column.utils';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
@@ -58,7 +59,7 @@ 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-${parseCSSVarId(h.column.id)}-size`] = h.getSize();
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo]);