Footer components

packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css

@@ -2,6 +2,7 @@
   box-sizing: border-box;
   width: 100%;
   transition: all 100ms ease-in-out;
+
   &--layout-grid {
     display: flex;
   }
@@ -17,16 +18,20 @@
   }
 
   &--hover {
-    &:hover td[data-selected="true"] {
-      background-color: var(--mantine-primary-color-filled)
+    td[data-selected="true"] {
+      @mixin hover {
+        background-color: var(--mantine-primary-color-filled)
+      }
     }
 
-    &:hover td[data-selected="false"] {
-      @mixin light {
-        background-color: rgba(var(--mantine-color-white), 0.05);
-      }
-      @mixin dark {
-        background-color: rgba(var(--mantine-color-dark-7), 0.12);
+    td[data-selected="false"] {
+      @mixin hover {
+        @mixin light {
+          background-color: rgba(var(--mantine-color-white), 0.05);
+        }
+        @mixin dark {
+          background-color: rgba(var(--mantine-color-dark-7), 0.12);
+        }
       }
     }
   }

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

@@ -8,7 +8,13 @@ import {
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
-import { rgba, type BoxProps, type MantineTheme, darken, lighten } from '@mantine/core';
+import {
+  rgba,
+  type BoxProps,
+  type MantineTheme,
+  darken,
+  lighten,
+} from '@mantine/core';
 import {
   type MRT_TableOptions,
   type MantineShade,
@@ -281,7 +287,7 @@ export const getCanRankRows = <TData extends Record<string, any> = {}>(
     !Object.values(expanded).some(Boolean)
   );
 };
-
+// TODO: this needs to be refactored out to use CSS classes/styles
 export const getCommonCellStyles = <TData extends Record<string, any> = {}>({
   column,
   header,

packages/mantine-react-table/src/footer/MRT_TableFooter.module.css

@@ -0,0 +1,24 @@
+.MRT_TableFooter {
+  &--grid {
+    display: grid;
+  }
+
+  &--table-row-group {
+    display: table-row-group;
+  }
+
+  &--sticky {
+    bottom: 0;
+    opacity: 0.97;
+    position: sticky;
+    z-index: 1;
+
+    @mixin light {
+      outline: 1px solid var(--mantine-color-gray-3);
+    }
+
+    @mixin dark {
+      outline: 1px solid var(--mantine-color-gray-7);
+    }
+  }
+}

packages/mantine-react-table/src/footer/MRT_TableFooter.tsx

@@ -1,6 +1,8 @@
 import { Box } from '@mantine/core';
+import clsx from 'clsx';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { type MRT_TableInstance, type MRT_VirtualItem } from '../types';
+import classes from './MRT_TableFooter.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   table: MRT_TableInstance<TData>;
@@ -22,7 +24,7 @@ export const MRT_TableFooter = <TData extends Record<string, any> = {}>({
   } = table;
   const { isFullScreen } = getState();
 
-  const tableFooterProps =
+  const { className, ...tableFooterProps } =
     mantineTableFooterProps instanceof Function
       ? mantineTableFooterProps({ table })
       : mantineTableFooterProps;
@@ -34,17 +36,14 @@ export const MRT_TableFooter = <TData extends Record<string, any> = {}>({
     <Box
       component="tfoot"
       {...tableFooterProps}
+      className={clsx(
+        stickFooter && classes.MRT_TableFooterSticky,
+        layoutMode === 'grid'
+          ? classes.MRT_TableFooterGrid
+          : classes.MRT_TableFooterTableRowGroup,
+        className,
+      )}
       style={(theme) => ({
-        bottom: stickFooter ? 0 : undefined,
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
-        opacity: stickFooter ? 0.97 : undefined,
-        outline: stickFooter
-          ? theme.colorScheme === 'light'
-            ? `1px solid ${theme.colors.gray[3]}`
-            : `1px solid ${theme.colors.gray[7]}`
-          : undefined,
-        position: stickFooter ? 'sticky' : undefined,
-        zIndex: stickFooter ? 1 : undefined,
         ...(tableFooterProps?.style instanceof Function
           ? tableFooterProps?.style(theme)
           : (tableFooterProps?.style as any)),

packages/mantine-react-table/src/footer/MRT_TableFooterCell.module.css

@@ -0,0 +1,18 @@
+.MRT_TableFooterCell {
+  font-weight: bold;
+  // Not resolved?
+  padding: rem(9px);
+  vertical-align: top;
+
+  &--center-column {
+    justify-content: center;
+  }
+
+  &--grid {
+    display: grid;
+  }
+
+  &--table-cell {
+    display: table-cell;
+  }
+}

packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx

@@ -1,6 +1,8 @@
 import { Box } from '@mantine/core';
+import clsx from 'clsx';
 import { getCommonCellStyles } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
+import classes from './MRT_TableFooterCell.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   footer: MRT_Header<TData>;
@@ -28,7 +30,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any> = {}>({
       ? columnDef.mantineTableFooterCellProps({ column, table })
       : columnDef.mantineTableFooterCellProps;
 
-  const tableCellProps = {
+  const { className, ...tableCellProps } = {
     ...mTableFooterCellProps,
     ...mcTableFooterCellProps,
   };
@@ -39,12 +41,15 @@ export const MRT_TableFooterCell = <TData extends Record<string, any> = {}>({
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={footer.colSpan}
       {...tableCellProps}
+      className={clsx(
+        classes.MRT_TableFooterCell,
+        layoutMode === 'grid'
+          ? classes.MRT_TableFooterCellGrid
+          : classes.MRT_TableFooterCellTableCell,
+        columnDefType === 'group' && classes.MRT_TableFooterCellCenterColumn,
+        className,
+      )}
       style={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-cell',
-        fontWeight: 'bold',
-        justifyContent: columnDefType === 'group' ? 'center' : undefined,
-        padding: '8px',
-        verticalAlign: 'top',
         zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
         ...getCommonCellStyles({
           column,

packages/mantine-react-table/src/footer/MRT_TableFooterRow.module.css

@@ -0,0 +1,16 @@
+.MRT_TableFooterRow {
+  width: 100%;
+  @mixin light {
+    background-color: rgba(var(--mantine-color-white), 0.06);
+  }
+  @mixin dark {
+    background-color: rgba(var(--mantine-color-dark-7), 0.06);
+  }
+
+  &--grid {
+    display: grid;
+  }
+  &--table-row {
+    display: table-row;
+  }
+}

packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx

@@ -1,11 +1,13 @@
-import { Box, lighten } from '@mantine/core';
+import { Box } from '@mantine/core';
+import clsx from 'clsx';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../types';
+import classes from './MRT_TableFooterRow.module.css';
 
 interface Props<TData extends Record<string, any> = {}> {
   footerGroup: MRT_HeaderGroup<TData>;
@@ -37,22 +39,23 @@ export const MRT_TableFooterRow = <TData extends Record<string, any> = {}>({
   )
     return null;
 
-  const tableRowProps =
+  const { className, ...tableRowProps } =
     mantineTableFooterRowProps instanceof Function
       ? mantineTableFooterRowProps({ footerGroup, table })
       : mantineTableFooterRowProps;
 
   return (
     <Box
       component="tr"
+      className={clsx(
+        classes.MRT_TableFooterRow,
+        layoutMode === 'grid'
+          ? classes.MRT_TableFooterRowGrid
+          : classes.MRT_TableFooterRowTableRow,
+        className,
+      )}
       {...tableRowProps}
       style={(theme) => ({
-        backgroundColor: lighten(
-          theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
-          0.06,
-        ),
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
-        width: '100%',
         ...(tableRowProps?.style instanceof Function
           ? tableRowProps?.style(theme)
           : (tableRowProps?.style as any)),