move complex styles out of style tag into module (#145)

Author: naughton

packages/mantine-react-table/src/table/MRT_Table.module.css

@@ -0,0 +1,19 @@
+.root {
+  --first-last-color: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-gray-8)
+  );
+  & tr:first-of-type td {
+    border-top: 1px solid var(--first-last-color);
+  }
+  & tr:last-of-type td {
+    border-bottom: 1px solid var(--first-last-color);
+  }
+  display: table;
+  [data-layout='grid'] {
+    display: grid;
+  }
+  :not([data-layout='grid'])[data-column-resizing] {
+    table-layout: fixed;
+  }
+}

packages/mantine-react-table/src/table/MRT_Table.tsx

@@ -12,6 +12,8 @@ import { parseCSSVarId } from '../column.utils';
 import { type MRT_TableInstance, type MRT_Virtualizer } from '../types';
 import { funcValue, styleValue } from '../funcValue';
 
+import classes from './MRT_Table.module.css';
+
 interface Props<TData extends Record<string, any> = {}> {
   table: MRT_TableInstance<TData>;
 }
@@ -142,24 +144,14 @@ export const MRT_Table = <TData extends Record<string, any> = {}>({
 
   return (
     <Table
+      className={classes.root}
       highlightOnHover
       horizontalSpacing={density}
       verticalSpacing={density}
       {...tableProps}
+      data-layout={layoutMode}
+      {...(enableColumnResizing ? { 'data-column-resizing': true } : null)}
       style={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table',
-        tableLayout:
-          layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
-        '& tr:first-of-type td': {
-          borderTop: `1px solid ${
-            theme.colors.gray[8] // TODO: [theme.colorScheme === 'dark' ? 8 : 3]
-          }`,
-        },
-        '& tr:last-of-type td': {
-          borderBottom: `1px solid ${
-            theme.colors.gray[8] // TODO: [theme.colorScheme === 'dark' ? 8 : 3]
-          }`,
-        },
         ...columnSizeVars,
         ...styleValue(tableProps, theme),
       })}