@cutting/material-react-table 4.0.5 → 5.0.0-beta.1

package/src/fns/tableFeatures.ts

@@ -0,0 +1,103 @@
+import {
+  type AggregationFnDef,
+  cellSelectionFeature,
+  cellSpanningFeature,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createExpandedRowModel,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  type FilterFn,
+  globalFilteringFeature,
+  rowAggregationFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  type SortFn,
+  type StockFeatures,
+  type TableFeature,
+  tableFeatures,
+} from '@tanstack/react-table';
+
+import { MRT_AggregationFns } from './aggregationFns';
+import { MRT_FilterFns } from './filterFns';
+import { MRT_SortingFns } from './sortingFns';
+
+const mrtFeature: TableFeature = {
+  getInitialState: (state) => ({
+    actionCell: null,
+    columnFilterFns: {},
+    creatingRow: null,
+    density: 'comfortable',
+    draggingColumn: null,
+    draggingRow: null,
+    editingCell: null,
+    editingRow: null,
+    globalFilterFn: 'fuzzy',
+    hoveredColumn: null,
+    hoveredRow: null,
+    isFullScreen: false,
+    isLoading: false,
+    isSaving: false,
+    showAlertBanner: false,
+    showColumnFilters: false,
+    showGlobalFilter: false,
+    showLoadingOverlay: false,
+    showProgressBars: false,
+    showSkeletons: false,
+    showToolbarDropZone: false,
+    ...state,
+  }),
+};
+
+export const MRT_DefaultTableFeatures = tableFeatures({
+  aggregationFns: MRT_AggregationFns,
+  cellSelectionFeature,
+  cellSpanningFeature,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  expandedRowModel: createExpandedRowModel(),
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: MRT_FilterFns,
+  globalFilteringFeature,
+  groupedRowModel: createGroupedRowModel(),
+  mrtFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowAggregationFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: MRT_SortingFns,
+});
+
+export interface MRT_TableFeatures extends StockFeatures {
+  aggregationFns: Record<string, AggregationFnDef<any, any, any, any>>;
+  filterFns: Record<string, FilterFn<any, any>>;
+  mrtFeature: TableFeature;
+  sortFns: Record<string, SortFn<any, any>>;
+}

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

@@ -46,7 +46,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
             <MRT_ExpandButton {...expandButtonProps} />
             <Tooltip
               {...getCommonTooltipProps('right')}
-              title={table.getColumn(row.groupingColumnId).columnDef.header}
+              title={table.getColumn(row.groupingColumnId)?.columnDef.header}
             >
               <span>{row.groupingValue as ReactNode}</span>
             </Tooltip>
@@ -71,7 +71,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
                 grouping
                   ?.map(
                     (groupedColumnId) =>
-                      table.getColumn(groupedColumnId).columnDef.header,
+                      table.getColumn(groupedColumnId)?.columnDef.header,
                   )
                   ?.join(', ')}
             </>

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -17,7 +17,6 @@ export const useMRT_ColumnVirtualizer = <
   table: MRT_TableInstance<TData>,
 ): MRT_ColumnVirtualizer | undefined => {
   const {
-    getState,
     options: {
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
@@ -26,7 +25,7 @@ export const useMRT_ColumnVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { columnPinning, columnVisibility, draggingColumn } = getState();
+  const { columnPinning, columnVisibility, draggingColumn } = table.state;
 
   if (!enableColumnVirtualization) return undefined;
 
@@ -43,9 +42,11 @@ export const useMRT_ColumnVirtualizer = <
     () =>
       enableColumnPinning
         ? [
-            table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-              .getRightVisibleLeafColumns()
+            visibleColumns
+              .filter((c) => c.getIsPinned() === 'start')
+              .map((c) => c.getPinnedIndex()),
+            visibleColumns
+              .filter((c) => c.getIsPinned() === 'end')
               .map(
                 (column) => visibleColumns.length - column.getPinnedIndex() - 1,
               )

package/src/hooks/useMRT_Effects.ts

@@ -13,8 +13,7 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
 ) => {
   const {
     getIsSomeRowsPinned,
-    getPrePaginationRowModel,
-    getState,
+    getPrePaginatedRowModel,
     options: { enablePagination, enableRowPinning, rowCount },
   } = table;
   const {
@@ -26,10 +25,10 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     pagination,
     showSkeletons,
     sorting,
-  } = getState();
+  } = table.state;
 
   const totalColumnCount = table.options.columns.length;
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const totalRowCount = rowCount ?? getPrePaginatedRowModel().rows.length;
 
   const rerender = useReducer(() => ({}), {})[1];
   const initialBodyHeight = useRef<string>(null);

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -20,7 +20,6 @@ export const useMRT_RowVirtualizer = <
 ): MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined => {
   const {
     getRowModel,
-    getState,
     options: {
       enableRowVirtualization,
       renderDetailPanel,
@@ -29,7 +28,7 @@ export const useMRT_RowVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { density, draggingRow, expanded } = getState();
+  const { density, draggingRow, expanded } = table.state;
 
   if (!enableRowVirtualization) return undefined;
 

package/src/hooks/useMRT_Rows.ts

@@ -12,7 +12,6 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
 ): MRT_Row<TData>[] => {
   const {
     getRowModel,
-    getState,
     options: { data, enableGlobalFilterRankedResults, positionCreatingRow },
   } = table;
   const {
@@ -22,7 +21,7 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
     pagination,
     rowPinning,
     sorting,
-  } = getState();
+  } = table.state;
 
   const rows = useMemo(
     () => getMRT_Rows(table),

package/src/hooks/useMRT_TableInstance.ts

@@ -1,6 +1,10 @@
-import { useReactTable } from '@tanstack/react-table';
+import { tableFeatures, useTable } from '@tanstack/react-table';
 import { useMemo, useRef, useState } from 'react';
 
+import {
+  MRT_DefaultTableFeatures,
+  type MRT_TableFeatures,
+} from '../fns/tableFeatures';
 import {
   type MRT_Cell,
   type MRT_Column,
@@ -110,9 +114,9 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
   const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(
     initialState.columnOrder ?? [],
   );
-  const [columnSizingInfo, onColumnSizingInfoChange] =
+  const [columnResizing, onColumnResizingChange] =
     useState<MRT_ColumnSizingInfoState>(
-      initialState.columnSizingInfo ?? ({} as MRT_ColumnSizingInfoState),
+      initialState.columnResizing ?? ({} as MRT_ColumnSizingInfoState),
     );
   const [density, setDensity] = useState<MRT_DensityState>(
     initialState?.density ?? 'comfortable',
@@ -163,7 +167,7 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     actionCell,
     columnFilterFns,
     columnOrder,
-    columnSizingInfo,
+    columnResizing,
     creatingRow,
     density,
     draggingColumn,
@@ -188,9 +192,9 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     definedTableOptions as MRT_StatefulTableOptions<TData>;
 
   //don't recompute columnDefs while resizing column or dragging column/row
-  const columnDefsRef = useRef<MRT_ColumnDef<TData>[]>([]);
+  const columnDefsRef = useRef<ReadonlyArray<MRT_ColumnDef<TData>>>([]);
   statefulTableOptions.columns =
-    statefulTableOptions.state.columnSizingInfo.isResizingColumn ||
+    statefulTableOptions.state.columnResizing.isResizingColumn ||
     statefulTableOptions.state.draggingColumn ||
     statefulTableOptions.state.draggingRow
       ? columnDefsRef.current
@@ -248,69 +252,84 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     ],
   );
 
-  //@ts-expect-error
-  const table = useReactTable({
+  const [features] = useState<MRT_TableFeatures>(() =>
+    tableFeatures({
+      ...MRT_DefaultTableFeatures,
+      aggregationFns: {
+        ...MRT_DefaultTableFeatures.aggregationFns,
+        ...statefulTableOptions.aggregationFns,
+      },
+      filterFns: {
+        ...MRT_DefaultTableFeatures.filterFns,
+        ...statefulTableOptions.filterFns,
+      },
+      sortFns: {
+        ...MRT_DefaultTableFeatures.sortFns,
+        ...statefulTableOptions.sortFns,
+      },
+    }),
+  );
+
+  const tableOptions = {
     onColumnOrderChange,
-    onColumnSizingInfoChange,
+    onColumnResizingChange,
     onGroupingChange,
     onPaginationChange,
     ...statefulTableOptions,
-    globalFilterFn: statefulTableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
-  }) as MRT_TableInstance<TData>;
-
-  table.refs = {
-    actionCellRef,
-    bottomToolbarRef,
-    editInputRefs,
-    filterInputRefs,
-    lastSelectedRowId,
-    searchInputRef,
-    tableContainerRef,
-    tableFooterRef,
-    tableHeadCellRefs,
-    tableHeadRef,
-    tablePaperRef,
-    topToolbarRef,
+    features,
+    globalFilterFn: globalFilterFn ?? 'fuzzy',
   };
 
-  table.setActionCell =
-    statefulTableOptions.onActionCellChange ?? setActionCell;
-  table.setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
-    let _row = row;
-    if (row === true) {
-      _row = createRow(table);
-    }
-    statefulTableOptions?.onCreatingRowChange?.(
-      _row as MRT_Row<TData> | null,
-    ) ?? _setCreatingRow(_row as MRT_Row<TData> | null);
-  };
-  table.setColumnFilterFns =
-    statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns;
-  table.setDensity = statefulTableOptions.onDensityChange ?? setDensity;
-  table.setDraggingColumn =
-    statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn;
-  table.setDraggingRow =
-    statefulTableOptions.onDraggingRowChange ?? setDraggingRow;
-  table.setEditingCell =
-    statefulTableOptions.onEditingCellChange ?? setEditingCell;
-  table.setEditingRow =
-    statefulTableOptions.onEditingRowChange ?? setEditingRow;
-  table.setGlobalFilterFn =
-    statefulTableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn;
-  table.setHoveredColumn =
-    statefulTableOptions.onHoveredColumnChange ?? setHoveredColumn;
-  table.setHoveredRow =
-    statefulTableOptions.onHoveredRowChange ?? setHoveredRow;
-  table.setIsFullScreen =
-    statefulTableOptions.onIsFullScreenChange ?? setIsFullScreen;
-  table.setShowAlertBanner =
-    statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner;
-  table.setShowColumnFilters =
-    statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters;
-  table.setShowGlobalFilter =
-    statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter;
-  table.setShowToolbarDropZone =
-    statefulTableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone;
+  const reactTable = useTable(tableOptions);
+
+  const table = Object.assign(reactTable, {
+    getLeftLeafColumns: () => reactTable.getStartLeafColumns(),
+    getPaginationRowModel: () => reactTable.getPaginatedRowModel(),
+    getRightLeafColumns: () => reactTable.getEndLeafColumns(),
+    refs: {
+      actionCellRef,
+      bottomToolbarRef,
+      editInputRefs,
+      filterInputRefs,
+      lastSelectedRowId,
+      searchInputRef,
+      tableContainerRef,
+      tableFooterRef,
+      tableHeadCellRefs,
+      tableHeadRef,
+      tablePaperRef,
+      topToolbarRef,
+    },
+    setActionCell: statefulTableOptions.onActionCellChange ?? setActionCell,
+    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);
+    },
+    setDensity: statefulTableOptions.onDensityChange ?? setDensity,
+    setDraggingColumn:
+      statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn,
+    setDraggingRow: statefulTableOptions.onDraggingRowChange ?? setDraggingRow,
+    setEditingCell: statefulTableOptions.onEditingCellChange ?? setEditingCell,
+    setEditingRow: statefulTableOptions.onEditingRowChange ?? setEditingRow,
+    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,
+  });
 
   useMRT_Effects(table);
 

package/src/hooks/useMRT_TableOptions.ts

@@ -1,15 +1,4 @@
 import { useTheme } from '@mui/material/styles';
-import {
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getGroupedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-} from '@tanstack/react-table';
 import { useId, useMemo } from 'react';
 
 import { MRT_AggregationFns } from '../fns/aggregationFns';
@@ -112,7 +101,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   rowNumberDisplayMode = 'static',
   rowPinningDisplayMode = 'sticky',
   selectAllMode = 'page',
-  sortingFns,
+  sortFns,
   ...rest
 }: MRT_TableOptions<TData>) => {
   const theme = useTheme();
@@ -131,7 +120,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     [],
   );
   filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
-  sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
+  sortFns = useMemo(() => ({ ...MRT_SortingFns, ...sortFns }), []);
   defaultColumn = useMemo(
     () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
     [defaultColumn],
@@ -221,29 +210,8 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableToolbarInternalActions,
     enableTopToolbar,
     filterFns,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel:
-      enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
-    getFacetedMinMaxValues: enableFacetedValues
-      ? getFacetedMinMaxValues()
-      : undefined,
-    getFacetedRowModel: enableFacetedValues ? getFacetedRowModel() : undefined,
-    getFacetedUniqueValues: enableFacetedValues
-      ? getFacetedUniqueValues()
-      : undefined,
-    getFilteredRowModel:
-      (enableColumnFilters || enableGlobalFilter || enableFilters) &&
-      !manualFiltering
-        ? getFilteredRowModel()
-        : undefined,
-    getGroupedRowModel:
-      enableGrouping && !manualGrouping ? getGroupedRowModel() : undefined,
-    getPaginationRowModel:
-      enablePagination && !manualPagination
-        ? getPaginationRowModel()
-        : undefined,
-    getSortedRowModel:
-      enableSorting && !manualSorting ? getSortedRowModel() : undefined,
+    getRowCanExpand:
+      rest.getRowCanExpand ?? (rest.renderDetailPanel ? () => true : undefined),
     getSubRows: (row) => row?.subRows,
     icons,
     id,
@@ -265,7 +233,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     rowNumberDisplayMode,
     rowPinningDisplayMode,
     selectAllMode,
-    sortingFns,
+    sortFns,
     ...rest,
   } as MRT_DefinedTableOptions<TData>;
 };

package/src/icons.ts

@@ -1,4 +1,4 @@
-import { ArrowDownward as ArrowDownwardIcon, ArrowRight as ArrowRightIcon, Cancel as CancelIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, ClearAll as ClearAllIcon, Close as CloseIcon, ContentCopy, DensityLarge as DensityLargeIcon, DensityMedium as DensityMediumIcon, DensitySmall as DensitySmallIcon, DragHandle as DragHandleIcon, DynamicFeed as DynamicFeedIcon, Edit as EditIcon, ExpandMore as ExpandMoreIcon, FilterAlt as FilterAltIcon, FilterList as FilterListIcon, FilterListOff as FilterListOffIcon, FirstPage as FirstPageIcon, Fullscreen as FullscreenIcon, FullscreenExit as FullscreenExitIcon, KeyboardDoubleArrowDown as KeyboardDoubleArrowDownIcon, LastPage as LastPageIcon, MoreHoriz as MoreHorizIcon, MoreVert as MoreVertIcon, PushPin as PushPinIcon, RestartAlt as RestartAltIcon, Save as SaveIcon, Search as SearchIcon, SearchOff as SearchOffIcon, Sort as SortIcon, SyncAlt as SyncAltIcon, ViewColumn as ViewColumnIcon, VisibilityOff as VisibilityOffIcon } from '@mui/icons-material';
+import { ArrowDownward as ArrowDownwardIcon, ArrowRight as ArrowRightIcon, Cancel as CancelIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, ClearAll as ClearAllIcon, Close as CloseIcon, ContentCopy, DensityLarge as DensityLargeIcon, DensityMedium as DensityMediumIcon, DensitySmall as DensitySmallIcon, DragHandle as DragHandleIcon, DynamicFeed as DynamicFeedIcon, Edit as EditIcon, ExpandMore as ExpandMoreIcon, FilterAlt as FilterAltIcon, FilterList as FilterListIcon, FilterListOff as FilterListOffIcon, FirstPage as FirstPageIcon, FullscreenExit as FullscreenExitIcon, Fullscreen as FullscreenIcon, KeyboardDoubleArrowDown as KeyboardDoubleArrowDownIcon, LastPage as LastPageIcon, MoreHoriz as MoreHorizIcon, MoreVert as MoreVertIcon, PushPin as PushPinIcon, RestartAlt as RestartAltIcon, Save as SaveIcon, Search as SearchIcon, SearchOff as SearchOffIcon, Sort as SortIcon, SyncAlt as SyncAltIcon, ViewColumn as ViewColumnIcon, VisibilityOff as VisibilityOffIcon } from '@mui/icons-material';
 export const MRT_Default_Icons = {
   ArrowDownwardIcon,
   ArrowRightIcon,