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)__ - -
-MRT -
- ### _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. +MRT ## 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, '_');