col css resizing var stuff

packages/mantine-react-table/README.md

@@ -27,17 +27,11 @@ Coming soon in early 2023, but you can try out the beta now.
 
 ## About
 
-### __Built with [Mantine <sup>V5</sup>](https://mantine.dev/) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
-
-<br />
-<img src="https://mantine-react-table.com/mrt_banner.png" alt="MRT" height="30"/>
-<br />
-
 ### _Quickly Create React Data Tables with Mantine_
 
-A good table library should offer you powerful features, with an easy way to customize them, or even opt out and turn them off. It should also offer a bunch of advanced features to take your tables to the next level, but without sacrificing too bundle size bloat. MRT attempts to find that happy balance.
+### __Built with [Mantine <sup>V5</sup>](https://mantine.dev/) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
 
-MRT is built on top of [TanStack Table's](https://tanstack.com/table/v8) react hooks to build upon it's high performance and flexibility.
+<img src="https://mantine-react-table.com/banner.png" alt="MRT" height="50"/>
 
 ## Learn More
 
@@ -148,7 +142,7 @@ export default function App() {
         accessorKey: 'name', //simple recommended way to define a column
         header: 'Name',
         mantineTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
-        Cell: ({ cell}) => <span>{cell.getValue()}</span>, //optional custom cell render
+        Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
       },
       {
         accessorFn: (row) => row.age, //alternate way

packages/mantine-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.3",
+  "version": "0.9.4",
   "license": "MIT",
   "name": "mantine-react-table",
   "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.",

packages/mantine-react-table/src/column.utils.ts

@@ -268,7 +268,9 @@ export const getCommonCellStyles = ({
   display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   flex:
     table.options.layoutMode === 'grid'
-      ? `var(--col-${parseCSSVarId(header?.id ?? column.id)}-size) 0 auto`
+      ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+          header?.id ?? column.id,
+        )}-size) 0 auto`
       : undefined,
   left:
     column.getIsPinned() === 'left'
@@ -311,10 +313,10 @@ export const getCommonCellStyles = ({
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--col-${parseCSSVarId(
+  minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
   )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-  width: `calc(var(--col-${parseCSSVarId(
+  width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
   )}-size) * 1px)`,
 });
@@ -353,10 +355,4 @@ export const getPrimaryColor = (
   shade?: MantineShade,
 ): string => theme.colors[theme.primaryColor][shade ?? getPrimaryShade(theme)];
 
-export const parseCSSVarId = (id: string) =>
-  id
-    .replaceAll('.', '_')
-    .replaceAll(' ', '_')
-    .replaceAll('+', '_')
-    .replaceAll('(', '_')
-    .replaceAll(')', '_');
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');