material-react-table 2.7.0 → 2.8.0

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

@@ -0,0 +1,96 @@
+import { type ReactNode } from 'react';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+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 {
+  defaultDisplayColumnProps,
+  showRowExpandColumn,
+} from '../../utils/displayColumn.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
+
+export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData> | null => {
+  if (!showRowExpandColumn(tableOptions)) {
+    return null;
+  }
+
+  const {
+    defaultColumn,
+    enableExpandAll,
+    groupedColumnMode,
+    positionExpandColumn,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+
+  const alignProps =
+    positionExpandColumn === 'last'
+      ? ({
+          align: 'right',
+        } as const)
+      : undefined;
+
+  return {
+    Cell: ({ cell, column, row, staticRowIndex, table }) => {
+      const expandButtonProps = { row, staticRowIndex, table };
+      const subRowsLength = row.subRows?.length;
+      if (groupedColumnMode === 'remove' && row.groupingColumnId) {
+        return (
+          <Stack alignItems="center" flexDirection="row" gap="0.25rem">
+            <MRT_ExpandButton {...expandButtonProps} />
+            <Tooltip
+              {...getCommonTooltipProps('right')}
+              title={table.getColumn(row.groupingColumnId).columnDef.header}
+            >
+              <span>{row.groupingValue as ReactNode}</span>
+            </Tooltip>
+            {!!subRowsLength && <span>({subRowsLength})</span>}
+          </Stack>
+        );
+      } else {
+        return (
+          <>
+            <MRT_ExpandButton {...expandButtonProps} />
+            {column.columnDef.GroupedCell?.({ cell, column, row, table })}
+          </>
+        );
+      }
+    },
+    Header: enableExpandAll
+      ? ({ table }) => {
+          return (
+            <>
+              <MRT_ExpandAllButton table={table} />
+              {groupedColumnMode === 'remove' &&
+                grouping
+                  ?.map(
+                    (groupedColumnId) =>
+                      table.getColumn(groupedColumnId).columnDef.header,
+                  )
+                  ?.join(', ')}
+            </>
+          );
+        }
+      : undefined,
+    muiTableBodyCellProps: alignProps,
+    muiTableHeadCellProps: alignProps,
+    ...defaultDisplayColumnProps({
+      header: 'expand',
+      id: 'mrt-row-expand',
+      size:
+        groupedColumnMode === 'remove'
+          ? defaultColumn?.size
+          : renderDetailPanel
+            ? 60
+            : 100,
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,36 @@
+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',
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,30 @@
+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',
+      tableOptions,
+    }),
+  };
+};

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

@@ -0,0 +1,40 @@
+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 selectAll table={table} />
+        : undefined,
+    grow: false,
+    ...defaultDisplayColumnProps({
+      header: 'select',
+      id: 'mrt-row-select',
+      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,

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,

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,

package/src/hooks/useMRT_TableOptions.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_FilterFns } from '../filterFns';
+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 { MRT_SortingFns } from '../sortingFns';
 import {
   type MRT_DefinedTableOptions,
   type MRT_RowData,

package/src/{useMaterialReactTable.ts → hooks/useMaterialReactTable.ts}

@@ -1,10 +1,10 @@
-import { useMRT_TableInstance } from './hooks/useMRT_TableInstance';
-import { useMRT_TableOptions } from './hooks/useMRT_TableOptions';
 import {
   type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
-} from './types';
+} 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>,