@cutting/material-react-table 5.0.0-beta.2 → 5.1.0

package/src/components/table/MRT_TableContainer.tsx

@@ -1,4 +1,5 @@
 import { TableContainer, type TableContainerProps } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
@@ -8,39 +9,31 @@ import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
 import { MRT_Table } from './MRT_Table';
 import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-export interface MRT_TableContainerProps<TData extends MRT_RowData>
-  extends TableContainerProps {
+export interface MRT_TableContainerProps<TData extends MRT_RowData> extends TableContainerProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableContainer = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_TableContainerProps<TData>) => {
+}: MRT_TableContainerProps<TData>): JSX.Element => {
   const {
     options: {
       createDisplayMode,
       editDisplayMode,
+      enableBottomToolbar,
       enableCellActions,
       enableStickyHeader,
+      enableTopToolbar,
       muiTableContainerProps,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
-  const {
-    actionCell,
-    creatingRow,
-    editingRow,
-    isFullScreen,
-    isLoading,
-    showLoadingOverlay,
-  } = table.state;
+  const { actionCell, creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay } = table.state;
 
-  const loading =
-    showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
+  const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -52,18 +45,28 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
   };
 
   useIsomorphicLayoutEffect(() => {
-    const topToolbarHeight =
-      typeof document !== 'undefined'
-        ? (topToolbarRef.current?.offsetHeight ?? 0)
-        : 0;
+    const measureToolbars = () => {
+      setTotalToolbarHeight((topToolbarRef.current?.offsetHeight ?? 0) + (bottomToolbarRef.current?.offsetHeight ?? 0));
+    };
+
+    measureToolbars();
 
-    const bottomToolbarHeight =
-      typeof document !== 'undefined'
-        ? (bottomToolbarRef?.current?.offsetHeight ?? 0)
-        : 0;
+    if (typeof ResizeObserver === 'undefined' || !tableContainerRef.current) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      for (const toolbar of [topToolbarRef.current, bottomToolbarRef.current]) {
+        if (toolbar) {
+          resizeObserver.observe(toolbar);
+        }
+      }
+      measureToolbars();
+    });
+    resizeObserver.observe(tableContainerRef.current);
 
-    setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
-  });
+    return () => resizeObserver.disconnect();
+  }, [bottomToolbarRef, enableBottomToolbar, enableTopToolbar, isFullScreen, tableContainerRef, topToolbarRef]);
 
   const createModalOpen = createDisplayMode === 'modal' && creatingRow;
   const editModalOpen = editDisplayMode === 'modal' && editingRow;
@@ -76,33 +79,26 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
       ref={(node: HTMLDivElement) => {
         if (node) {
           tableContainerRef.current = node;
-          if (tableContainerProps?.ref) {
-            //@ts-expect-error
+          if (tableContainerProps?.ref && typeof tableContainerProps.ref === 'object') {
             tableContainerProps.ref.current = node;
           }
         }
       }}
       style={{
-        maxHeight: isFullScreen
-          ? `calc(100vh - ${totalToolbarHeight}px)`
-          : undefined,
+        maxHeight: isFullScreen ? `calc(100vh - ${totalToolbarHeight}px)` : undefined,
         ...tableContainerProps?.style,
       }}
       sx={(theme) => ({
-        maxHeight: enableStickyHeader
-          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-          : undefined,
+        maxHeight: enableStickyHeader ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)` : undefined,
         maxWidth: '100%',
         overflow: 'auto',
         position: 'relative',
-        ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as CSSObject),
       })}
     >
       {loading ? <MRT_TableLoadingOverlay table={table} /> : null}
       <MRT_Table table={table} />
-      {(createModalOpen || editModalOpen) && (
-        <MRT_EditRowModal open table={table} />
-      )}
+      {(createModalOpen || editModalOpen) && <MRT_EditRowModal open table={table} />}
       {enableCellActions && actionCell && <MRT_CellActionMenu table={table} />}
     </TableContainer>
   );

package/src/components/table/MRT_TableLoadingOverlay.tsx

@@ -1,19 +1,17 @@
-import { Box } from '@mui/material';
-import { CircularProgress, type CircularProgressProps } from '@mui/material';
+import { Box, CircularProgress, type CircularProgressProps } from '@mui/material';
 import { alpha } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_TableLoadingOverlayProps<TData extends MRT_RowData>
-  extends CircularProgressProps {
+export interface MRT_TableLoadingOverlayProps<TData extends MRT_RowData> extends CircularProgressProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_TableLoadingOverlayProps<TData>) => {
+}: MRT_TableLoadingOverlayProps<TData>): JSX.Element => {
   const {
     options: {
       id,

package/src/components/table/MRT_TablePaper.tsx

@@ -1,5 +1,5 @@
 import { Paper, type PaperProps } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { type CSSObject, useTheme } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -7,15 +7,14 @@ import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { MRT_TableContainer } from './MRT_TableContainer';
 
-export interface MRT_TablePaperProps<TData extends MRT_RowData>
-  extends PaperProps {
+export interface MRT_TablePaperProps<TData extends MRT_RowData> extends PaperProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TablePaper = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_TablePaperProps<TData>) => {
+}: MRT_TablePaperProps<TData>): JSX.Element => {
   const {
     options: {
       enableBottomToolbar,
@@ -43,8 +42,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
       {...paperProps}
       ref={(ref: HTMLDivElement) => {
         tablePaperRef.current = ref;
-        if (paperProps?.ref) {
-          //@ts-expect-error
+        if (paperProps?.ref && typeof paperProps.ref === 'object') {
           paperProps.ref.current = ref;
         }
       }}
@@ -72,18 +70,13 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         backgroundImage: 'unset',
         overflow: 'hidden',
         transition: 'all 100ms ease-in-out',
-        ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(paperProps?.sx, theme) as CSSObject),
       })}
     >
-      {enableTopToolbar &&
-        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
-          <MRT_TopToolbar table={table} />
-        ))}
+      {enableTopToolbar && (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? <MRT_TopToolbar table={table} />)}
       <MRT_TableContainer table={table} />
       {enableBottomToolbar &&
-        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
-          <MRT_BottomToolbar table={table} />
-        ))}
+        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? <MRT_BottomToolbar table={table} />)}
     </Paper>
   );
 };

package/src/components/toolbar/MRT_BottomToolbar.tsx

@@ -1,5 +1,5 @@
 import { Box, type BoxProps, useMediaQuery } from '@mui/material';
-import { alpha } from '@mui/material/styles';
+import { alpha, type CSSObject } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonToolbarStyles } from '../../utils/style.utils';
@@ -9,15 +9,14 @@ import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 
-export interface MRT_BottomToolbarProps<TData extends MRT_RowData>
-  extends BoxProps {
+export interface MRT_BottomToolbarProps<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_BottomToolbar = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_BottomToolbarProps<TData>) => {
+}: MRT_BottomToolbarProps<TData>): JSX.Element => {
   const {
     options: {
       enablePagination,
@@ -46,8 +45,7 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
       ref={(node: HTMLDivElement) => {
         if (node) {
           bottomToolbarRef.current = node;
-          if (toolbarProps?.ref) {
-            // @ts-expect-error
+          if (toolbarProps?.ref && typeof toolbarProps.ref === 'object') {
             toolbarProps.ref.current = node;
           }
         }
@@ -59,19 +57,14 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
         left: 0,
         position: isFullScreen ? 'fixed' : 'relative',
         right: 0,
-        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as CSSObject),
       })}
     >
       <MRT_LinearProgressBar isTopToolbar={false} table={table} />
       {positionToolbarAlertBanner === 'bottom' && (
-        <MRT_ToolbarAlertBanner
-          stackAlertBanner={stackAlertBanner}
-          table={table}
-        />
-      )}
-      {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && (
-        <MRT_ToolbarDropZone table={table} />
+        <MRT_ToolbarAlertBanner stackAlertBanner={stackAlertBanner} table={table} />
       )}
+      {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && <MRT_ToolbarDropZone table={table} />}
       <Box
         sx={{
           alignItems: 'center',
@@ -82,11 +75,7 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
           width: '100%',
         }}
       >
-        {renderBottomToolbarCustomActions ? (
-          renderBottomToolbarCustomActions({ table })
-        ) : (
-          <span />
-        )}
+        {renderBottomToolbarCustomActions ? renderBottomToolbarCustomActions({ table }) : <span />}
         <Box
           sx={{
             display: 'flex',
@@ -96,10 +85,9 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
             top: 0,
           }}
         >
-          {enablePagination &&
-            ['both', 'bottom'].includes(positionPagination ?? '') && (
-              <MRT_TablePagination position="bottom" table={table} />
-            )}
+          {enablePagination && ['both', 'bottom'].includes(positionPagination ?? '') && (
+            <MRT_TablePagination position="bottom" table={table} />
+          )}
         </Box>
       </Box>
     </Box>

package/src/components/toolbar/MRT_LinearProgressBar.tsx

@@ -1,11 +1,9 @@
-import { Collapse } from '@mui/material';
-import { LinearProgress, type LinearProgressProps } from '@mui/material';
+import { Collapse, LinearProgress, type LinearProgressProps } from '@mui/material';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_LinearProgressBarProps<TData extends MRT_RowData>
-  extends LinearProgressProps {
+export interface MRT_LinearProgressBarProps<TData extends MRT_RowData> extends LinearProgressProps {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -14,7 +12,7 @@ export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
   isTopToolbar,
   table,
   ...rest
-}: MRT_LinearProgressBarProps<TData>) => {
+}: MRT_LinearProgressBarProps<TData>): JSX.Element => {
   const {
     options: { muiLinearProgressProps },
   } = table;
@@ -40,12 +38,7 @@ export const MRT_LinearProgressBar = <TData extends MRT_RowData>({
       }}
       unmountOnExit
     >
-      <LinearProgress
-        aria-busy="true"
-        aria-label="Loading"
-        sx={{ position: 'relative' }}
-        {...linearProgressProps}
-      />
+      <LinearProgress aria-busy="true" aria-label="Loading" sx={{ position: 'relative' }} {...linearProgressProps} />
     </Collapse>
   );
 };

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -1,12 +1,17 @@
-import { Box, useMediaQuery } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { InputLabel } from '@mui/material';
-import { MenuItem } from '@mui/material';
-import { Pagination, type PaginationProps } from '@mui/material';
-import { PaginationItem } from '@mui/material';
-import { Select, type SelectProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
-import { Typography } from '@mui/material';
+import {
+  Box,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Pagination,
+  PaginationItem,
+  type PaginationProps,
+  Select,
+  type SelectProps,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
@@ -15,15 +20,14 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 
-export interface MRT_TablePaginationProps<TData extends MRT_RowData>
-  extends Partial<
-    PaginationProps & {
-      disabled?: boolean;
-      rowsPerPageOptions?: number[] | { label: string; value: number }[];
-      SelectProps?: Partial<SelectProps>;
-      showRowsPerPage?: boolean;
-    }
-  > {
+export interface MRT_TablePaginationProps<TData extends MRT_RowData> extends Partial<
+  PaginationProps & {
+    disabled?: boolean;
+    rowsPerPageOptions?: number[] | { label: string; value: number }[];
+    SelectProps?: Partial<SelectProps>;
+    showRowsPerPage?: boolean;
+  }
+> {
   position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
@@ -32,7 +36,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   position = 'bottom',
   table,
   ...rest
-}: MRT_TablePaginationProps<TData>) => {
+}: MRT_TablePaginationProps<TData>): JSX.Element => {
   const theme = useTheme();
   const isMobile = useMediaQuery('(max-width: 720px)');
 
@@ -92,10 +96,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
         gap: '8px',
         justifyContent: { md: 'space-between', sm: 'center' },
         justifySelf: 'flex-end',
-        mt:
-          position === 'top' && enableToolbarInternalActions
-            ? '3rem'
-            : undefined,
+        mt: position === 'top' && enableToolbarInternalActions ? '3rem' : undefined,
         position: 'relative',
         px: '8px',
         py: '12px',
@@ -116,9 +117,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             }}
             label={localization.rowsPerPage}
             MenuProps={{ disableScrollLock: true }}
-            onChange={(event) =>
-              table.setPageSize(+(event.target.value as any))
-            }
+            onChange={(event) => table.setPageSize(Number(event.target.value))}
             sx={{ mb: 0 }}
             value={pageSize}
             variant="standard"
@@ -126,8 +125,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           >
             {rowsPerPageOptions.map((option) => {
               const value = typeof option !== 'number' ? option.value : option;
-              const label =
-                typeof option !== 'number' ? option.label : `${option}`;
+              const label = typeof option !== 'number' ? option.label : `${option}`;
               return (
                 SelectProps?.children ??
                 (SelectProps?.native ? (
@@ -167,21 +165,16 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
         />
       ) : paginationDisplayMode === 'default' ? (
         <>
-          <Typography
-            align="center"
-            component="span"
-            sx={{ m: '0 4px', minWidth: '8ch' }}
-            variant="body2"
-          >{`${
-            lastRowIndex === 0
-              ? 0
-              : (firstRowIndex + 1).toLocaleString(localization.language)
+          <Typography align="center" component="span" sx={{ m: '0 4px', minWidth: '8ch' }} variant="body2">{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString(localization.language)
           }-${lastRowIndex.toLocaleString(localization.language)} ${
             localization.of
           } ${totalRowCount.toLocaleString(localization.language)}`}</Typography>
-          <Box sx={{
-            gap: "xs"
-          }}>
+          <Box
+            sx={{
+              gap: 'xs',
+            }}
+          >
             {showFirstButton && (
               <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
                 <span>

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,10 +1,5 @@
-import { Alert, type AlertProps } from '@mui/material';
-import { AlertTitle } from '@mui/material';
-import { Box } from '@mui/material';
-import { Button } from '@mui/material';
-import { Chip } from '@mui/material';
-import { Collapse } from '@mui/material';
-import { Stack } from '@mui/material';
+import { Alert, type AlertProps, AlertTitle, Box, Button, Chip, Collapse, Stack } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { Fragment, useMemo } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
@@ -12,8 +7,7 @@ import { getMRT_SelectAllHandler } from '../../utils/row.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 
-export interface MRT_ToolbarAlertBannerProps<TData extends MRT_RowData>
-  extends AlertProps {
+export interface MRT_ToolbarAlertBannerProps<TData extends MRT_RowData> extends AlertProps {
   stackAlertBanner?: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -22,7 +16,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   stackAlertBanner,
   table,
   ...rest
-}: MRT_ToolbarAlertBannerProps<TData>) => {
+}: MRT_ToolbarAlertBannerProps<TData>): JSX.Element => {
   const {
     getCoreRowModel,
     getFilteredSelectedRowModel,
@@ -56,33 +50,23 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
   const filteredRowCount = getFilteredSelectedRowModel().rows.length;
 
   const selectedRowCount = useMemo(
-    () =>
-      manualPagination
-        ? Object.values(rowSelection).filter(Boolean).length
-        : filteredRowCount,
-    [rowSelection, totalRowCount, manualPagination, filteredRowCount],
+    () => (manualPagination ? Object.values(rowSelection).filter(Boolean).length : filteredRowCount),
+    [rowSelection, manualPagination, filteredRowCount],
   );
   const selectedAlert =
     selectedRowCount > 0 ? (
       <Stack
         direction="row"
         sx={{
-          alignItems: "center",
-          gap: "16px"
-        }}>
+          alignItems: 'center',
+          gap: '16px',
+        }}
+      >
         {localization.selectedCountOfRowCountRowsSelected
-          ?.replace(
-            '{selectedCount}',
-            selectedRowCount.toLocaleString(localization.language),
-          )
-          ?.replace(
-            '{rowCount}',
-            totalRowCount.toLocaleString(localization.language),
-          )}
+          ?.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))
+          ?.replace('{rowCount}', totalRowCount.toLocaleString(localization.language))}
         <Button
-          onClick={(event) =>
-            getMRT_SelectAllHandler({ table })(event, false, true)
-          }
+          onClick={(event) => getMRT_SelectAllHandler({ table })(event, false, true)}
           size="small"
           sx={{ p: '2px' }}
         >
@@ -109,36 +93,27 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     ) : null;
 
   return (
-    <Collapse
-      in={showAlertBanner || !!selectedAlert || !!groupedAlert}
-      timeout={stackAlertBanner ? 200 : 0}
-    >
+    <Collapse in={showAlertBanner || !!selectedAlert || !!groupedAlert} timeout={stackAlertBanner ? 200 : 0}>
       <Alert
         color="info"
         icon={false}
         {...alertProps}
         sx={(theme) => ({
           '& .MuiAlert-message': {
-            maxWidth: `calc(${
-              tablePaperRef.current?.clientWidth ?? 360
-            }px - 1rem)`,
+            maxWidth: `calc(${tablePaperRef.current?.clientWidth ?? 360}px - 1rem)`,
             width: '100%',
           },
           borderRadius: 0,
           fontSize: '1rem',
           left: 0,
-          mb: stackAlertBanner
-            ? 0
-            : positionToolbarAlertBanner === 'bottom'
-              ? '-1rem'
-              : undefined,
+          mb: stackAlertBanner ? 0 : positionToolbarAlertBanner === 'bottom' ? '-1rem' : undefined,
           p: 0,
           position: 'relative',
           right: 0,
           top: 0,
           width: '100%',
           zIndex: 2,
-          ...(parseFromValuesOrFunc(alertProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(alertProps?.sx, theme) as CSSObject),
         })}
       >
         {renderToolbarAlertBannerContent?.({
@@ -161,15 +136,11 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
               }}
             >
               {alertProps?.children}
-              {alertProps?.children && (selectedAlert || groupedAlert) && (
-                <br />
-              )}
+              {alertProps?.children && (selectedAlert || groupedAlert) && <br />}
               <Box sx={{ display: 'flex' }}>
-                {enableRowSelection &&
-                  enableSelectAll &&
-                  positionToolbarAlertBanner === 'head-overlay' && (
-                    <MRT_SelectCheckbox table={table} />
-                  )}{' '}
+                {enableRowSelection && enableSelectAll && positionToolbarAlertBanner === 'head-overlay' && (
+                  <MRT_SelectCheckbox table={table} />
+                )}{' '}
                 {selectedAlert}
               </Box>
               {selectedAlert && groupedAlert && <br />}

package/src/components/toolbar/MRT_ToolbarDropZone.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 
 import { type MRT_ColumnDef } from '../../types';
 import { MaterialReactTable } from '../MaterialReactTable';
@@ -21,22 +21,38 @@ const columns = (): MRT_ColumnDef<Person>[] => [
 
 describe('grouping drop zone', () => {
   test('dropping a column on it groups by that column', () => {
-    const { container } = render(
-      <MaterialReactTable columns={columns()} data={data} enableGrouping />,
-    );
+    const { container } = render(<MaterialReactTable columns={columns()} data={data} enableGrouping />);
 
-    const handle = container.querySelector(
-      'thead button[aria-label="Move"]',
-    ) as HTMLElement;
+    const handle = container.querySelector('thead button[aria-label="Move"]') as HTMLElement;
 
     fireEvent.dragStart(handle, {
       dataTransfer: { setDragImage: () => {} },
     });
-    fireEvent.dragEnter(
-      container.querySelector('[class*="ToolbarDropZone"]') as HTMLElement,
-    );
+    fireEvent.dragEnter(container.querySelector('[class*="ToolbarDropZone"]') as HTMLElement);
     fireEvent.dragEnd(handle);
 
     expect(container.textContent).toContain('Grouped by');
   });
 });
+
+describe('controlled drop zone', () => {
+  test('does not call onShowToolbarDropZoneChange when the table re-renders', () => {
+    const onShowToolbarDropZoneChange = vi.fn();
+    const table = (isLoading: boolean) => (
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableGrouping
+        onShowToolbarDropZoneChange={(showToolbarDropZone) => onShowToolbarDropZoneChange(showToolbarDropZone)}
+        state={{ isLoading, showToolbarDropZone: false }}
+      />
+    );
+    const { rerender } = render(table(false));
+    onShowToolbarDropZoneChange.mockClear();
+
+    rerender(table(true));
+    rerender(table(false));
+
+    expect(onShowToolbarDropZoneChange).not.toHaveBeenCalled();
+  });
+});