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

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,