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

package/src/fns/sortingFns.ts

@@ -1,43 +1,43 @@
 import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
 import {
+  type Row,
   sortFn_alphanumeric,
+  sortFn_alphanumericCaseSensitive,
   sortFn_basic,
   sortFn_datetime,
   sortFn_text,
+  sortFn_textCaseSensitive,
 } from '@tanstack/react-table';
-import { type Row } from '@tanstack/react-table';
 
 import { type MRT_Row, type MRT_RowData } from '../types';
+import { type MRT_TableFeatures } from './tableFeatures';
 
-const fuzzy = <TData extends MRT_RowData>(
-  rowA: Row<any, TData>,
-  rowB: Row<any, TData>,
+const fuzzy = <TFeatures extends MRT_TableFeatures, TData extends MRT_RowData>(
+  rowA: Row<TFeatures, TData>,
+  rowB: Row<TFeatures, TData>,
   columnId: string,
-) => {
+): number => {
   let dir = 0;
-  if (rowA.columnFiltersMeta[columnId]) {
+  if ('columnFiltersMeta' in rowA && 'columnFiltersMeta' in rowB && rowA.columnFiltersMeta[columnId]) {
     dir = compareItems(
       rowA.columnFiltersMeta[columnId] as RankingInfo,
       rowB.columnFiltersMeta[columnId] as RankingInfo,
     );
   }
   // Provide a fallback for when the item ranks are equal
-  return dir === 0
-    ? sortFn_alphanumeric(rowA, rowB, columnId)
-    : dir;
+  return dir === 0 ? sortFn_alphanumeric(rowA, rowB, columnId) : dir;
 };
 
 export const MRT_SortingFns = {
   alphanumeric: sortFn_alphanumeric,
+  alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
   basic: sortFn_basic,
   datetime: sortFn_datetime,
   fuzzy,
   text: sortFn_text,
+  textCaseSensitive: sortFn_textCaseSensitive,
 };
 
-export const rankGlobalFuzzy = <TData extends MRT_RowData>(
-  rowA: MRT_Row<TData>,
-  rowB: MRT_Row<TData>,
-) =>
-  Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
-  Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));
+export const rankGlobalFuzzy = <TData extends MRT_RowData>(rowA: MRT_Row<TData>, rowB: MRT_Row<TData>): number =>
+  Math.max(...Object.values(rowB.columnFiltersMeta).map((meta) => (meta as RankingInfo).rank)) -
+  Math.max(...Object.values(rowA.columnFiltersMeta).map((meta) => (meta as RankingInfo).rank));

package/src/fns/tableFeatures.test.tsx

@@ -8,20 +8,12 @@ interface Person {
   name: string;
 }
 
-const data: Person[] = [
-  { name: 'Jonathan' },
-  { name: 'Aaron' },
-  { name: 'Sara' },
-];
+const data: Person[] = [{ name: 'Jonathan' }, { name: 'Aaron' }, { name: 'Sara' }];
 
-const columns: MRT_ColumnDef<Person>[] = [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns: MRT_ColumnDef<Person>[] = [{ accessorKey: 'name', header: 'Name' }];
 
 const renderedNames = (container: HTMLElement) =>
-  Array.from(container.querySelectorAll('tbody tr')).map(
-    (row) => row.textContent,
-  );
+  Array.from(container.querySelectorAll('tbody tr')).map((row) => row.textContent);
 
 describe('server-side options suppress client-side row models', () => {
   test('manualPagination renders the whole server page, ignoring pageSize', () => {
@@ -40,12 +32,7 @@ describe('server-side options suppress client-side row models', () => {
 
   test('manualFiltering keeps every row when a global filter is set', () => {
     const { container } = render(
-      <MaterialReactTable
-        columns={columns}
-        data={data}
-        manualFiltering
-        state={{ globalFilter: 'zzz' }}
-      />,
+      <MaterialReactTable columns={columns} data={data} manualFiltering state={{ globalFilter: 'zzz' }} />,
     );
 
     expect(renderedNames(container)).toEqual(['Jonathan', 'Aaron', 'Sara']);
@@ -69,24 +56,14 @@ describe('server-side options suppress client-side row models', () => {
 describe('client-side row models stay active by default', () => {
   test('pagination slices to pageSize', () => {
     const { container } = render(
-      <MaterialReactTable
-        columns={columns}
-        data={data}
-        state={{ pagination: { pageIndex: 0, pageSize: 2 } }}
-      />,
+      <MaterialReactTable columns={columns} data={data} state={{ pagination: { pageIndex: 0, pageSize: 2 } }} />,
     );
 
     expect(renderedNames(container)).toEqual(['Jonathan', 'Aaron']);
   });
 
   test('global filter drops non-matching rows', () => {
-    const { container } = render(
-      <MaterialReactTable
-        columns={columns}
-        data={data}
-        state={{ globalFilter: 'zzz' }}
-      />,
-    );
+    const { container } = render(<MaterialReactTable columns={columns} data={data} state={{ globalFilter: 'zzz' }} />);
 
     expect(renderedNames(container)).toEqual(['No results found']);
   });

package/src/fns/tableFeatures.ts

@@ -1,5 +1,4 @@
 import {
-  type AggregationFnDef,
   cellSelectionFeature,
   cellSpanningFeature,
   columnFacetingFeature,
@@ -18,6 +17,7 @@ import {
   createGroupedRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
+  type CustomAggregationFns,
   type FilterFn,
   globalFilteringFeature,
   rowAggregationFeature,
@@ -32,6 +32,7 @@ import {
   tableFeatures,
 } from '@tanstack/react-table';
 
+import { type MRT_RowData } from '../types';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
@@ -96,8 +97,8 @@ export const MRT_DefaultTableFeatures = tableFeatures({
 });
 
 export interface MRT_TableFeatures extends StockFeatures {
-  aggregationFns: Record<string, AggregationFnDef<any, any, any, any>>;
-  filterFns: Record<string, FilterFn<any, any>>;
+  aggregationFns: CustomAggregationFns<MRT_TableFeatures, MRT_RowData>;
+  filterFns: Record<string, FilterFn<MRT_TableFeatures, MRT_RowData>>;
   mrtFeature: TableFeature;
-  sortFns: Record<string, SortFn<any, any>>;
+  sortFns: Record<string, SortFn<MRT_TableFeatures, MRT_RowData>>;
 }

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -1,9 +1,5 @@
 import { MRT_ToggleRowActionMenuButton } from '../../components/buttons/MRT_ToggleRowActionMenuButton';
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
+import { type MRT_ColumnDef, type MRT_RowData, type MRT_StatefulTableOptions } from '../../types';
 import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
@@ -11,12 +7,7 @@ export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
 ): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ cell, row, staticRowIndex, table }) => (
-      <MRT_ToggleRowActionMenuButton
-        cell={cell}
-        row={row}
-        staticRowIndex={staticRowIndex}
-        table={table}
-      />
+      <MRT_ToggleRowActionMenuButton cell={cell} row={row} staticRowIndex={staticRowIndex} table={table} />
     ),
     ...defaultDisplayColumnProps({
       header: 'actions',

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -1,11 +1,7 @@
 import { type RefObject } from 'react';
 
 import { MRT_TableBodyRowGrabHandle } from '../../components/body/MRT_TableBodyRowGrabHandle';
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
+import { type MRT_ColumnDef, type MRT_RowData, type MRT_StatefulTableOptions } from '../../types';
 import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
@@ -13,11 +9,7 @@ export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
 ): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ row, rowRef, table }) => (
-      <MRT_TableBodyRowGrabHandle
-        row={row}
-        rowRef={rowRef as RefObject<HTMLTableRowElement | null>}
-        table={table}
-      />
+      <MRT_TableBodyRowGrabHandle row={row} rowRef={rowRef as RefObject<HTMLTableRowElement | null>} table={table} />
     ),
     grow: false,
     ...defaultDisplayColumnProps({

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -1,14 +1,9 @@
-import { Stack } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Stack, Tooltip } from '@mui/material';
 import { type ReactNode } from 'react';
 
 import { MRT_ExpandAllButton } from '../../components/buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../../components/buttons/MRT_ExpandButton';
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
+import { type MRT_ColumnDef, type MRT_RowData, type MRT_StatefulTableOptions } from '../../types';
 import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 
@@ -39,10 +34,11 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
         return (
           <Stack
             sx={{
-              alignItems: "center",
-              flexDirection: "row",
-              gap: "0.25rem"
-            }}>
+              alignItems: 'center',
+              flexDirection: 'row',
+              gap: '0.25rem',
+            }}
+          >
             <MRT_ExpandButton {...expandButtonProps} />
             <Tooltip
               {...getCommonTooltipProps('right')}
@@ -68,12 +64,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
             <>
               <MRT_ExpandAllButton table={table} />
               {groupedColumnMode === 'remove' &&
-                grouping
-                  ?.map(
-                    (groupedColumnId) =>
-                      table.getColumn(groupedColumnId)?.columnDef.header,
-                  )
-                  ?.join(', ')}
+                grouping?.map((groupedColumnId) => table.getColumn(groupedColumnId)?.columnDef.header)?.join(', ')}
             </>
           );
         }

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -1,8 +1,4 @@
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
+import { type MRT_ColumnDef, type MRT_RowData, type MRT_StatefulTableOptions } from '../../types';
 import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
@@ -15,9 +11,8 @@ export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
 
   return {
     Cell: ({ row, staticRowIndex }) =>
-      ((rowNumberDisplayMode === 'static'
-        ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
-        : row.index) ?? 0) + 1,
+      ((rowNumberDisplayMode === 'static' ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0) : row.index) ??
+        0) + 1,
     grow: false,
     Header: () => localization.rowNumber,
     ...defaultDisplayColumnProps({

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -1,18 +1,12 @@
 import { MRT_TableBodyRowPinButton } from '../../components/body/MRT_TableBodyRowPinButton';
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
+import { type MRT_ColumnDef, type MRT_RowData, type MRT_StatefulTableOptions } from '../../types';
 import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> => {
   return {
-    Cell: ({ row, table }) => (
-      <MRT_TableBodyRowPinButton row={row} table={table} />
-    ),
+    Cell: ({ row, table }) => <MRT_TableBodyRowPinButton row={row} table={table} />,
     grow: false,
     ...defaultDisplayColumnProps({
       header: 'pin',

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -1,9 +1,5 @@
 import { MRT_SelectCheckbox } from '../../components/inputs/MRT_SelectCheckbox';
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
+import { type MRT_ColumnDef, type MRT_RowData, type MRT_StatefulTableOptions } from '../../types';
 import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
@@ -13,17 +9,11 @@ export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
 
   return {
     Cell: ({ row, staticRowIndex, table }) => (
-      <MRT_SelectCheckbox
-        row={row}
-        staticRowIndex={staticRowIndex}
-        table={table}
-      />
+      <MRT_SelectCheckbox row={row} staticRowIndex={staticRowIndex} table={table} />
     ),
     grow: false,
     Header:
-      enableSelectAll && enableMultiRowSelection
-        ? ({ table }) => <MRT_SelectCheckbox table={table} />
-        : undefined,
+      enableSelectAll && enableMultiRowSelection ? ({ table }) => <MRT_SelectCheckbox table={table} /> : undefined,
     ...defaultDisplayColumnProps({
       header: 'select',
       id: 'mrt-row-select',

package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx

@@ -1,8 +1,4 @@
-import {
-  type MRT_ColumnDef,
-  type MRT_RowData,
-  type MRT_StatefulTableOptions,
-} from '../../types';
+import { type MRT_ColumnDef, type MRT_RowData, type MRT_StatefulTableOptions } from '../../types';
 import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 import { MRT_DefaultDisplayColumn } from '../useMRT_TableOptions';
 

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -1,11 +1,7 @@
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
 import { useCallback, useMemo } from 'react';
 
-import {
-  type MRT_ColumnVirtualizer,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../types';
+import { type MRT_ColumnVirtualizer, type MRT_RowData, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../utils/utils';
 import { extraIndexRangeExtractor } from '../utils/virtualization.utils';
 
@@ -15,7 +11,7 @@ export const useMRT_ColumnVirtualizer = <
   TItemElement extends Element = HTMLTableCellElement,
 >(
   table: MRT_TableInstance<TData>,
-): MRT_ColumnVirtualizer | undefined => {
+): MRT_ColumnVirtualizer<TScrollElement, TItemElement> | undefined => {
   const {
     options: {
       columnVirtualizerInstanceRef,
@@ -25,16 +21,13 @@ export const useMRT_ColumnVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { columnPinning, columnVisibility, draggingColumn } = table.state;
+  const { draggingColumn } = table.state;
 
-  if (!enableColumnVirtualization) return undefined;
-
-  const columnVirtualizerProps = parseFromValuesOrFunc(
-    columnVirtualizerOptions,
-    {
-      table,
-    },
-  );
+  const columnVirtualizerProps = enableColumnVirtualization
+    ? parseFromValuesOrFunc(columnVirtualizerOptions, {
+        table,
+      })
+    : undefined;
 
   const visibleColumns = table.getVisibleLeafColumns();
 
@@ -42,33 +35,27 @@ export const useMRT_ColumnVirtualizer = <
     () =>
       enableColumnPinning
         ? [
-            visibleColumns
-              .filter((c) => c.getIsPinned() === 'start')
-              .map((c) => c.getPinnedIndex()),
+            visibleColumns.filter((c) => c.getIsPinned() === 'start').map((c) => c.getPinnedIndex()),
             visibleColumns
               .filter((c) => c.getIsPinned() === 'end')
-              .map(
-                (column) => visibleColumns.length - column.getPinnedIndex() - 1,
-              )
+              .map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
               .sort((a, b) => a - b),
           ]
         : [[], []],
-    [columnPinning, columnVisibility, enableColumnPinning],
+    [enableColumnPinning, visibleColumns],
   );
 
   const numPinnedLeft = leftPinnedIndexes.length;
   const numPinnedRight = rightPinnedIndexes.length;
 
   const draggingColumnIndex = useMemo(
-    () =>
-      draggingColumn?.id
-        ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id)
-        : undefined,
-    [draggingColumn?.id],
+    () => (draggingColumn?.id ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id) : undefined),
+    [draggingColumn?.id, visibleColumns],
   );
 
   const columnVirtualizer = useVirtualizer({
     count: visibleColumns.length,
+    enabled: !!enableColumnVirtualization,
     estimateSize: (index) => visibleColumns[index].getSize(),
     getScrollElement: () => tableContainerRef.current,
     horizontal: true,
@@ -79,48 +66,40 @@ export const useMRT_ColumnVirtualizer = <
         if (!numPinnedLeft && !numPinnedRight) {
           return newIndexes;
         }
-        return [
-          ...new Set([
-            ...leftPinnedIndexes,
-            ...newIndexes,
-            ...rightPinnedIndexes,
-          ]),
-        ];
+        return [...new Set([...leftPinnedIndexes, ...newIndexes, ...rightPinnedIndexes])];
       },
-      [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
+      [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex, numPinnedLeft, numPinnedRight],
     ),
     ...columnVirtualizerProps,
   }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>;
 
+  if (!enableColumnVirtualization) {
+    return undefined;
+  }
+
   const virtualColumns = columnVirtualizer.getVirtualItems();
-  columnVirtualizer.virtualColumns = virtualColumns as any;
+  columnVirtualizer.virtualColumns = virtualColumns;
   const numColumns = virtualColumns.length;
 
   if (numColumns) {
     const totalSize = columnVirtualizer.getTotalSize();
 
     const leftNonPinnedStart = virtualColumns[numPinnedLeft]?.start || 0;
-    const leftNonPinnedEnd =
-      virtualColumns[leftPinnedIndexes.length - 1]?.end || 0;
+    const leftNonPinnedEnd = virtualColumns[leftPinnedIndexes.length - 1]?.end || 0;
 
-    const rightNonPinnedStart =
-      virtualColumns[numColumns - numPinnedRight]?.start || 0;
-    const rightNonPinnedEnd =
-      virtualColumns[numColumns - numPinnedRight - 1]?.end || 0;
+    const rightNonPinnedStart = virtualColumns[numColumns - numPinnedRight]?.start || 0;
+    const rightNonPinnedEnd = virtualColumns[numColumns - numPinnedRight - 1]?.end || 0;
 
-    columnVirtualizer.virtualPaddingLeft =
-      leftNonPinnedStart - leftNonPinnedEnd;
+    columnVirtualizer.virtualPaddingLeft = leftNonPinnedStart - leftNonPinnedEnd;
 
     columnVirtualizer.virtualPaddingRight =
-      totalSize -
-      rightNonPinnedEnd -
-      (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
+      totalSize - rightNonPinnedEnd - (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
   }
 
   if (columnVirtualizerInstanceRef) {
-    //@ts-expect-error
+    // @ts-expect-error: the ref is typed for the default element generics, this virtualizer uses TScrollElement and TItemElement
     columnVirtualizerInstanceRef.current = columnVirtualizer;
   }
 
-  return columnVirtualizer as any;
+  return columnVirtualizer;
 };

package/src/hooks/useMRT_Effects.test.tsx

@@ -0,0 +1,114 @@
+import { act, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { MaterialReactTable } from '../components/MaterialReactTable';
+import { type MRT_ColumnDef } from '../types';
+
+interface Person {
+  age: number;
+  name: string;
+}
+
+const data: Person[] = [
+  { age: 30, name: 'John' },
+  { age: 25, name: 'Sara' },
+];
+
+const columns: MRT_ColumnDef<Person>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'age', header: 'Age' },
+];
+
+describe('pinned rows', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('the table stops re-rendering after mount', () => {
+    const muiTablePaperProps = vi.fn(() => ({}));
+
+    render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableRowPinning
+        initialState={{ rowPinning: { bottom: [], top: ['0'] } }}
+        muiTablePaperProps={muiTablePaperProps}
+      />,
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    const settledRenders = muiTablePaperProps.mock.calls.length;
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(muiTablePaperProps).toHaveBeenCalledTimes(settledRenders);
+  });
+});
+
+describe('controlled state effects', () => {
+  test('does not reset the column order again when the table re-renders', () => {
+    const onColumnOrderChange = vi.fn();
+    const table = (isLoading: boolean) => (
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        onColumnOrderChange={onColumnOrderChange}
+        state={{ columnOrder: ['name'], isLoading }}
+      />
+    );
+    const { rerender } = render(table(false));
+    const mountCalls = onColumnOrderChange.mock.calls.length;
+
+    rerender(table(true));
+    rerender(table(false));
+
+    expect(onColumnOrderChange).toHaveBeenCalledTimes(mountCalls);
+  });
+
+  test('does not clamp the page index again when the table re-renders', () => {
+    const onPaginationChange = vi.fn();
+    const table = (showProgressBars: boolean) => (
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        onPaginationChange={onPaginationChange}
+        state={{ pagination: { pageIndex: 5, pageSize: 10 }, showProgressBars }}
+      />
+    );
+    const { rerender } = render(table(false));
+    const mountCalls = onPaginationChange.mock.calls.length;
+
+    rerender(table(true));
+    rerender(table(false));
+
+    expect(onPaginationChange).toHaveBeenCalledTimes(mountCalls);
+  });
+
+  test('does not clear the sorting again when the table re-renders', () => {
+    const onSortingChange = vi.fn();
+    const table = (showProgressBars: boolean) => (
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        onSortingChange={onSortingChange}
+        state={{ globalFilter: 'John', showProgressBars, sorting: [] }}
+      />
+    );
+    const { rerender } = render(table(false));
+    const mountCalls = onSortingChange.mock.calls.length;
+
+    rerender(table(true));
+    rerender(table(false));
+
+    expect(onSortingChange).toHaveBeenCalledTimes(mountCalls);
+  });
+});