KevinVandy · KevinVandy · Sep 28, 2023 · Sep 28, 2023
diff --git a/apps/mantine-react-table-docs/pages/docs/guides/customize-components.mdx b/apps/mantine-react-table-docs/pages/docs/guides/customize-components.mdx
@@ -293,43 +293,24 @@ Mantine's Table component has a `striped` prop that you can use to stripe the ro
 
 But if you want to stripe the rows yourself, you can do something like this:
 
-```jsx
-<MantineReactTable
-  columns={columns}
-  data={data}
-  mantineTableBodyProps={{
-    style: {
-      //stripe the rows, make odd rows a darker color
-      '& tr:nth-of-type(odd)': {
-        backgroundColor: '#f5f5f5',
-      },
-    },
-  }}
-/>
+```CSS
+.striped {
+  & tr:nth-of-type(odd) {
+    background-color: '#f5f5f5';
+  }
+}
 ```
 
-#### Stripe Columns Example
-
-Similarly, if you want to stripe the columns, you can do something like this:
+```jsx
+import classes from './styles.module.css';
+```
 
 ```jsx
 <MantineReactTable
   columns={columns}
   data={data}
   mantineTableBodyProps={{
-    style: {
-      //stripe the rows, make odd rows a darker color
-      '& td:nth-of-type(odd)': {
-        backgroundColor: '#f5f5f5',
-      },
-    },
-  }}
-  mantineTableBodyCellProps={{
-    style: {
-      borderRight: '2px solid #e0e0e0', //add a border between columns
-    },
+    className: classes.striped,
   }}
 />
 ```
-
-<CustomizeStylesExample />
diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
@@ -63,9 +63,9 @@
     "@babel/core": "^7.23.0",
     "@babel/preset-react": "^7.22.15",
     "@faker-js/faker": "^8.1.0",
-    "@mantine/core": "^7.0.2",
-    "@mantine/dates": "^7.0.2",
-    "@mantine/hooks": "^7.0.2",
+    "@mantine/core": "^7.1.0",
+    "@mantine/dates": "^7.1.0",
+    "@mantine/hooks": "^7.1.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.4",
@@ -95,7 +95,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^3.29.3",
+    "rollup": "^3.29.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",

diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -182,7 +182,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
     }
   };
 
-  const { style, className, __vars } = getCommonCellStyles({
+  const { style, className } = getCommonCellStyles({
     column,
     // isStriped,  TODO: why were these here?
     // row,
@@ -206,7 +206,6 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
       }}
       {...tableCellProps}
       __vars={{
-        ...__vars,
         '--align-items': layoutMode === 'grid' ? 'center' : undefined,
         '--cursor':
           isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',

diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts
@@ -11,7 +11,6 @@ import { type MRT_SortingFns } from './sortingFns';
 import {
   type BoxProps,
   type CssVariable,
-  type CssVariables,
   type MantineStyleProp,
   type MantineTheme,
 } from '@mantine/core';
@@ -29,9 +28,10 @@ import {
   type MRT_TableInstance,
   type MRT_TableOptions,
 } from './types';
-import classes from './columns.utils.module.css';
 import { funcValue } from './funcValue';
 
+import classes from './columns.utils.module.css';
+
 export const getColumnId = <TData extends Record<string, any> = {}>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
@@ -302,18 +302,17 @@ export const getCommonCellStyles = <TData extends Record<string, any> = {}>({
   table: MRT_TableInstance<TData>;
   tableCellProps: BoxProps;
   theme: MantineTheme;
-}): { __vars: CssVariables; className: string; style: MantineStyleProp } => {
+}): { className: string; style: MantineStyleProp } => {
   const __vars: Record<CssVariable, string | undefined> = {};
-  const headerId = `--${header ? 'header' : 'col'}-${parseCSSVarId(
+  __vars['--header-id'] = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
-  )}-size`;
+  )}-size)`;
   const widthStyles = {
     minWidth: `max(calc(var(--header-id) * 1px), ${
       column.columnDef.minSize ?? 30
     }px)`,
     width: `calc(var(--header-id) * 1px)`,
   };
-  __vars['--header-id'] = headerId;
   __vars['--col-size'] = `${column.columnDef.minSize ?? 30}px`;
   __vars['--box-shadow'] = getIsLastLeftPinnedColumn(table, column)
     ? '-4px 0 8px -6px rgba(var(--mantine-color-black, 0.2)) inset'
@@ -357,14 +356,15 @@ export const getCommonCellStyles = <TData extends Record<string, any> = {}>({
     ? 'none'
     : `padding 100ms ease-in-out`;
 
+  const style = {
+    ...__vars,
+    ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
+    ...funcValue(tableCellProps?.style, theme),
+    ...(table.options.enableColumnResizing && widthStyles), //do not let devs pass in width styles if column resizing is enabled
+  };
   return {
-    className: classes.MRT_ColumnCommonStyles,
-    style: {
-      ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-      ...funcValue(tableCellProps?.style, theme),
-      ...(table.options.enableColumnResizing && widthStyles), //do not let devs pass in width styles if column resizing is enabled
-    },
-    __vars,
+    className: classes.MRT_Column_Common,
+    style,
   };
 };
 

diff --git a/packages/mantine-react-table/src/columns.utils.module.css b/packages/mantine-react-table/src/columns.utils.module.css
@@ -1,39 +1,50 @@
-.MRT_Column-common-styles {
+.MRT_Column_Common {
   --min-width: max(calc(var(--header-id) * 1px), var(--col-size));
   --width: calc(var(--header-id) * 1px);
-  --bg-color: color-mix(in srgb, var(--mantine-color-dark-7) .2%, var(--mantine-color-black));
+  --bg-color: color-mix(
+    in srgb,
+    var(--mantine-color-dark-7) 0.2%,
+    var(--mantine-color-black)
+  );
   background-color: inherit;
   /* Not very sure about these attribute gymnastics... */
-  [data-selected="true"] {
-      background-color: rgba(var(--mantine-primary-color-filled), 0.1);
+  [data-selected='true'] {
+    background-color: rgba(var(--mantine-primary-color-filled), 0.1);
   }
-  :is([data-ispinned="left"], [data-ispinned="right"])[data-selected="false"][data-columndef="group"] {
-      @mixin light {
-        background-color: rgba(var(--mantine-color-white), 0.97);
-      }
-      @mixin dark {
-        --bg-color: color-mix(in srgb, var(--mantine-color-dark-7) .2%, var(--mantine-color-black));
-        background-color: rgba(var(--bg-color) ,0.97);
-      }
+  :is(
+      [data-ispinned='left'],
+      [data-ispinned='right']
+    )[data-selected='false'][data-columndef='group'] {
+    @mixin light {
+      background-color: rgba(var(--mantine-color-white), 0.97);
+    }
+    @mixin dark {
+      --bg-color: color-mix(
+        in srgb,
+        var(--mantine-color-dark-7) 0.2%,
+        var(--mantine-color-black)
+      );
+      background-color: rgba(var(--bg-color), 0.97);
+    }
   }
-  [data-striped="true"][data-selected="false"][data-ispinned="false"] {
+  [data-striped='true'][data-selected='false'][data-ispinned='false'] {
     background-color: inherit;
   }
-  [data-striped="true"][data-selected="false"][data-ispinned="false"] {
+  [data-striped='true'][data-selected='false'][data-ispinned='false'] {
     @mixin light {
       background-color: var(--mantine-color-white);
     }
     @mixin dark {
-      background-color: rgba(var(--bg-color) ,0.97);
+      background-color: rgba(var(--bg-color), 0.97);
     }
   }
-  [data-ispinned="left"] {
+  [data-ispinned='left'] {
     left: var(--left);
   }
-  :is([data-ispinned="left"], [data-ispinned="right"])[data-columndef="group"] {
+  :is([data-ispinned='left'], [data-ispinned='right'])[data-columndef='group'] {
     position: sticky;
   }
-  [data-ispinned="right"]{
+  [data-ispinned='right'] {
     right: var(--right);
   }
   margin-left: var(--ml);

diff --git a/packages/mantine-react-table/src/dataVariable.ts b/packages/mantine-react-table/src/dataVariable.ts
@@ -0,0 +1,16 @@
+export function dataVariable(
+  name: string,
+  value: boolean | number | string | undefined,
+) {
+  const key = `data-${name}`;
+  switch (typeof value) {
+    case 'boolean':
+      return { [key]: '' };
+    case 'number':
+      return { [key]: `${value}` };
+    case 'string':
+      return { [key]: value };
+    default:
+      return null;
+  }
+}
diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx
@@ -29,11 +29,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any> = {}>({
     ...funcValue(columnDef.mantineTableFooterCellProps, arg),
   };
 
-  const {
-    className: commonClassName,
-    __vars,
-    style,
-  } = getCommonCellStyles({
+  const { className: commonClassName, style } = getCommonCellStyles({
     column,
     table,
     theme,
@@ -59,7 +55,6 @@ export const MRT_TableFooterCell = <TData extends Record<string, any> = {}>({
       {...tableCellProps}
       className={clsx(commonClassName, classes.MRT_TableFooterCell, className)}
       __vars={{
-        ...__vars,
         '--z-index':
           column.getIsPinned() && columnDefType !== 'group' ? '2' : '1',
         '--display': layoutMode === 'grid' ? 'grid' : 'table-cell',

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx
@@ -106,7 +106,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
       table,
     }) ?? (columnDef.header as ReactNode);
 
-  const { className, __vars, style } = getCommonCellStyles({
+  const { className, style } = getCommonCellStyles({
     column,
     header,
     table,
@@ -136,7 +136,6 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
         tableCellProps.className,
       )}
       __vars={{
-        ...__vars,
         '--flex-direction': layoutMode === 'grid' ? 'column' : undefined,
         '--padding':
           density === 'xl' ? '23px' : density === 'md' ? '16px' : '10px',

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellSortLabel.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCellSortLabel.tsx
@@ -2,6 +2,7 @@ import { Indicator, Tooltip } from '@mantine/core';
 
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 import { MRT_ActionIcon } from '../buttons/MRT_ActionIcon';
+import { dataVariable } from '../dataVariable';
 
 import classes from './MRT_TableHeadCellSortLabel.module.css';
 
@@ -57,7 +58,7 @@ export const MRT_TableHeadCellSortLabel = <
         <MRT_ActionIcon
           className={classes.MRT_TableHeadCellSortLabel}
           aria-label={sortTooltip}
-          {...(sorted ? { 'data-sorted': true } : null)}
+          {...dataVariable('sorted', sorted)}
         >
           {icon}
         </MRT_ActionIcon>

diff --git a/packages/mantine-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx b/packages/mantine-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx
@@ -18,6 +18,7 @@ import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { getPrimaryColor, reorderColumn } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
+import { dataVariable } from '../dataVariable';
 
 import classes from './MRT_ShowHideColumnsMenuItems.module.css';
 
@@ -104,10 +105,11 @@ export const MRT_ShowHideColumnsMenuItems = <
         }}
         onDragEnter={handleDragEnter}
         className={classes.root}
-        data-dragging={isDragging || undefined}
-        data-hovered={
-          (!isDragging && hoveredColumn?.id === column.id) || undefined
-        }
+        {...dataVariable('dragging', isDragging)}
+        {...dataVariable(
+          'hovered',
+          !isDragging && hoveredColumn?.id === column.id,
+        )}
       >
         <Box className={classes.menu}>
           {!isSubMenu &&

diff --git a/packages/mantine-react-table/src/table/MRT_Table.tsx b/packages/mantine-react-table/src/table/MRT_Table.tsx
@@ -11,6 +11,7 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { parseCSSVarId } from '../column.utils';
 import { type MRT_TableInstance, type MRT_Virtualizer } from '../types';
 import { funcValue, styleValue } from '../funcValue';
+import { dataVariable } from '../dataVariable';
 
 import classes from './MRT_Table.module.css';
 
@@ -149,8 +150,8 @@ export const MRT_Table = <TData extends Record<string, any> = {}>({
       horizontalSpacing={density}
       verticalSpacing={density}
       {...tableProps}
-      data-layout={layoutMode}
-      {...(enableColumnResizing ? { 'data-column-resizing': true } : null)}
+      {...dataVariable('layout', layoutMode)}
+      {...dataVariable('column-resizing', enableColumnResizing)}
       style={(theme) => ({
         ...columnSizeVars,
         ...styleValue(tableProps, theme),

diff --git a/packages/mantine-react-table/stories/styling/TableBodyRowStyles.module.css b/packages/mantine-react-table/stories/styling/TableBodyRowStyles.module.css
@@ -0,0 +1,16 @@
+.striped {
+  & tr:nth-of-type(odd) {
+    color: black;
+    background-color: limegreen;
+  }
+  & tr td {
+    border-right: 2px solid #e0e0e0;
+  }
+}
+
+.stripeddetails {
+  & tr:nth-child(4n + 3) {
+    color: black;
+    background-color: limegreen;
+  }
+}
diff --git a/packages/mantine-react-table/stories/styling/TableBodyRowStyles.stories.tsx b/packages/mantine-react-table/stories/styling/TableBodyRowStyles.stories.tsx
@@ -2,6 +2,8 @@ import { type Meta } from '@storybook/react';
 import { MantineReactTable, type MRT_ColumnDef } from '../../src';
 import { faker } from '@faker-js/faker';
 
+import classes from './TableBodyRowStyles.module.css';
+
 const meta: Meta = {
   title: 'Styling/Style Table Body Rows',
 };
@@ -65,13 +67,8 @@ export const StyleCustomStripedRows = () => (
     columns={columns}
     data={data}
     mantineTableBodyProps={{
-      style: () => ({
-        '& tr:nth-of-type(odd)': {
-          backgroundColor: 'limegreen',
-        },
-      }),
+      className: classes.striped,
     }}
-    mantineTableBodyCellProps={{ style: { border: 'none' } }}
   />
 );
 
@@ -80,11 +77,7 @@ export const StyleCustomStripedRowsDetailPanel = () => (
     columns={columns}
     data={data}
     mantineTableBodyProps={{
-      style: () => ({
-        '& tr:nth-child(4n+3)': {
-          backgroundColor: 'limegreen',
-        },
-      }),
+      className: classes.stripeddetails,
     }}
     mantineTableBodyCellProps={{ style: { border: 'none' } }}
     renderDetailPanel={() => <div>Detail Panel</div>}