diff --git a/packages/mantine-react-table/README.md b/packages/mantine-react-table/README.md
index bb007936f..db62db123 100644
--- a/packages/mantine-react-table/README.md
+++ b/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 V5](https://mantine.dev/) and [TanStack Table V8](https://tanstack.com/table/v8)__
-
-
-
-
-
### _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 V5](https://mantine.dev/) and [TanStack Table V8](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.
+
## 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}) => {cell.getValue()}, //optional custom cell render
+ Cell: ({ cell }) => {cell.getValue()}, //optional custom cell render
},
{
accessorFn: (row) => row.age, //alternate way
diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
index 06abd8963..ce932f7e4 100644
--- a/packages/mantine-react-table/package.json
+++ b/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.",
diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts
index ccf0a711a..d741ca6c1 100644
--- a/packages/mantine-react-table/src/column.utils.ts
+++ b/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, '_');