@lminii/material-react-table 4.0.0

package/src/features/mrtEditingFeature.ts

@@ -0,0 +1,102 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+import { type MRT_Cell, type MRT_Row } from '../types';
+import { createRow } from '../utils/tanstack.helpers';
+
+export interface MRT_Table_Editing<TData extends RowData> {
+  setCreatingRow: (updater: Updater<MRT_Row<TData> | null | true>) => void;
+  setEditingCell: (updater: Updater<MRT_Cell<TData> | null>) => void;
+  setEditingRow: (updater: Updater<MRT_Row<TData> | null>) => void;
+}
+
+export interface MRT_TableOptions_Editing<TData extends RowData> {
+  onCreatingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+  onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
+  onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+}
+
+export interface MRT_TableState_Editing {
+  creatingRow: MRT_Row<any> | null;
+  editingCell: MRT_Cell<any> | null;
+  editingRow: MRT_Row<any> | null;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtEditingFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtEditingFeature: MRT_Table_Editing<TData>;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtEditingFeature: MRT_TableOptions_Editing<TData>;
+  }
+  interface TableState_FeatureMap {
+    mrtEditingFeature: MRT_TableState_Editing;
+  }
+}
+
+export const mrtEditingFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtEditingFeature', table, {
+      table_setCreatingRow: {
+        fn: (updater: Updater<MRT_Row<any> | null | true>) =>
+          (
+            table.options as MRT_TableOptions_Editing<any>
+          ).onCreatingRowChange?.((old) => {
+            const next = functionalUpdate(
+              updater,
+              old as MRT_Row<any> | null | true,
+            );
+            return next === true ? createRow(table as any) : next;
+          }),
+      },
+      table_setEditingCell: {
+        fn: (updater: Updater<MRT_Cell<any> | null>) =>
+          (
+            table.options as MRT_TableOptions_Editing<any>
+          ).onEditingCellChange?.((old) => functionalUpdate(updater, old)),
+      },
+      table_setEditingRow: {
+        fn: (updater: Updater<MRT_Row<any> | null>) =>
+          (table.options as MRT_TableOptions_Editing<any>).onEditingRowChange?.(
+            (old) => functionalUpdate(updater, old),
+          ),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onCreatingRowChange: makeStateUpdater(
+      'creatingRow',
+      table,
+    ) as OnChangeFn<any>,
+    onEditingCellChange: makeStateUpdater(
+      'editingCell',
+      table,
+    ) as OnChangeFn<any>,
+    onEditingRowChange: makeStateUpdater(
+      'editingRow',
+      table,
+    ) as OnChangeFn<any>,
+  }),
+  getInitialState: (initialState) => ({
+    creatingRow: null,
+    editingCell: null,
+    editingRow: null,
+    ...initialState,
+  }),
+};

package/src/features/mrtFeatures.ts

@@ -0,0 +1,103 @@
+import {
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createExpandedRowModel,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  globalFilteringFeature,
+  rowAggregationFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/react-table';
+import { mrtCellActionsFeature } from './mrtCellActionsFeature';
+import { mrtColumnDraggingFeature } from './mrtColumnDraggingFeature';
+import { mrtDensityFeature } from './mrtDensityFeature';
+import { mrtEditingFeature } from './mrtEditingFeature';
+import { mrtFilterModesFeature } from './mrtFilterModesFeature';
+import { mrtFnsFeature } from './mrtFnsFeature';
+import { mrtFullScreenFeature } from './mrtFullScreenFeature';
+import { mrtLoadingFeature } from './mrtLoadingFeature';
+import { mrtRefsFeature } from './mrtRefsFeature';
+import { mrtRowDraggingFeature } from './mrtRowDraggingFeature';
+import { mrtStateCompatFeature } from './mrtStateCompatFeature';
+import { mrtToolbarsFeature } from './mrtToolbarsFeature';
+import { MRT_AggregationFns } from '../fns/aggregationFns';
+import { MRT_FilterFns } from '../fns/filterFns';
+import { MRT_SortingFns } from '../fns/sortingFns';
+
+/**
+ * The static feature registry every MRT table is built from. Row models are
+ * registered unconditionally; core skips a stage at runtime when its `manual*`
+ * option is set, and a feature with empty state is an identity pass. The
+ * faceted models are the exception, see `mrtFeaturesWithoutFacetedValues`.
+ */
+export const mrtFeatures = tableFeatures({
+  aggregationFns: MRT_AggregationFns,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  expandedRowModel: createExpandedRowModel(),
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: MRT_FilterFns,
+  globalFilteringFeature,
+  groupedRowModel: createGroupedRowModel(),
+  mrtCellActionsFeature,
+  mrtColumnDraggingFeature,
+  mrtDensityFeature,
+  mrtEditingFeature,
+  mrtFilterModesFeature,
+  mrtFnsFeature,
+  mrtFullScreenFeature,
+  mrtLoadingFeature,
+  mrtRefsFeature,
+  mrtRowDraggingFeature,
+  mrtStateCompatFeature,
+  mrtToolbarsFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowAggregationFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: MRT_SortingFns,
+});
+
+/**
+ * Used when `enableFacetedValues` is off. Without the factories, core returns
+ * an empty Map for unique values, `undefined` for min/max values, and the
+ * pre-filtered row model for the faceted row model, so accessors are never
+ * run just to build facets.
+ */
+export const mrtFeaturesWithoutFacetedValues = {
+  ...mrtFeatures,
+  facetedMinMaxValues: undefined,
+  facetedRowModel: undefined,
+  facetedUniqueValues: undefined,
+};
+
+export type MRT_Features = typeof mrtFeatures;

package/src/features/mrtFilterModesFeature.ts

@@ -0,0 +1,99 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+import { type MRT_ColumnFilterFnsState, type MRT_FilterOption } from '../types';
+
+export interface MRT_Table_FilterModes {
+  setColumnFilterFns: (updater: Updater<MRT_ColumnFilterFnsState>) => void;
+  setGlobalFilterFn: (updater: Updater<MRT_FilterOption>) => void;
+  setShowColumnFilters: (updater: Updater<boolean>) => void;
+  setShowGlobalFilter: (updater: Updater<boolean>) => void;
+}
+
+export interface MRT_TableOptions_FilterModes {
+  onColumnFilterFnsChange?: OnChangeFn<MRT_ColumnFilterFnsState>;
+  onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
+  onShowColumnFiltersChange?: OnChangeFn<boolean>;
+  onShowGlobalFilterChange?: OnChangeFn<boolean>;
+}
+
+export interface MRT_TableState_FilterModes {
+  columnFilterFns: MRT_ColumnFilterFnsState;
+  globalFilterFn: MRT_FilterOption;
+  showColumnFilters: boolean;
+  showGlobalFilter: boolean;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtFilterModesFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtFilterModesFeature: MRT_Table_FilterModes;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtFilterModesFeature: MRT_TableOptions_FilterModes;
+  }
+  interface TableState_FeatureMap {
+    mrtFilterModesFeature: MRT_TableState_FilterModes;
+  }
+}
+
+export const mrtFilterModesFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtFilterModesFeature', table, {
+      table_setColumnFilterFns: {
+        fn: (updater: Updater<MRT_ColumnFilterFnsState>) =>
+          (
+            table.options as MRT_TableOptions_FilterModes
+          ).onColumnFilterFnsChange?.((old) => functionalUpdate(updater, old)),
+      },
+      table_setGlobalFilterFn: {
+        fn: (updater: Updater<MRT_FilterOption>) =>
+          (
+            table.options as MRT_TableOptions_FilterModes
+          ).onGlobalFilterFnChange?.((old) => functionalUpdate(updater, old)),
+      },
+      table_setShowColumnFilters: {
+        fn: (updater: Updater<boolean>) =>
+          (
+            table.options as MRT_TableOptions_FilterModes
+          ).onShowColumnFiltersChange?.((old) =>
+            functionalUpdate(updater, old),
+          ),
+      },
+      table_setShowGlobalFilter: {
+        fn: (updater: Updater<boolean>) =>
+          (
+            table.options as MRT_TableOptions_FilterModes
+          ).onShowGlobalFilterChange?.((old) => functionalUpdate(updater, old)),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onColumnFilterFnsChange: makeStateUpdater('columnFilterFns', table),
+    onGlobalFilterFnChange: makeStateUpdater('globalFilterFn', table),
+    onShowColumnFiltersChange: makeStateUpdater('showColumnFilters', table),
+    onShowGlobalFilterChange: makeStateUpdater('showGlobalFilter', table),
+  }),
+  getInitialState: (initialState) => ({
+    columnFilterFns: {},
+    globalFilterFn: 'fuzzy',
+    showColumnFilters: false,
+    showGlobalFilter: false,
+    ...initialState,
+  }),
+};

package/src/features/mrtFnsFeature.ts

@@ -0,0 +1,46 @@
+import {
+  type AggregationFnDef,
+  type FilterFn,
+  type RowData,
+  type SortFn,
+  type TableFeature,
+  type TableFeatures,
+} from '@tanstack/react-table';
+
+export interface MRT_TableOptions_Fns {
+  aggregationFns?: Record<string, AggregationFnDef<any, any, any, any>>;
+  filterFns?: Record<string, FilterFn<any, any>>;
+  sortFns?: Record<string, SortFn<any, any>>;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtFnsFeature: TableFeature;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtFnsFeature: MRT_TableOptions_Fns;
+  }
+}
+
+/**
+ * Core resolves string fn names through `table._rowModelFns`, which are the
+ * registry objects registered on the features. Custom fns passed as table
+ * options are merged over them per table, so a user's `filterFns: { myFn }`
+ * keeps resolving from `filterFn: 'myFn'` as it did in v3.
+ */
+export const mrtFnsFeature: TableFeature = {
+  initTableInstanceData: (table) => {
+    const { aggregationFns, filterFns, sortFns } =
+      table.options as MRT_TableOptions_Fns;
+    const registries = (table as any)._rowModelFns;
+    registries.aggregationFns = {
+      ...registries.aggregationFns,
+      ...aggregationFns,
+    };
+    registries.filterFns = { ...registries.filterFns, ...filterFns };
+    registries.sortFns = { ...registries.sortFns, ...sortFns };
+  },
+};

package/src/features/mrtFullScreenFeature.ts

@@ -0,0 +1,63 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+
+export interface MRT_Table_FullScreen {
+  setIsFullScreen: (updater: Updater<boolean>) => void;
+}
+
+export interface MRT_TableOptions_FullScreen {
+  onIsFullScreenChange?: OnChangeFn<boolean>;
+}
+
+export interface MRT_TableState_FullScreen {
+  isFullScreen: boolean;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtFullScreenFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtFullScreenFeature: MRT_Table_FullScreen;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtFullScreenFeature: MRT_TableOptions_FullScreen;
+  }
+  interface TableState_FeatureMap {
+    mrtFullScreenFeature: MRT_TableState_FullScreen;
+  }
+}
+
+export const mrtFullScreenFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtFullScreenFeature', table, {
+      table_setIsFullScreen: {
+        fn: (updater: Updater<boolean>) =>
+          (table.options as MRT_TableOptions_FullScreen).onIsFullScreenChange?.(
+            (old) => functionalUpdate(updater, old),
+          ),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onIsFullScreenChange: makeStateUpdater('isFullScreen', table),
+  }),
+  getInitialState: (initialState) => ({
+    isFullScreen: false,
+    ...initialState,
+  }),
+};

package/src/features/mrtLoadingFeature.ts

@@ -0,0 +1,35 @@
+import { type TableFeature } from '@tanstack/react-table';
+
+export interface MRT_TableState_Loading {
+  isLoading: boolean;
+  isSaving: boolean;
+  showLoadingOverlay: boolean;
+  showProgressBars: boolean;
+  showSkeletons: boolean;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtLoadingFeature: TableFeature;
+  }
+  interface TableState_FeatureMap {
+    mrtLoadingFeature: MRT_TableState_Loading;
+  }
+}
+
+/**
+ * Loading flags are only ever set through the `state` table option, so this
+ * feature owns the slices without exposing setters. `showSkeletons` stays
+ * undefined by default: an explicit `false` opts out of skeletons while
+ * loading, and the key must still be present for core to track the slice.
+ */
+export const mrtLoadingFeature: TableFeature = {
+  getInitialState: (initialState) => ({
+    isLoading: false,
+    isSaving: false,
+    showLoadingOverlay: false,
+    showProgressBars: false,
+    showSkeletons: undefined,
+    ...initialState,
+  }),
+};

package/src/features/mrtRefsFeature.ts

@@ -0,0 +1,60 @@
+import { type RefObject } from 'react';
+import {
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+} from '@tanstack/react-table';
+
+export interface MRT_Table_Refs {
+  refs: MRT_TableRefs;
+}
+
+export interface MRT_TableRefs {
+  actionCellRef: RefObject<HTMLTableCellElement | null>;
+  bottomToolbarRef: RefObject<HTMLDivElement | null>;
+  editInputRefs: RefObject<null | Record<string, HTMLInputElement>>;
+  filterInputRefs: RefObject<null | Record<string, HTMLInputElement>>;
+  lastSelectedRowId: RefObject<null | string>;
+  searchInputRef: RefObject<HTMLInputElement | null>;
+  tableContainerRef: RefObject<HTMLDivElement | null>;
+  tableFooterRef: RefObject<HTMLTableSectionElement | null>;
+  tableHeadCellRefs: RefObject<null | Record<string, HTMLTableCellElement>>;
+  tableHeadRef: RefObject<HTMLTableSectionElement | null>;
+  tablePaperRef: RefObject<HTMLDivElement | null>;
+  topToolbarRef: RefObject<HTMLDivElement | null>;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtRefsFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtRefsFeature: MRT_Table_Refs;
+  }
+}
+
+/**
+ * The table instance is constructed once per table, so these plain ref objects
+ * live as long as the table does.
+ */
+export const mrtRefsFeature: TableFeature = {
+  initTableInstanceData: (table) => {
+    (table as unknown as MRT_Table_Refs).refs = {
+      actionCellRef: { current: null },
+      bottomToolbarRef: { current: null },
+      editInputRefs: { current: {} },
+      filterInputRefs: { current: {} },
+      lastSelectedRowId: { current: null },
+      searchInputRef: { current: null },
+      tableContainerRef: { current: null },
+      tableFooterRef: { current: null },
+      tableHeadCellRefs: { current: {} },
+      tableHeadRef: { current: null },
+      tablePaperRef: { current: null },
+      topToolbarRef: { current: null },
+    };
+  },
+};

package/src/features/mrtRowDraggingFeature.ts

@@ -0,0 +1,81 @@
+import {
+  assignTableAPIs,
+  functionalUpdate,
+  makeStateUpdater,
+  type OnChangeFn,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type Updater,
+} from '@tanstack/react-table';
+import { type MRT_Row } from '../types';
+
+export interface MRT_Table_RowDragging<TData extends RowData> {
+  setDraggingRow: (updater: Updater<MRT_Row<TData> | null>) => void;
+  setHoveredRow: (updater: Updater<null | Partial<MRT_Row<TData>>>) => void;
+}
+
+export interface MRT_TableOptions_RowDragging<TData extends RowData> {
+  onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+  onHoveredRowChange?: OnChangeFn<null | Partial<MRT_Row<TData>>>;
+}
+
+export interface MRT_TableState_RowDragging {
+  draggingRow: MRT_Row<any> | null;
+  hoveredRow: null | Partial<MRT_Row<any>>;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtRowDraggingFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtRowDraggingFeature: MRT_Table_RowDragging<TData>;
+  }
+  interface TableOptions_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtRowDraggingFeature: MRT_TableOptions_RowDragging<TData>;
+  }
+  interface TableState_FeatureMap {
+    mrtRowDraggingFeature: MRT_TableState_RowDragging;
+  }
+}
+
+export const mrtRowDraggingFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtRowDraggingFeature', table, {
+      table_setDraggingRow: {
+        fn: (updater: Updater<MRT_Row<any> | null>) =>
+          (
+            table.options as MRT_TableOptions_RowDragging<any>
+          ).onDraggingRowChange?.((old) => functionalUpdate(updater, old)),
+      },
+      table_setHoveredRow: {
+        fn: (updater: Updater<null | Partial<MRT_Row<any>>>) =>
+          (
+            table.options as MRT_TableOptions_RowDragging<any>
+          ).onHoveredRowChange?.((old) => functionalUpdate(updater, old)),
+      },
+    });
+  },
+  getDefaultTableOptions: (table) => ({
+    onDraggingRowChange: makeStateUpdater(
+      'draggingRow',
+      table,
+    ) as OnChangeFn<any>,
+    onHoveredRowChange: makeStateUpdater(
+      'hoveredRow',
+      table,
+    ) as OnChangeFn<any>,
+  }),
+  getInitialState: (initialState) => ({
+    draggingRow: null,
+    hoveredRow: null,
+    ...initialState,
+  }),
+};

package/src/features/mrtStateCompatFeature.ts

@@ -0,0 +1,43 @@
+import {
+  assignTableAPIs,
+  type RowData,
+  type TableFeature,
+  type TableFeatures,
+  type TableState,
+} from '@tanstack/react-table';
+
+export interface MRT_Table_StateCompat<TFeatures extends TableFeatures> {
+  /**
+   * Snapshot of the full table state, kept for the v3 public API. Inside MRT
+   * read `table.state` instead; it is what the component subscribed to.
+   */
+  getState: () => TableState<TFeatures>;
+}
+
+declare module '@tanstack/react-table' {
+  interface Plugins {
+    mrtStateCompatFeature: TableFeature;
+  }
+  interface Table_FeatureMap<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+  > {
+    mrtStateCompatFeature: MRT_Table_StateCompat<TFeatures>;
+  }
+}
+
+export const mrtStateCompatFeature: TableFeature = {
+  constructTableAPIs: (table) => {
+    assignTableAPIs('mrtStateCompatFeature', table, {
+      table_getState: { fn: () => table.store.state },
+    });
+    //`header.getContext()` and `cell.getContext()` hand out the core instance,
+    //not the React wrapper that carries the subscribed `state`, so MRT
+    //components rendered through `flexRender` need the slice here too
+    Object.defineProperty(table, 'state', {
+      configurable: true,
+      enumerable: false,
+      get: () => table.store.state,
+    });
+  },
+};