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

package/src/hooks/useMRT_Effects.ts

@@ -1,39 +1,29 @@
 import { useEffect, useReducer, useRef } from 'react';
 
-import {
-  type MRT_RowData,
-  type MRT_SortingState,
-  type MRT_TableInstance,
-} from '../types';
+import { type MRT_RowData, type MRT_SortingState, type MRT_TableInstance } from '../types';
 import { getDefaultColumnOrderIds } from '../utils/displayColumn.utils';
 import { getCanRankRows } from '../utils/row.utils';
 
-export const useMRT_Effects = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-) => {
+export const useMRT_Effects = <TData extends MRT_RowData>(table: MRT_TableInstance<TData>): void => {
   const {
-    getIsSomeRowsPinned,
     getPrePaginatedRowModel,
     options: { enablePagination, enableRowPinning, rowCount },
   } = table;
-  const {
-    columnOrder,
-    density,
-    globalFilter,
-    isFullScreen,
-    isLoading,
-    pagination,
-    showSkeletons,
-    sorting,
-  } = table.state;
+  const { columnOrder, density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting } =
+    table.state;
 
   const totalColumnCount = table.options.columns.length;
   const totalRowCount = rowCount ?? getPrePaginatedRowModel().rows.length;
 
-  const rerender = useReducer(() => ({}), {})[1];
+  const [, rerender] = useReducer(() => ({}), {});
   const initialBodyHeight = useRef<string>(null);
   const previousTop = useRef<number>(null);
 
+  const effectValues = useRef({ columnOrder, enableRowPinning, pagination, table, tableOptions: table.options });
+  useEffect(() => {
+    effectValues.current = { columnOrder, enableRowPinning, pagination, table, tableOptions: table.options };
+  });
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
       initialBodyHeight.current = document.body.style.height;
@@ -48,7 +38,9 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
         document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
       } else {
         document.body.style.height = initialBodyHeight.current as string;
-        if (!previousTop.current) return;
+        if (!previousTop.current) {
+          return;
+        }
         //restore scroll position
         window.scrollTo({
           behavior: 'instant',
@@ -60,17 +52,20 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
 
   //recalculate column order when columns change or features are toggled on/off
   useEffect(() => {
+    const { columnOrder, table, tableOptions } = effectValues.current;
     if (totalColumnCount !== columnOrder.length) {
-      table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+      table.setColumnOrder(getDefaultColumnOrderIds(tableOptions));
     }
   }, [totalColumnCount]);
 
   //if page index is out of bounds, set it to the last page
   useEffect(() => {
-    if (!enablePagination || isLoading || showSkeletons) return;
+    if (!enablePagination || isLoading || showSkeletons) {
+      return;
+    }
+    const { pagination, table } = effectValues.current;
     const { pageIndex, pageSize } = pagination;
-    const totalPages: number =
-      totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
+    const totalPages: number = totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
     const isOutOfBounds: boolean = pageIndex < 0 || pageIndex >= totalPages;
 
     if (isOutOfBounds) {
@@ -87,7 +82,10 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
   }, [sorting]);
 
   useEffect(() => {
-    if (!getCanRankRows(table)) return;
+    const { table } = effectValues.current;
+    if (!getCanRankRows(table)) {
+      return;
+    }
     if (globalFilter) {
       table.setSorting([]);
     } else {
@@ -97,7 +95,8 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
 
   //fix pinned row top style when density changes
   useEffect(() => {
-    if (enableRowPinning && getIsSomeRowsPinned()) {
+    const { enableRowPinning, table } = effectValues.current;
+    if (enableRowPinning && table.getIsSomeRowsPinned()) {
       setTimeout(() => {
         rerender();
       }, 150);

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -1,12 +1,7 @@
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
 import { useCallback, useMemo } from 'react';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_RowVirtualizer,
-  type MRT_TableInstance,
-} from '../types';
+import { type MRT_Row, type MRT_RowData, type MRT_RowVirtualizer, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../utils/utils';
 import { extraIndexRangeExtractor } from '../utils/virtualization.utils';
 
@@ -20,51 +15,37 @@ export const useMRT_RowVirtualizer = <
 ): MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined => {
   const {
     getRowModel,
-    options: {
-      enableRowVirtualization,
-      renderDetailPanel,
-      rowVirtualizerInstanceRef,
-      rowVirtualizerOptions,
-    },
+    options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions },
     refs: { tableContainerRef },
   } = table;
   const { density, draggingRow, expanded } = table.state;
 
-  if (!enableRowVirtualization) return undefined;
-
-  const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
-    table,
-  });
+  const rowVirtualizerProps = enableRowVirtualization
+    ? parseFromValuesOrFunc(rowVirtualizerOptions, {
+        table,
+      })
+    : undefined;
 
   const realRows = rows ?? getRowModel().rows;
   /**
    * when filtering, should find the correct index in filtered rows
    */
   const draggingRowIndex = useMemo(
-    () =>
-      draggingRow?.id
-        ? realRows.findIndex((r) => r.id === draggingRow?.id)
-        : undefined,
+    () => (draggingRow?.id ? realRows.findIndex((r) => r.id === draggingRow?.id) : undefined),
     [realRows, draggingRow?.id],
   );
 
   const rowCount = realRows.length;
 
-  const normalRowHeight =
-    density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
+  const normalRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
 
   const rowVirtualizer = useVirtualizer({
     count: renderDetailPanel ? rowCount * 2 : rowCount,
-    estimateSize: (index) =>
-      renderDetailPanel && index % 2 === 1
-        ? expanded === true
-          ? 100
-          : 0
-        : normalRowHeight,
+    enabled: !!enableRowVirtualization,
+    estimateSize: (index) => (renderDetailPanel && index % 2 === 1 ? (expanded === true ? 100 : 0) : normalRowHeight),
     getScrollElement: () => tableContainerRef.current,
     measureElement:
-      typeof window !== 'undefined' &&
-      navigator.userAgent.indexOf('Firefox') === -1
+      typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
         ? (element) => element?.getBoundingClientRect().height
         : undefined,
     overscan: 4,
@@ -77,10 +58,14 @@ export const useMRT_RowVirtualizer = <
     ...rowVirtualizerProps,
   }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>;
 
-  rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems() as any;
+  if (!enableRowVirtualization) {
+    return undefined;
+  }
+
+  rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
 
   if (rowVirtualizerInstanceRef) {
-    //@ts-expect-error
+    // @ts-expect-error: the ref is typed for the default element generics, this virtualizer uses TScrollElement and TItemElement
     rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 

package/src/hooks/useMRT_Rows.ts

@@ -1,44 +1,5 @@
-import { useMemo } from 'react';
-
-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 { getMRT_Rows } from '../utils/row.utils';
 
-export const useMRT_Rows = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-): MRT_Row<TData>[] => {
-  const {
-    getRowModel,
-    options: { data, enableGlobalFilterRankedResults, positionCreatingRow },
-  } = table;
-  const {
-    creatingRow,
-    expanded,
-    globalFilter,
-    pagination,
-    rowPinning,
-    sorting,
-  } = table.state;
-
-  const rows = useMemo(
-    () => getMRT_Rows(table),
-    [
-      creatingRow,
-      data,
-      enableGlobalFilterRankedResults,
-      expanded,
-      getRowModel().rows,
-      globalFilter,
-      pagination.pageIndex,
-      pagination.pageSize,
-      positionCreatingRow,
-      rowPinning,
-      sorting,
-    ],
-  );
-
-  return rows;
-};
+export const useMRT_Rows = <TData extends MRT_RowData>(table: MRT_TableInstance<TData>): MRT_Row<TData>[] =>
+  getMRT_Rows(table);

package/src/hooks/useMRT_TableInstance.ts

@@ -1,10 +1,7 @@
 import { tableFeatures, useTable } from '@tanstack/react-table';
 import { useMemo, useRef, useState } from 'react';
 
-import {
-  MRT_DefaultTableFeatures,
-  type MRT_TableFeatures,
-} from '../fns/tableFeatures';
+import { MRT_DefaultTableFeatures, type MRT_TableFeatures } from '../fns/tableFeatures';
 import {
   type MRT_Cell,
   type MRT_Column,
@@ -24,12 +21,7 @@ import {
   type MRT_TableState,
   type MRT_Updater,
 } from '../types';
-import {
-  getAllLeafColumnDefs,
-  getColumnId,
-  getDefaultColumnFilterFn,
-  prepareColumns,
-} from '../utils/column.utils';
+import { getAllLeafColumnDefs, getColumnId, getDefaultColumnFilterFn, prepareColumns } from '../utils/column.utils';
 import {
   getDefaultColumnOrderIds,
   showRowActionsColumn,
@@ -72,7 +64,7 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
   const tableFooterRef = useRef<HTMLTableSectionElement>(null);
 
   //transform initial state with proper column order
-  const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
+  const [initialState] = useState<Partial<MRT_TableState<TData>>>(() => {
     const initState = definedTableOptions.initialState ?? {};
     initState.columnOrder =
       initState.columnOrder ??
@@ -85,83 +77,46 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
       } as MRT_StatefulTableOptions<TData>);
     initState.globalFilterFn = definedTableOptions.globalFilterFn ?? 'fuzzy';
     return initState;
-  }, []);
+  });
 
   definedTableOptions.initialState = initialState;
 
-  const [actionCell, setActionCell] = useState<MRT_Cell<TData> | null>(
-    initialState.actionCell ?? null,
-  );
-  const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(
-    initialState.creatingRow ?? null,
-  );
-  const [columnFilterFns, setColumnFilterFns] =
-    useState<MRT_ColumnFilterFnsState>(() =>
-      Object.assign(
-        {},
-        ...getAllLeafColumnDefs(
-          definedTableOptions.columns as MRT_ColumnDef<TData>[],
-        ).map((col) => ({
-          [getColumnId(col)]:
-            col.filterFn instanceof Function
-              ? (col.filterFn.name ?? 'custom')
-              : (col.filterFn ??
-                initialState?.columnFilterFns?.[getColumnId(col)] ??
-                getDefaultColumnFilterFn(col)),
-        })),
-      ),
-    );
-  const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(
-    initialState.columnOrder ?? [],
-  );
-  const [columnResizing, onColumnResizingChange] =
-    useState<MRT_ColumnSizingInfoState>(
-      initialState.columnResizing ?? ({} as MRT_ColumnSizingInfoState),
-    );
-  const [density, setDensity] = useState<MRT_DensityState>(
-    initialState?.density ?? 'comfortable',
-  );
-  const [draggingColumn, setDraggingColumn] =
-    useState<MRT_Column<TData> | null>(initialState.draggingColumn ?? null);
-  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>(
-    initialState.draggingRow ?? null,
-  );
-  const [editingCell, setEditingCell] = useState<MRT_Cell<TData> | null>(
-    initialState.editingCell ?? null,
-  );
-  const [editingRow, setEditingRow] = useState<MRT_Row<TData> | null>(
-    initialState.editingRow ?? null,
+  const [actionCell, setActionCell] = useState<MRT_Cell<TData> | null>(initialState.actionCell ?? null);
+  const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(initialState.creatingRow ?? null);
+  const [columnFilterFns, setColumnFilterFns] = useState<MRT_ColumnFilterFnsState>(() =>
+    Object.assign(
+      {},
+      ...getAllLeafColumnDefs(definedTableOptions.columns as MRT_ColumnDef<TData>[]).map((col) => ({
+        [getColumnId(col)]:
+          col.filterFn instanceof Function
+            ? (col.filterFn.name ?? 'custom')
+            : (col.filterFn ?? initialState?.columnFilterFns?.[getColumnId(col)] ?? getDefaultColumnFilterFn(col)),
+      })),
+    ),
   );
-  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
-    initialState.globalFilterFn ?? 'fuzzy',
+  const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(initialState.columnOrder ?? []);
+  const [columnResizing, onColumnResizingChange] = useState<MRT_ColumnSizingInfoState>(
+    initialState.columnResizing ?? ({} as MRT_ColumnSizingInfoState),
   );
-  const [grouping, onGroupingChange] = useState<MRT_GroupingState>(
-    initialState.grouping ?? [],
-  );
-  const [hoveredColumn, setHoveredColumn] = useState<null | Partial<
-    MRT_Column<TData>
-  >>(initialState.hoveredColumn ?? null);
-  const [hoveredRow, setHoveredRow] = useState<null | Partial<MRT_Row<TData>>>(
-    initialState.hoveredRow ?? null,
-  );
-  const [isFullScreen, setIsFullScreen] = useState<boolean>(
-    initialState?.isFullScreen ?? false,
+  const [density, setDensity] = useState<MRT_DensityState>(initialState?.density ?? 'comfortable');
+  const [draggingColumn, setDraggingColumn] = useState<MRT_Column<TData> | null>(initialState.draggingColumn ?? null);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>(initialState.draggingRow ?? null);
+  const [editingCell, setEditingCell] = useState<MRT_Cell<TData> | null>(initialState.editingCell ?? null);
+  const [editingRow, setEditingRow] = useState<MRT_Row<TData> | null>(initialState.editingRow ?? null);
+  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(initialState.globalFilterFn ?? 'fuzzy');
+  const [grouping, onGroupingChange] = useState<MRT_GroupingState>(initialState.grouping ?? []);
+  const [hoveredColumn, setHoveredColumn] = useState<null | Partial<MRT_Column<TData>>>(
+    initialState.hoveredColumn ?? null,
   );
+  const [hoveredRow, setHoveredRow] = useState<null | Partial<MRT_Row<TData>>>(initialState.hoveredRow ?? null);
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(initialState?.isFullScreen ?? false);
   const [pagination, onPaginationChange] = useState<MRT_PaginationState>(
     initialState?.pagination ?? { pageIndex: 0, pageSize: 10 },
   );
-  const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
-    initialState?.showAlertBanner ?? false,
-  );
-  const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
-    initialState?.showColumnFilters ?? false,
-  );
-  const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(
-    initialState?.showGlobalFilter ?? false,
-  );
-  const [showToolbarDropZone, setShowToolbarDropZone] = useState<boolean>(
-    initialState?.showToolbarDropZone ?? false,
-  );
+  const [showAlertBanner, setShowAlertBanner] = useState<boolean>(initialState?.showAlertBanner ?? false);
+  const [showColumnFilters, setShowColumnFilters] = useState<boolean>(initialState?.showColumnFilters ?? false);
+  const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(initialState?.showGlobalFilter ?? false);
+  const [showToolbarDropZone, setShowToolbarDropZone] = useState<boolean>(initialState?.showToolbarDropZone ?? false);
 
   definedTableOptions.state = {
     actionCell,
@@ -188,8 +143,7 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
   };
 
   //The table options now include all state needed to help determine column visibility and order logic
-  const statefulTableOptions =
-    definedTableOptions as MRT_StatefulTableOptions<TData>;
+  const statefulTableOptions = definedTableOptions as MRT_StatefulTableOptions<TData>;
 
   //don't recompute columnDefs while resizing column or dragging column/row
   const columnDefsRef = useRef<ReadonlyArray<MRT_ColumnDef<TData>>>([]);
@@ -201,24 +155,17 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
       : prepareColumns({
           columnDefs: [
             ...([
-              showRowPinningColumn(statefulTableOptions) &&
-                getMRT_RowPinningColumnDef(statefulTableOptions),
-              showRowDragColumn(statefulTableOptions) &&
-                getMRT_RowDragColumnDef(statefulTableOptions),
-              showRowActionsColumn(statefulTableOptions) &&
-                getMRT_RowActionsColumnDef(statefulTableOptions),
-              showRowExpandColumn(statefulTableOptions) &&
-                getMRT_RowExpandColumnDef(statefulTableOptions),
-              showRowSelectionColumn(statefulTableOptions) &&
-                getMRT_RowSelectColumnDef(statefulTableOptions),
-              showRowNumbersColumn(statefulTableOptions) &&
-                getMRT_RowNumbersColumnDef(statefulTableOptions),
+              showRowPinningColumn(statefulTableOptions) && getMRT_RowPinningColumnDef(statefulTableOptions),
+              showRowDragColumn(statefulTableOptions) && getMRT_RowDragColumnDef(statefulTableOptions),
+              showRowActionsColumn(statefulTableOptions) && getMRT_RowActionsColumnDef(statefulTableOptions),
+              showRowExpandColumn(statefulTableOptions) && getMRT_RowExpandColumnDef(statefulTableOptions),
+              showRowSelectionColumn(statefulTableOptions) && getMRT_RowSelectColumnDef(statefulTableOptions),
+              showRowNumbersColumn(statefulTableOptions) && getMRT_RowNumbersColumnDef(statefulTableOptions),
             ].filter(Boolean) as MRT_ColumnDef<TData>[]),
             ...statefulTableOptions.columns,
-            ...([
-              showRowSpacerColumn(statefulTableOptions) &&
-                getMRT_RowSpacerColumnDef(statefulTableOptions),
-            ].filter(Boolean) as MRT_ColumnDef<TData>[]),
+            ...([showRowSpacerColumn(statefulTableOptions) && getMRT_RowSpacerColumnDef(statefulTableOptions)].filter(
+              Boolean,
+            ) as MRT_ColumnDef<TData>[]),
           ],
           tableOptions: statefulTableOptions,
         });
@@ -227,27 +174,21 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
   //if loading, generate blank rows to show skeleton loaders
   statefulTableOptions.data = useMemo(
     () =>
-      (statefulTableOptions.state.isLoading ||
-        statefulTableOptions.state.showSkeletons) &&
+      (statefulTableOptions.state.isLoading || statefulTableOptions.state.showSkeletons) &&
       !statefulTableOptions.data.length
-        ? [
-            ...Array(
-              Math.min(statefulTableOptions.state.pagination.pageSize, 20),
-            ).fill(null),
-          ].map(() =>
+        ? [...Array(Math.min(statefulTableOptions.state.pagination.pageSize, 20)).fill(null)].map(() =>
             Object.assign(
               {},
-              ...getAllLeafColumnDefs(statefulTableOptions.columns).map(
-                (col) => ({
-                  [getColumnId(col)]: null,
-                }),
-              ),
+              ...getAllLeafColumnDefs(columnDefsRef.current).map((col) => ({
+                [getColumnId(col)]: null,
+              })),
             ),
           )
         : statefulTableOptions.data,
     [
       statefulTableOptions.data,
       statefulTableOptions.state.isLoading,
+      statefulTableOptions.state.pagination.pageSize,
       statefulTableOptions.state.showSkeletons,
     ],
   );
@@ -301,35 +242,28 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
       topToolbarRef,
     },
     setActionCell: statefulTableOptions.onActionCellChange ?? setActionCell,
-    setColumnFilterFns:
-      statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns,
+    setColumnFilterFns: statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns,
     setCreatingRow: (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
       const nextRow = row === true ? createRow(table) : row;
-      statefulTableOptions?.onCreatingRowChange?.(
-        nextRow as MRT_Row<TData> | null,
-      ) ?? _setCreatingRow(nextRow as MRT_Row<TData> | null);
+      const handled = statefulTableOptions?.onCreatingRowChange?.(nextRow as MRT_Row<TData> | null);
+      if (handled === undefined || handled === null) {
+        _setCreatingRow(nextRow as MRT_Row<TData> | null);
+      }
     },
     setDensity: statefulTableOptions.onDensityChange ?? setDensity,
-    setDraggingColumn:
-      statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn,
+    setDraggingColumn: statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn,
     setDraggingRow: statefulTableOptions.onDraggingRowChange ?? setDraggingRow,
     setEditingCell: statefulTableOptions.onEditingCellChange ?? setEditingCell,
     setEditingRow: statefulTableOptions.onEditingRowChange ?? setEditingRow,
-    setGlobalFilterFn:
-      statefulTableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn,
-    setHoveredColumn:
-      statefulTableOptions.onHoveredColumnChange ?? setHoveredColumn,
+    setGlobalFilterFn: statefulTableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn,
+    setHoveredColumn: statefulTableOptions.onHoveredColumnChange ?? setHoveredColumn,
     setHoveredRow: statefulTableOptions.onHoveredRowChange ?? setHoveredRow,
     setIsFullScreen: statefulTableOptions.onIsFullScreenChange ?? setIsFullScreen,
-    setShowAlertBanner:
-      statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner,
-    setShowColumnFilters:
-      statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters,
-    setShowGlobalFilter:
-      statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter,
-    setShowToolbarDropZone:
-      statefulTableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
-  });
+    setShowAlertBanner: statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner,
+    setShowColumnFilters: statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters,
+    setShowGlobalFilter: statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter,
+    setShowToolbarDropZone: statefulTableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
+  }) as MRT_TableInstance<TData>;
 
   useMRT_Effects(table);
 

package/src/hooks/useMRT_TableOptions.ts

@@ -1,16 +1,12 @@
 import { useTheme } from '@mui/material/styles';
-import { useId, useMemo } from 'react';
+import { useId, useMemo, useState } from 'react';
 
 import { MRT_AggregationFns } from '../fns/aggregationFns';
 import { MRT_FilterFns } from '../fns/filterFns';
 import { MRT_SortingFns } from '../fns/sortingFns';
 import { MRT_Default_Icons } from '../icons';
 import { MRT_Localization_EN } from '../locales/en';
-import {
-  type MRT_DefinedTableOptions,
-  type MRT_RowData,
-  type MRT_TableOptions,
-} from '../types';
+import { type MRT_DefinedTableOptions, type MRT_RowData, type MRT_TableOptions } from '../types';
 import { getMRTTheme } from '../utils/style.utils';
 
 export const MRT_DefaultColumn = {
@@ -115,16 +111,11 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     [localization],
   );
   mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
-  aggregationFns = useMemo(
-    () => ({ ...MRT_AggregationFns, ...aggregationFns }),
-    [],
-  );
-  filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
-  sortFns = useMemo(() => ({ ...MRT_SortingFns, ...sortFns }), []);
-  defaultColumn = useMemo(
-    () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
-    [defaultColumn],
-  );
+  //cannot be changed after initialization
+  [aggregationFns] = useState(() => ({ ...MRT_AggregationFns, ...aggregationFns }));
+  [filterFns] = useState(() => ({ ...MRT_FilterFns, ...filterFns }));
+  [sortFns] = useState(() => ({ ...MRT_SortingFns, ...sortFns }));
+  defaultColumn = useMemo(() => ({ ...MRT_DefaultColumn, ...defaultColumn }), [defaultColumn]);
   defaultDisplayColumn = useMemo(
     () => ({
       ...MRT_DefaultDisplayColumn,
@@ -133,21 +124,17 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     [defaultDisplayColumn],
   );
   //cannot be changed after initialization
-  [enableColumnVirtualization, enableRowVirtualization] = useMemo(
-    () => [enableColumnVirtualization, enableRowVirtualization],
-    [],
-  );
+  [[enableColumnVirtualization, enableRowVirtualization]] = useState(() => [
+    enableColumnVirtualization,
+    enableRowVirtualization,
+  ]);
 
   if (!columnResizeDirection) {
     columnResizeDirection = theme.direction || 'ltr';
   }
 
-  layoutMode =
-    layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
-  if (
-    layoutMode === 'semantic' &&
-    (enableRowVirtualization || enableColumnVirtualization)
-  ) {
+  layoutMode = layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
+  if (layoutMode === 'semantic' && (enableRowVirtualization || enableColumnVirtualization)) {
     layoutMode = 'grid';
   }
 
@@ -210,9 +197,8 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableToolbarInternalActions,
     enableTopToolbar,
     filterFns,
-    getRowCanExpand:
-      rest.getRowCanExpand ?? (rest.renderDetailPanel ? () => true : undefined),
-    getSubRows: (row) => row?.subRows,
+    getRowCanExpand: rest.getRowCanExpand ?? (rest.renderDetailPanel ? () => true : undefined),
+    getSubRows: (row) => ('subRows' in row ? (row.subRows as TData[] | undefined) : undefined),
     icons,
     id,
     layoutMode,

package/src/hooks/useMaterialReactTable.ts

@@ -1,12 +1,7 @@
-import {
-  type MRT_RowData,
-  type MRT_TableInstance,
-  type MRT_TableOptions,
-} from '../types';
+import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions } from '../types';
 import { useMRT_TableInstance } from './useMRT_TableInstance';
 import { useMRT_TableOptions } from './useMRT_TableOptions';
 
 export const useMaterialReactTable = <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,
-): MRT_TableInstance<TData> =>
-  useMRT_TableInstance(useMRT_TableOptions(tableOptions));
+): MRT_TableInstance<TData> => useMRT_TableInstance(useMRT_TableOptions(tableOptions));