fix: correctly handle disabled toolbar with top content

Author: jonathanl-dropit

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

@@ -25,6 +25,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
     options: {
       enableStickyHeader,
       enableTopContent,
+      enableTopToolbar,
       layoutMode,
       muiTableHeadProps,
       positionToolbarAlertBanner,
@@ -57,7 +58,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
         top:
           stickyHeader && layoutMode?.startsWith('grid')
             ? 0
-            : enableStickyHeader && enableTopContent
+            : enableStickyHeader && enableTopContent && enableTopToolbar
               ? getCommonToolbarStyles({ table, theme }).minHeight
               : undefined,
         zIndex: stickyHeader ? 2 : undefined,

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

@@ -11,7 +11,7 @@ export const MRT_TopContent = <TData extends MRT_RowData>({
   table,
 }: MRT_TopContentProps<TData>) => {
   const {
-    options: { renderTopContent },
+    options: { renderTopContent, enableTopToolbar },
   } = table;
   return (
     <>
@@ -23,7 +23,7 @@ export const MRT_TopContent = <TData extends MRT_RowData>({
       >
         {parseFromValuesOrFunc(renderTopContent, { table })}
       </Box>
-      <MRT_TopToolbar table={table} />
+      {enableTopToolbar && <MRT_TopToolbar table={table} />}
     </>
   );
 };

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

@@ -45,7 +45,7 @@ const data = [...Array(88)].map(() => ({
   state: faker.location.state(),
 }));
 
-export const TopContentWithStaticHeader = () => (
+export const TopContentWithStaticHeaderDefault = () => (
   <MaterialReactTable
     columns={columns}
     data={data}
@@ -97,3 +97,22 @@ export const TopContentWithStickyHeaderShorterTable = () => (
     )}
   />
 );
+
+export const TopContentWithHiddenTopToolbar = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    initialState={{ pagination: { pageIndex: 0, pageSize: 25 } }}
+    muiTableContainerProps={{ sx: { maxHeight: 400 } }}
+    enableStickyHeader
+    enableTopToolbar={false}
+    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>
+    )}
+  />
+);