material-react-table 2.7.0 → 2.9.0

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

@@ -0,0 +1,37 @@
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowNumbersColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowNumbersColumn(tableOptions)) {
+    return null;
+  }
+
+  const { localization, rowNumberDisplayMode } = tableOptions;
+  const {
+    pagination: { pageIndex, pageSize },
+  } = tableOptions.state;
+
+  return {
+    Cell: ({ row, staticRowIndex }) =>
+      ((rowNumberDisplayMode === 'static'
+        ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
+        : row.index) ?? 0) + 1,
+    Header: () => localization.rowNumber,
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'rowNumbers',
+      id: 'mrt-row-numbers',
+      size: 50,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,31 @@
+import { MRT_TableBodyRowPinButton } from '../../components/body/MRT_TableBodyRowPinButton';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowPinningColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowPinningColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    Cell: ({ row, table }) => (
+      <MRT_TableBodyRowPinButton row={row} table={table} />
+    ),
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'pin',
+      id: 'mrt-row-pin',
+      size: 60,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,41 @@
+import { MRT_SelectCheckbox } from '../../components/inputs/MRT_SelectCheckbox';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowSelectionColumn,
+} from '../../utils/displayColumn.utils';
+
+export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowSelectionColumn(tableOptions)) {
+    return null;
+  }
+
+  const { enableMultiRowSelection, enableSelectAll } = tableOptions;
+
+  return {
+    Cell: ({ row, staticRowIndex, table }) => (
+      <MRT_SelectCheckbox
+        row={row}
+        staticRowIndex={staticRowIndex}
+        table={table}
+      />
+    ),
+    Header:
+      enableSelectAll && enableMultiRowSelection
+        ? ({ table }) => <MRT_SelectCheckbox table={table} />
+        : undefined,
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'select',
+      id: 'mrt-row-select',
+      size: enableSelectAll ? 60 : 70,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,40 @@
+import { MRT_DefaultDisplayColumn } from '../useMRT_TableOptions';
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import {
+  defaultDisplayColumnProps,
+  showRowSpacerColumn,
+} from '../../utils/displayColumn.utils';
+
+const blankColProps = {
+  children: null,
+  sx: {
+    minWidth: 0,
+    p: 0,
+    width: 0,
+  },
+};
+
+export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowSpacerColumn(tableOptions)) {
+    return null;
+  }
+
+  return {
+    ...defaultDisplayColumnProps({
+      id: 'mrt-row-spacer',
+      size: 0,
+      tableOptions,
+    }),
+    grow: true,
+    ...MRT_DefaultDisplayColumn,
+    muiTableBodyCellProps: blankColProps,
+    muiTableFooterCellProps: blankColProps,
+    muiTableHeadCellProps: blankColProps,
+  };
+};

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -1,14 +1,12 @@
 import { useCallback, useMemo } from 'react';
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
-import {
-  extraIndexRangeExtractor,
-  parseFromValuesOrFunc,
-} from '../column.utils';
 import {
   type MRT_ColumnVirtualizer,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
+import { parseFromValuesOrFunc } from '../utils/utils';
+import { extraIndexRangeExtractor } from '../utils/virtualization.utils';
 
 export const useMRT_ColumnVirtualizer = <
   TData extends MRT_RowData,
@@ -18,7 +16,10 @@ export const useMRT_ColumnVirtualizer = <
   table: MRT_TableInstance<TData>,
 ): MRT_ColumnVirtualizer | undefined => {
   const {
+    getLeftLeafColumns,
+    getRightLeafColumns,
     getState,
+    getVisibleLeafColumns,
     options: {
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
@@ -27,7 +28,9 @@ export const useMRT_ColumnVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { columnPinning, columnVisibility, draggingColumn } = getState();
+  const { columnPinning, draggingColumn } = getState();
+
+  if (!enableColumnVirtualization) return undefined;
 
   const columnVirtualizerProps = parseFromValuesOrFunc(
     columnVirtualizerOptions,
@@ -36,91 +39,87 @@ export const useMRT_ColumnVirtualizer = <
     },
   );
 
+  const visibleColumns = getVisibleLeafColumns();
+
   const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
-      enableColumnVirtualization && enableColumnPinning
+      enableColumnPinning
         ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-              .getRightLeafColumns()
+            getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            getRightLeafColumns()
               .map(
-                (c) =>
-                  table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
+                (column) => visibleColumns.length - column.getPinnedIndex() - 1,
               )
               .sort((a, b) => a - b),
           ]
         : [[], []],
-    [columnPinning, enableColumnVirtualization, enableColumnPinning],
+    [columnPinning, enableColumnPinning],
+  );
+
+  const numPinnedLeft = leftPinnedIndexes.length;
+  const numPinnedRight = rightPinnedIndexes.length;
+
+  const draggingColumnIndex = useMemo(
+    () =>
+      draggingColumn?.id
+        ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id)
+        : undefined,
+    [draggingColumn?.id],
   );
 
-  //get first 16 column widths and average them if calc is needed
-  const averageColumnWidth = useMemo(() => {
-    if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize) {
-      return 0;
-    }
-    const columnsWidths =
-      table
-        .getRowModel()
-        .rows[0]?.getCenterVisibleCells()
-        ?.slice(0, 16)
-        ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
-    return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
-  }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-
-  const draggingColumnIndex = draggingColumn?.id
-    ? table
-        .getVisibleLeafColumns()
-        .findIndex((c) => c.id === draggingColumn?.id)
-    : undefined;
-
-  const columnVirtualizer = enableColumnVirtualization
-    ? (useVirtualizer({
-        count: table.getVisibleLeafColumns().length,
-        estimateSize: () => averageColumnWidth,
-        getScrollElement: () => tableContainerRef.current,
-        horizontal: true,
-        overscan: 3,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            const newIndexes = extraIndexRangeExtractor(
-              range,
-              draggingColumnIndex,
-            );
-            return [
-              ...new Set([
-                ...leftPinnedIndexes,
-                ...newIndexes,
-                ...rightPinnedIndexes,
-              ]),
-            ];
-          },
-          [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
-        ),
-        ...columnVirtualizerProps,
-      }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>)
-    : undefined;
-
-  if (columnVirtualizer) {
-    const virtualColumns = columnVirtualizer.getVirtualItems();
-    columnVirtualizer.virtualColumns = virtualColumns;
-    if (virtualColumns.length) {
-      columnVirtualizer.virtualPaddingLeft =
-        (virtualColumns[leftPinnedIndexes.length]?.start ?? 0) -
-        (virtualColumns[leftPinnedIndexes.length - 1]?.end ?? 0);
-      columnVirtualizer.virtualPaddingRight =
-        columnVirtualizer.getTotalSize() -
-        (virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]
-          ?.end ?? 0) -
-        (rightPinnedIndexes.length
-          ? columnVirtualizer.getTotalSize() -
-            (virtualColumns[virtualColumns.length - rightPinnedIndexes.length]
-              ?.start ?? 0)
-          : 0);
-    }
-    if (columnVirtualizerInstanceRef) {
-      //@ts-ignore
-      columnVirtualizerInstanceRef.current = columnVirtualizer;
-    }
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(),
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    overscan: 3,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
+        if (!numPinnedLeft && !numPinnedRight) {
+          return newIndexes;
+        }
+        return [
+          ...new Set([
+            ...leftPinnedIndexes,
+            ...newIndexes,
+            ...rightPinnedIndexes,
+          ]),
+        ];
+      },
+      [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
+    ),
+    ...columnVirtualizerProps,
+  }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>;
+
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  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 rightNonPinnedStart =
+      virtualColumns[numColumns - numPinnedRight]?.start || 0;
+    const rightNonPinnedEnd =
+      virtualColumns[numColumns - numPinnedRight - 1]?.end || 0;
+
+    columnVirtualizer.virtualPaddingLeft =
+      leftNonPinnedStart - leftNonPinnedEnd;
+
+    columnVirtualizer.virtualPaddingRight =
+      totalSize -
+      rightNonPinnedEnd -
+      (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
+  }
+
+  if (columnVirtualizerInstanceRef) {
+    //@ts-ignore
+    columnVirtualizerInstanceRef.current = columnVirtualizer;
   }
 
   return columnVirtualizer as any;

package/src/hooks/useMRT_Effects.ts

@@ -1,10 +1,10 @@
 import { useEffect, useReducer, useRef } from 'react';
-import { getCanRankRows } from '../column.utils';
 import {
   type MRT_RowData,
   type MRT_SortingState,
   type MRT_TableInstance,
 } from '../types';
+import { getCanRankRows } from '../utils/row.utils';
 
 export const useMRT_Effects = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -1,15 +1,13 @@
 import { useCallback } from 'react';
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
-import {
-  extraIndexRangeExtractor,
-  parseFromValuesOrFunc,
-} from '../column.utils';
 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';
 
 export const useMRT_RowVirtualizer = <
   TData extends MRT_RowData,
@@ -32,6 +30,8 @@ export const useMRT_RowVirtualizer = <
   } = table;
   const { density, draggingRow, expanded } = getState();
 
+  if (!enableRowVirtualization) return undefined;
+
   const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
     table,
   });
@@ -41,39 +41,35 @@ export const useMRT_RowVirtualizer = <
   const normalRowHeight =
     density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
 
-  const rowVirtualizer = enableRowVirtualization
-    ? (useVirtualizer({
-        count: renderDetailPanel ? rowCount * 2 : rowCount,
-        estimateSize: (index) =>
-          renderDetailPanel && index % 2 === 1
-            ? expanded === true
-              ? 100
-              : 0
-            : normalRowHeight,
-        getScrollElement: () => tableContainerRef.current,
-        measureElement:
-          typeof window !== 'undefined' &&
-          navigator.userAgent.indexOf('Firefox') === -1
-            ? (element) => element?.getBoundingClientRect().height
-            : undefined,
-        overscan: 4,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
-          },
-          [draggingRow],
-        ),
-        ...rowVirtualizerProps,
-      }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>)
-    : undefined;
+  const rowVirtualizer = useVirtualizer({
+    count: renderDetailPanel ? rowCount * 2 : rowCount,
+    estimateSize: (index) =>
+      renderDetailPanel && index % 2 === 1
+        ? expanded === true
+          ? 100
+          : 0
+        : normalRowHeight,
+    getScrollElement: () => tableContainerRef.current,
+    measureElement:
+      typeof window !== 'undefined' &&
+      navigator.userAgent.indexOf('Firefox') === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+    overscan: 4,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+      },
+      [draggingRow],
+    ),
+    ...rowVirtualizerProps,
+  }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>;
+
+  rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
 
-  if (rowVirtualizer) {
-    const virtualRows = rowVirtualizer.getVirtualItems();
-    rowVirtualizer.virtualRows = virtualRows;
-    if (rowVirtualizerInstanceRef) {
-      //@ts-ignore
-      rowVirtualizerInstanceRef.current = rowVirtualizer;
-    }
+  if (rowVirtualizerInstanceRef) {
+    //@ts-ignore
+    rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 
   return rowVirtualizer;

package/src/hooks/useMRT_Rows.ts

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
-import { getCanRankRows } from '../column.utils';
-import { rankGlobalFuzzy } from '../sortingFns';
+import { rankGlobalFuzzy } from '../fns/sortingFns';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
+import { getCanRankRows } from '../utils/row.utils';
 
 export const useMRT_Rows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,

package/src/hooks/useMRT_TableInstance.ts

@@ -11,20 +11,13 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import {
-  createRow,
-  getAllLeafColumnDefs,
-  getColumnId,
-  getDefaultColumnFilterFn,
-  getDefaultColumnOrderIds,
-  prepareColumns,
-} from '../column.utils';
 import {
   type MRT_Cell,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnFilterFnsState,
   type MRT_ColumnOrderState,
+  type MRT_ColumnSizingInfoState,
   type MRT_DefinedTableOptions,
   type MRT_DensityState,
   type MRT_FilterOption,
@@ -32,18 +25,25 @@ import {
   type MRT_PaginationState,
   type MRT_Row,
   type MRT_RowData,
+  type MRT_StatefulTableOptions,
   type MRT_TableInstance,
   type MRT_TableState,
   type MRT_Updater,
 } from '../types';
-import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
+import {
+  getAllLeafColumnDefs,
+  getColumnId,
+  getDefaultColumnFilterFn,
+  prepareColumns,
+} from '../utils/column.utils';
+import { getDefaultColumnOrderIds } from '../utils/displayColumn.utils';
+import { createRow } from '../utils/tanstack.helpers';
+import { getMRT_DisplayColumns } from './display-columns/getMRT_DisplayColumns';
 import { useMRT_Effects } from './useMRT_Effects';
 
-export const useMRT_TableInstance: <TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-) => MRT_TableInstance<TData> = <TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-) => {
+export const useMRT_TableInstance = <TData extends MRT_RowData>(
+  _tableOptions: MRT_DefinedTableOptions<TData>,
+): MRT_TableInstance<TData> => {
   const bottomToolbarRef = useRef<HTMLDivElement>(null);
   const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
   const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
@@ -56,14 +56,18 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
   const tableFooterRef = useRef<HTMLTableSectionElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
-    const initState = tableOptions.initialState ?? {};
+    const initState = _tableOptions.initialState ?? {};
     initState.columnOrder =
-      initState.columnOrder ?? getDefaultColumnOrderIds(tableOptions);
-    initState.globalFilterFn = tableOptions.globalFilterFn ?? 'fuzzy';
+      initState.columnOrder ??
+      getDefaultColumnOrderIds({
+        ..._tableOptions,
+        state: { ..._tableOptions.initialState, ..._tableOptions.state },
+      } as MRT_StatefulTableOptions<TData>);
+    initState.globalFilterFn = _tableOptions.globalFilterFn ?? 'fuzzy';
     return initState;
   }, []);
 
-  tableOptions.initialState = initialState;
+  _tableOptions.initialState = initialState;
 
   const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(
     initialState.creatingRow ?? null,
@@ -73,7 +77,7 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
       Object.assign(
         {},
         ...getAllLeafColumnDefs(
-          tableOptions.columns as MRT_ColumnDef<TData>[],
+          _tableOptions.columns as MRT_ColumnDef<TData>[],
         ).map((col) => ({
           [getColumnId(col)]:
             col.filterFn instanceof Function
@@ -87,6 +91,10 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
   const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(
     initialState.columnOrder ?? [],
   );
+  const [columnSizingInfo, onColumnSizingInfoChange] =
+    useState<MRT_ColumnSizingInfoState>(
+      initialState.columnSizingInfo ?? ({} as MRT_ColumnSizingInfoState),
+    );
   const [density, setDensity] = useState<MRT_DensityState>(
     initialState?.density ?? 'comfortable',
   );
@@ -120,7 +128,7 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     initialState?.pagination ?? { pageIndex: 0, pageSize: 10 },
   );
   const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
-    tableOptions.initialState?.showAlertBanner ?? false,
+    initialState?.showAlertBanner ?? false,
   );
   const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
     initialState?.showColumnFilters ?? false,
@@ -132,9 +140,10 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     initialState?.showToolbarDropZone ?? false,
   );
 
-  tableOptions.state = {
+  _tableOptions.state = {
     columnFilterFns,
     columnOrder,
+    columnSizingInfo,
     creatingRow,
     density,
     draggingColumn,
@@ -151,30 +160,35 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     showColumnFilters,
     showGlobalFilter,
     showToolbarDropZone,
-    ...tableOptions.state,
+    ..._tableOptions.state,
   };
 
-  const displayColumns = useMRT_DisplayColumns(tableOptions);
+  const tableOptions = _tableOptions as MRT_StatefulTableOptions<TData>;
 
-  tableOptions.columns = useMemo(
-    () =>
-      prepareColumns({
-        columnDefs: [...displayColumns, ...tableOptions.columns],
-        tableOptions,
-      }),
-    [displayColumns, tableOptions.columns],
-  );
+  //don't recompute columnDefs while resizing column or dragging column/row
+  const columnDefsRef = useRef<MRT_ColumnDef<TData>[]>([]);
+  tableOptions.columns =
+    tableOptions.state.columnSizingInfo.isResizingColumn ||
+    tableOptions.state.draggingColumn ||
+    tableOptions.state.draggingRow
+      ? columnDefsRef.current
+      : prepareColumns({
+          columnDefs: [
+            ...getMRT_DisplayColumns(tableOptions),
+            ...tableOptions.columns,
+          ],
+          tableOptions,
+        });
+  columnDefsRef.current = tableOptions.columns;
 
   tableOptions.data = useMemo(
     () =>
-      (tableOptions.state?.isLoading || tableOptions.state?.showSkeletons) &&
+      (tableOptions.state.isLoading || tableOptions.state.showSkeletons) &&
       !tableOptions.data.length
         ? [
-            ...Array(
-              tableOptions.state?.pagination?.pageSize ||
-                initialState?.pagination?.pageSize ||
-                10,
-            ).fill(null),
+            ...Array(Math.min(tableOptions.state.pagination.pageSize, 20)).fill(
+              null,
+            ),
           ].map(() =>
             Object.assign(
               {},
@@ -186,8 +200,8 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
         : tableOptions.data,
     [
       tableOptions.data,
-      tableOptions.state?.isLoading,
-      tableOptions.state?.showSkeletons,
+      tableOptions.state.isLoading,
+      tableOptions.state.showSkeletons,
     ],
   );
 
@@ -224,6 +238,7 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
       : undefined,
     getSubRows: (row) => row?.subRows,
     onColumnOrderChange,
+    onColumnSizingInfoChange,
     onGroupingChange,
     onPaginationChange,
     ...tableOptions,