@cutting/material-react-table 5.0.0 → 5.1.0

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,20 +1,11 @@
-import { Box } from '@mui/material';
-import { Button } from '@mui/material';
-import { Divider } from '@mui/material';
-import { Menu, type MenuProps } from '@mui/material';
+import { Box, Button, Divider, Menu, type MenuProps } from '@mui/material';
 import { useMemo, useState } from 'react';
 
-import {
-  type MRT_Column,
-  type MRT_RowData,
-  type MRT_TableInstance,
-  type MRT_VisibilityState
-} from '../../types';
+import { type MRT_Column, type MRT_RowData, type MRT_TableInstance, type MRT_VisibilityState } from '../../types';
 import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 
-export interface MRT_ShowHideColumnsMenuProps<TData extends MRT_RowData>
-  extends Partial<MenuProps> {
+export interface MRT_ShowHideColumnsMenuProps<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -26,7 +17,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   setAnchorEl,
   table,
   ...rest
-}: MRT_ShowHideColumnsMenuProps<TData>) => {
+}: MRT_ShowHideColumnsMenuProps<TData>): JSX.Element => {
   const {
     getAllColumns,
     getAllLeafColumns,
@@ -45,61 +36,47 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       mrtTheme: { menuBackgroundColor },
     },
   } = table;
-  const { columnOrder, columnPinning, density } = table.state;
+  const { columnOrder, density } = table.state;
 
   const handleToggleAllColumns = (value?: boolean) => {
-    const updates =
-      getAllLeafColumns()
-        .filter((column) => column.columnDef.enableHiding !== false)
-        .reduce((acc, column) => {
-          acc[column.id] = value ?? !column.getIsVisible()
-          return acc;
-        }, {} as MRT_VisibilityState);
+    const updates = getAllLeafColumns()
+      .filter((column) => column.columnDef.enableHiding !== false)
+      .reduce((acc, column) => {
+        acc[column.id] = value ?? !column.getIsVisible();
+        return acc;
+      }, {} as MRT_VisibilityState);
 
     table.setColumnVisibility((old) => ({ ...old, ...updates }));
   };
 
+  const allTableColumns = getAllColumns();
+  const centerLeafColumns = getCenterLeafColumns();
+  const leftLeafColumns = getLeftLeafColumns();
+  const rightLeafColumns = getRightLeafColumns();
+
   const allColumns = useMemo(() => {
-    const columns = getAllColumns();
-    if (
-      columnOrder.length > 0 &&
-      !columns.some((col) => col.columnDef.columnDefType === 'group')
-    ) {
+    const columns = allTableColumns;
+    if (columnOrder.length > 0 && !columns.some((col) => col.columnDef.columnDefType === 'group')) {
       return [
-        ...getLeftLeafColumns(),
-        ...Array.from(new Set(columnOrder)).map((colId) =>
-          getCenterLeafColumns().find((col) => col?.id === colId),
-        ),
-        ...getRightLeafColumns(),
+        ...leftLeafColumns,
+        ...Array.from(new Set(columnOrder)).map((colId) => centerLeafColumns.find((col) => col?.id === colId)),
+        ...rightLeafColumns,
       ].filter(Boolean);
     }
     return columns;
-  }, [
-    columnOrder,
-    columnPinning,
-    getAllColumns(),
-    getCenterLeafColumns(),
-    getLeftLeafColumns(),
-    getRightLeafColumns(),
-  ]) as MRT_Column<TData>[];
+  }, [allTableColumns, centerLeafColumns, columnOrder, leftLeafColumns, rightLeafColumns]) as MRT_Column<TData>[];
 
-  const isNestedColumns = allColumns.some(
-    (col) => col.columnDef.columnDefType === 'group',
-  );
+  const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
 
   const hasColumnOrderChanged = useMemo(
     () =>
       columnOrder.length !== initialState.columnOrder.length ||
-      !columnOrder.every(
-        (column, index) => column === initialState.columnOrder[index],
-      ),
+      !columnOrder.every((column, index) => column === initialState.columnOrder[index]),
 
     [columnOrder, initialState.columnOrder],
   );
 
-  const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
-    null,
-  );
+  const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(null);
 
   return (
     <Menu
@@ -126,38 +103,25 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         }}
       >
         {enableHiding && (
-          <Button
-            disabled={!getIsSomeColumnsVisible()}
-            onClick={() => handleToggleAllColumns(false)}
-          >
+          <Button disabled={!getIsSomeColumnsVisible()} onClick={() => handleToggleAllColumns(false)}>
             {localization.hideAll}
           </Button>
         )}
         {enableColumnOrdering && (
           <Button
             disabled={!hasColumnOrderChanged}
-            onClick={() =>
-              table.setColumnOrder(
-                getDefaultColumnOrderIds(table.options, true),
-              )
-            }
+            onClick={() => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true))}
           >
             {localization.resetOrder}
           </Button>
         )}
         {enableColumnPinning && (
-          <Button
-            disabled={!getIsSomeColumnsPinned()}
-            onClick={() => table.resetColumnPinning(true)}
-          >
+          <Button disabled={!getIsSomeColumnsPinned()} onClick={() => table.resetColumnPinning(true)}>
             {localization.unpinAll}
           </Button>
         )}
         {enableHiding && (
-          <Button
-            disabled={getIsAllColumnsVisible()}
-            onClick={() => handleToggleAllColumns(true)}
-          >
+          <Button disabled={getIsAllColumnsVisible()} onClick={() => handleToggleAllColumns(true)}>
             {localization.showAll}
           </Button>
         )}

package/src/components/menus/MRT_ShowHideColumnsMenuItems.test.tsx

@@ -0,0 +1,43 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  city: string;
+  name: string;
+}
+
+const data: Person[] = [{ city: 'Glasgow', name: 'Alice' }];
+
+const columns: MRT_ColumnDef<Person>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'city', header: 'City' },
+];
+
+const headerOrder = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('thead th')).map((th) => th.textContent?.replace(/[^A-Za-z]/g, ''));
+
+describe('show/hide columns menu', () => {
+  test('dragging a column onto another reorders the table columns', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<MaterialReactTable columns={columns} data={data} enableColumnOrdering />);
+
+    await user.click(screen.getByRole('button', { name: 'Show/Hide columns' }));
+
+    const menu = screen.getByRole('menu');
+    const nameItem = within(menu).getByText('Name').closest('li') as HTMLElement;
+    const cityItem = within(menu).getByText('City').closest('li') as HTMLElement;
+    const nameHandle = within(nameItem).getByRole('button', { name: 'Move' });
+
+    fireEvent.dragStart(nameHandle, {
+      dataTransfer: { setDragImage: () => {} },
+    });
+    fireEvent.dragEnter(cityItem);
+    fireEvent.dragEnd(nameHandle);
+
+    expect(headerOrder(container)).toEqual(['City', 'Name']);
+  });
+});

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,30 +1,15 @@
-import { Box } from '@mui/material';
-import { FormControlLabel } from '@mui/material';
-import { MenuItem, type MenuItemProps } from '@mui/material';
-import { Switch } from '@mui/material';
-import { Tooltip } from '@mui/material';
-import { Typography } from '@mui/material';
-import {
-  type Dispatch,
-  type DragEvent,
-  type SetStateAction,
-  useRef,
-  useState,
-} from 'react';
+import { Box, FormControlLabel, MenuItem, type MenuItemProps, Switch, Tooltip, Typography } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
+import { type Dispatch, type DragEvent, type SetStateAction, useRef, useState } from 'react';
 
-import {
-  type MRT_Column,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-import { reorderColumn } from '../../utils/column.utils';
+import { type MRT_Column, type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { moveColumn } from '../../utils/column.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-export interface MRT_ShowHideColumnsMenuItemsProps<TData extends MRT_RowData>
-  extends MenuItemProps {
+export interface MRT_ShowHideColumnsMenuItemsProps<TData extends MRT_RowData> extends MenuItemProps {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
@@ -41,7 +26,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   setHoveredColumn,
   table,
   ...rest
-}: MRT_ShowHideColumnsMenuItemsProps<TData>) => {
+}: MRT_ShowHideColumnsMenuItemsProps<TData>): JSX.Element | null => {
   const {
     options: {
       enableColumnOrdering,
@@ -50,10 +35,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
       localization,
       mrtTheme: { draggingBorderColor },
     },
-    setColumnOrder,
-    setColumnPinning,
   } = table;
-  const { columnOrder } = table.state;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
@@ -69,7 +51,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     }
   };
 
-  const menuItemRef = useRef<HTMLElement>(null);
+  const menuItemRef = useRef<HTMLLIElement>(null);
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -86,16 +68,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     setIsDragging(false);
     setHoveredColumn(null);
     if (hoveredColumn) {
-      const reorderedColumns = reorderColumn(
-        column,
-        hoveredColumn,
-        columnOrder,
-      );
-      setColumnOrder(reorderedColumns);
-      setColumnPinning(({ end = [], start = [] }) => ({
-        end: reorderedColumns.filter((header) => end.includes(header)),
-        start: reorderedColumns.filter((header) => start.includes(header)),
-      }));
+      moveColumn(table, column, hoveredColumn);
     }
   };
 
@@ -114,7 +87,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
       <MenuItem
         disableRipple
         onDragEnter={handleDragEnter}
-        ref={menuItemRef as any}
+        ref={menuItemRef}
         {...rest}
         sx={(theme) => ({
           alignItems: 'center',
@@ -129,7 +102,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
           outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
-          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
         })}
       >
         <Box
@@ -143,11 +116,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
             enableColumnOrdering &&
             !isNestedColumns &&
             (columnDef.enableColumnOrdering !== false ? (
-              <MRT_GrabHandleButton
-                onDragEnd={handleDragEnd}
-                onDragStart={handleDragStart}
-                table={table}
-              />
+              <MRT_GrabHandleButton onDragEnd={handleDragEnd} onDragStart={handleDragStart} table={table} />
             ) : (
               <Box sx={{ width: '28px' }} />
             ))}
@@ -161,10 +130,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
             <FormControlLabel
               checked={switchChecked}
               control={
-                <Tooltip
-                  {...getCommonTooltipProps()}
-                  title={localization.toggleVisibility}
-                >
+                <Tooltip {...getCommonTooltipProps()} title={localization.toggleVisibility}>
                   <Switch />
                 </Tooltip>
               }
@@ -181,9 +147,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
               }}
             />
           ) : (
-            <Typography sx={{ alignSelf: 'center' }}>
-              {columnDef.header}
-            </Typography>
+            <Typography sx={{ alignSelf: 'center' }}>{columnDef.header}</Typography>
           )}
         </Box>
       </MenuItem>

package/src/components/modals/MRT_EditRowModal.test.tsx

@@ -11,25 +11,16 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 describe('row editing', () => {
   test('opens the edit modal when the edit button is clicked', async () => {
     const user = userEvent.setup();
     const { baseElement, container } = render(
-      <MaterialReactTable
-        columns={columns()}
-        data={data}
-        editDisplayMode="modal"
-        enableEditing
-      />,
+      <MaterialReactTable columns={columns()} data={data} editDisplayMode="modal" enableEditing />,
     );
 
-    await user.click(
-      container.querySelector('[aria-label="Edit"]') as HTMLElement,
-    );
+    await user.click(container.querySelector('[aria-label="Edit"]') as HTMLElement);
 
     expect(baseElement.querySelectorAll('input').length).toBeGreaterThan(0);
   });
@@ -37,17 +28,10 @@ describe('row editing', () => {
   test('opens inline inputs when editDisplayMode is row', async () => {
     const user = userEvent.setup();
     const { container } = render(
-      <MaterialReactTable
-        columns={columns()}
-        data={data}
-        editDisplayMode="row"
-        enableEditing
-      />,
+      <MaterialReactTable columns={columns()} data={data} editDisplayMode="row" enableEditing />,
     );
 
-    await user.click(
-      container.querySelector('[aria-label="Edit"]') as HTMLElement,
-    );
+    await user.click(container.querySelector('[aria-label="Edit"]') as HTMLElement);
 
     expect(container.querySelectorAll('tbody input').length).toBeGreaterThan(0);
   });

package/src/components/modals/MRT_EditRowModal.tsx

@@ -1,20 +1,11 @@
-import { Dialog, type DialogProps } from '@mui/material';
-import { DialogActions } from '@mui/material';
-import { DialogContent } from '@mui/material';
-import { DialogTitle } from '@mui/material';
-import { Stack } from '@mui/material';
+import { Dialog, DialogActions, DialogContent, type DialogProps, DialogTitle, Stack } from '@mui/material';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
-export interface MRT_EditRowModalProps<TData extends MRT_RowData>
-  extends Partial<DialogProps> {
+export interface MRT_EditRowModalProps<TData extends MRT_RowData> extends Partial<DialogProps> {
   open: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -23,7 +14,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
   open,
   table,
   ...rest
-}: MRT_EditRowModalProps<TData>) => {
+}: MRT_EditRowModalProps<TData>): JSX.Element => {
   const {
     options: {
       localization,
@@ -42,21 +33,14 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
 
   const dialogProps = {
     ...parseFromValuesOrFunc(muiEditRowDialogProps, { row, table }),
-    ...(creatingRow &&
-      parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
+    ...(creatingRow && parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
     ...rest,
   };
 
   const internalEditComponents = row
     .getAllCells()
     .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-    .map((cell) => (
-      <MRT_EditCellTextField
-        cell={cell as any}
-        key={cell.id}
-        table={table as any}
-      />
-    ));
+    .map((cell) => <MRT_EditCellTextField cell={cell} key={cell.id} table={table} />);
 
   return (
     <Dialog
@@ -70,7 +54,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
           onEditingRowCancel?.({ row, table });
           setEditingRow(null);
         }
-        row._valuesCache = {} as any; //reset values cache
+        row._valuesCache = {}; //reset values cache
         dialogProps.onClose?.(event, reason);
       }}
       open={open}
@@ -88,9 +72,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
           table,
         })) ?? (
         <>
-          <DialogTitle sx={{ textAlign: 'center' }}>
-            {localization.edit}
-          </DialogTitle>
+          <DialogTitle sx={{ textAlign: 'center' }}>{localization.edit}</DialogTitle>
           <DialogContent>
             <form onSubmit={(e) => e.preventDefault()}>
               <Stack

package/src/components/table/MRT_Table.tsx

@@ -1,5 +1,5 @@
 import { Table, type TableProps } from '@mui/material';
-import { useMemo } from 'react';
+import { type CSSObject } from '@mui/material/styles';
 
 import { useMRT_ColumnVirtualizer } from '../../hooks/useMRT_ColumnVirtualizer';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
@@ -13,14 +13,10 @@ export interface MRT_TableProps<TData extends MRT_RowData> extends TableProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_Table = <TData extends MRT_RowData>({
-  table,
-  ...rest
-}: MRT_TableProps<TData>) => {
+export const MRT_Table = <TData extends MRT_RowData>({ table, ...rest }: MRT_TableProps<TData>): JSX.Element => {
   const {
     getFlatHeaders,
     options: {
-      columns,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -30,8 +26,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
       renderCaption,
     },
   } = table;
-  const { columnResizing, columnSizing, columnVisibility, isFullScreen } =
-    table.state;
+  const { columnResizing, isFullScreen } = table.state;
 
   const tableProps = {
     ...parseFromValuesOrFunc(muiTableProps, { table }),
@@ -40,17 +35,14 @@ export const MRT_Table = <TData extends MRT_RowData>({
 
   const Caption = parseFromValuesOrFunc(renderCaption, { table });
 
-  const columnSizeVars = useMemo(() => {
-    const headers = getFlatHeaders();
-    const colSizes: { [key: string]: number } = {};
-    for (let i = 0; i < headers.length; i++) {
-      const header = headers[i];
-      const colSize = header.getSize();
-      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
-      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
-    }
-    return colSizes;
-  }, [columns, columnSizing, columnResizing, columnVisibility]);
+  const headers = getFlatHeaders();
+  const columnSizeVars: { [key: string]: number } = {};
+  for (let i = 0; i < headers.length; i++) {
+    const header = headers[i];
+    const colSize = header.getSize();
+    columnSizeVars[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+    columnSizeVars[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+  }
 
   const columnVirtualizer = useMRT_ColumnVirtualizer(table);
 
@@ -68,7 +60,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
         borderCollapse: 'separate',
         display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         position: 'relative',
-        ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableProps?.sx, theme) as CSSObject),
       })}
     >
       {!!Caption && <caption>{Caption}</caption>}

package/src/components/table/MRT_TableContainer.test.tsx

@@ -0,0 +1,147 @@
+import { act, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  name: string;
+}
+
+const data: Person[] = [{ name: 'Alice' }];
+
+const columns: MRT_ColumnDef<Person>[] = [{ accessorKey: 'name', header: 'Name' }];
+
+const toolbarHeight = 50;
+
+const toolbarHeights: Record<string, number> = {};
+
+const resizeObservers: FakeResizeObserver[] = [];
+
+class FakeResizeObserver {
+  callback: ResizeObserverCallback;
+
+  targets = new Set<Element>();
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+    resizeObservers.push(this);
+  }
+
+  disconnect() {
+    this.targets.clear();
+  }
+
+  observe(target: Element) {
+    this.targets.add(target);
+  }
+
+  unobserve(target: Element) {
+    this.targets.delete(target);
+  }
+}
+
+const notifyResizeObservers = () => {
+  for (const resizeObserver of [...resizeObservers]) {
+    resizeObserver.callback([], {} as ResizeObserver);
+  }
+};
+
+const notifyResizeObserversOf = (target: Element) => {
+  for (const resizeObserver of [...resizeObservers]) {
+    if (resizeObserver.targets.has(target)) {
+      resizeObserver.callback([], {} as ResizeObserver);
+    }
+  }
+};
+
+describe('table container max height', () => {
+  beforeEach(() => {
+    vi.stubGlobal('ResizeObserver', FakeResizeObserver);
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function (this: HTMLElement) {
+      return this.dataset.toolbar ? (toolbarHeights[this.dataset.toolbar] ?? toolbarHeight) : 0;
+    });
+  });
+
+  afterEach(() => {
+    resizeObservers.length = 0;
+    for (const toolbar of Object.keys(toolbarHeights)) {
+      delete toolbarHeights[toolbar];
+    }
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  test('subtracts the top and bottom toolbar heights', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableStickyHeader
+        muiBottomToolbarProps={{ 'data-toolbar': 'bottom' } as object}
+        muiTableContainerProps={{ 'data-testid': 'table-container' } as object}
+        muiTopToolbarProps={{ 'data-toolbar': 'top' } as object}
+      />,
+    );
+
+    act(() => {
+      notifyResizeObservers();
+    });
+
+    const tableContainer = container.querySelector('[data-testid="table-container"]') as HTMLElement;
+
+    expect(getComputedStyle(tableContainer).maxHeight).toBe(`${window.innerHeight - toolbarHeight * 2}px`);
+  });
+
+  test('includes a bottom toolbar that is turned on after mount', () => {
+    const table = (enableBottomToolbar: boolean) => (
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableBottomToolbar={enableBottomToolbar}
+        enableStickyHeader
+        muiBottomToolbarProps={{ 'data-toolbar': 'bottom' } as object}
+        muiTableContainerProps={{ 'data-testid': 'table-container' } as object}
+        muiTopToolbarProps={{ 'data-toolbar': 'top' } as object}
+      />
+    );
+    const { container, rerender } = render(table(false));
+
+    rerender(table(true));
+    act(() => {
+      notifyResizeObservers();
+    });
+
+    const tableContainer = container.querySelector('[data-testid="table-container"]') as HTMLElement;
+
+    expect(getComputedStyle(tableContainer).maxHeight).toBe(`${window.innerHeight - toolbarHeight * 2}px`);
+  });
+
+  test('re-measures a toolbar when its height changes', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableStickyHeader
+        muiBottomToolbarProps={{ 'data-toolbar': 'bottom' } as object}
+        muiTableContainerProps={{ 'data-testid': 'table-container' } as object}
+        muiTopToolbarProps={{ 'data-toolbar': 'top' } as object}
+      />,
+    );
+
+    act(() => {
+      notifyResizeObservers();
+    });
+
+    const topToolbar = container.querySelector('[data-toolbar="top"]') as HTMLElement;
+    toolbarHeights.top = 80;
+
+    act(() => {
+      notifyResizeObserversOf(topToolbar);
+    });
+
+    const tableContainer = container.querySelector('[data-testid="table-container"]') as HTMLElement;
+
+    expect(getComputedStyle(tableContainer).maxHeight).toBe(`${window.innerHeight - 80 - toolbarHeight}px`);
+  });
+});