feat: adding option to add arbitrary content inside the scroll container

Author: jonathanl-dropit

packages/material-react-table/src/components/head/MRT_TableHead.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
+import { getCommonToolbarStyles } from '../../utils/style.utils';
 
 export interface MRT_TableHeadProps<TData extends MRT_RowData>
   extends TableHeadProps {
@@ -23,6 +24,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
     getState,
     options: {
       enableStickyHeader,
+      enableTopContent,
       layoutMode,
       muiTableHeadProps,
       positionToolbarAlertBanner,
@@ -52,7 +54,12 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
         display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         opacity: 0.97,
         position: stickyHeader ? 'sticky' : 'relative',
-        top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
+        top:
+          stickyHeader && layoutMode?.startsWith('grid')
+            ? 0
+            : enableStickyHeader && enableTopContent
+              ? getCommonToolbarStyles({ table, theme }).minHeight
+              : undefined,
         zIndex: stickyHeader ? 2 : undefined,
         ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}

packages/material-react-table/src/components/table/MRT_TableContainer.tsx

@@ -8,6 +8,7 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_CellActionMenu } from '../menus/MRT_CellActionMenu';
 import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
+import { MRT_TopContent } from '../toolbar/MRT_TopContent';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -29,6 +30,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
       enableCellActions,
       enableStickyHeader,
       muiTableContainerProps,
+      enableTopContent,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
@@ -101,6 +103,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
       })}
     >
       {loading ? <MRT_TableLoadingOverlay table={table} /> : null}
+      {enableTopContent ? <MRT_TopContent table={table} /> : null}
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (
         <MRT_EditRowModal open table={table} />

packages/material-react-table/src/components/table/MRT_TablePaper.tsx

@@ -19,6 +19,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
     getState,
     options: {
       enableBottomToolbar,
+      enableTopContent,
       enableTopToolbar,
       mrtTheme: { baseBackgroundColor },
       muiTablePaperProps,
@@ -76,6 +77,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
       })}
     >
       {enableTopToolbar &&
+        !enableTopContent &&
         (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
           <MRT_TopToolbar table={table} />
         ))}

packages/material-react-table/src/components/toolbar/MRT_TopContent.tsx

@@ -0,0 +1,29 @@
+import Box from '@mui/material/Box';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_TopToolbar } from './MRT_TopToolbar';
+import type { MRT_RowData, MRT_TableInstance } from '../../types';
+
+export interface MRT_TopContentProps<TData extends MRT_RowData> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TopContent = <TData extends MRT_RowData>({
+  table,
+}: MRT_TopContentProps<TData>) => {
+  const {
+    options: { renderTopContent },
+  } = table;
+  return (
+    <>
+      <Box
+        sx={() => ({
+          position: 'sticky',
+          insetInlineStart: 0,
+        })}
+      >
+        {parseFromValuesOrFunc(renderTopContent, { table })}
+      </Box>
+      <MRT_TopToolbar table={table} />
+    </>
+  );
+};

packages/material-react-table/src/components/toolbar/MRT_TopToolbar.tsx

@@ -22,6 +22,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
     options: {
       enableGlobalFilter,
       enablePagination,
+      enableTopContent,
       enableToolbarInternalActions,
       muiTopToolbarProps,
       positionGlobalFilter,
@@ -66,9 +67,11 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
       }}
       sx={(theme) => ({
         ...getCommonToolbarStyles({ table, theme }),
-        position: isFullScreen ? 'sticky' : 'relative',
-        top: isFullScreen ? '0' : undefined,
+        position: isFullScreen || enableTopContent ? 'sticky' : 'relative',
+        top: isFullScreen || enableTopContent ? '0' : undefined,
         ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+        insetInlineStart: enableTopContent ? 0 : undefined,
+        zIndex: enableTopContent ? 3 : undefined,
       })}
     >
       {positionToolbarAlertBanner === 'top' && (

packages/material-react-table/src/types.ts

@@ -883,6 +883,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   enableTableFooter?: boolean;
   enableTableHead?: boolean;
   enableToolbarInternalActions?: boolean;
+  enableTopContent?: boolean;
   enableTopToolbar?: boolean;
   expandRowsFn?: (dataRow: TData) => TData[];
   getRowId?: (
@@ -1258,6 +1259,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   renderToolbarInternalActions?: (props: {
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
+  renderTopContent?:
+    | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
+    | ReactNode;
   renderTopToolbar?:
     | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
     | ReactNode;

packages/material-react-table/stories/styling/TopContent.stories.tsx

@@ -0,0 +1,99 @@
+import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
+import { faker } from '@faker-js/faker';
+import { type Meta } from '@storybook/react';
+import Paper from '@mui/material/Paper';
+
+const meta: Meta = {
+  parameters: {
+    status: {
+      type: 'stable',
+    },
+  },
+  title: 'Styling/Top Content Examples',
+};
+
+export default meta;
+
+const columns: MRT_ColumnDef<(typeof data)[0]>[] = [
+  {
+    accessorKey: 'firstName',
+    header: 'First Name',
+  },
+  {
+    accessorKey: 'lastName',
+    header: 'Last Name',
+  },
+  {
+    accessorKey: 'address',
+    header: 'Address',
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+  },
+  {
+    accessorKey: 'phoneNumber',
+    header: 'Phone Number',
+  },
+];
+
+const data = [...Array(88)].map(() => ({
+  address: faker.location.streetAddress(),
+  firstName: faker.person.firstName(),
+  lastName: faker.person.lastName(),
+  phoneNumber: faker.phone.number(),
+  state: faker.location.state(),
+}));
+
+export const TopContentWithStaticHeader = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    initialState={{ pagination: { pageIndex: 0, pageSize: 25 } }}
+    enableTopContent={true}
+    renderTopContent={({ table }) => (
+      <Paper elevation={3} sx={{ padding: '0.5rem', margin: '0.5rem' }}>
+        <h2 style={{ margin: '2rem', textAlign: 'center' }}>
+          Total rows: {table.getRowCount()}
+        </h2>
+      </Paper>
+    )}
+  />
+);
+
+export const TopContentWithStickyHeader = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableStickyHeader
+    initialState={{ pagination: { pageIndex: 0, pageSize: 25 } }}
+    enableTopContent={true}
+    renderTopContent={({ table }) => (
+      <Paper elevation={3} sx={{ padding: '0.5rem', margin: '0.5rem' }}>
+        <h2 style={{ margin: '2rem', textAlign: 'center' }}>
+          Total rows: {table.getRowCount()}
+        </h2>
+      </Paper>
+    )}
+  />
+);
+
+export const TopContentWithStickyHeaderShorterTable = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableColumnPinning
+    enableRowSelection
+    enableStickyHeader
+    initialState={{ pagination: { pageIndex: 0, pageSize: 25 } }}
+    muiTableContainerProps={{ sx: { maxHeight: 400 } }}
+    enableTopContent={true}
+    renderTopContent={({ table }) => (
+      <Paper elevation={3} sx={{ padding: '0.5rem', margin: '0.5rem' }}>
+        <h2 style={{ margin: '2rem', textAlign: 'center' }}>
+          Total rows: {table.getRowCount()}
+        </h2>
+      </Paper>
+    )}
+  />
+);