@tanstack/table-core 9.0.0-alpha.10 → 9.0.0-alpha.12

package/src/features/column-filtering/createFilteredRowModel.ts

@@ -0,0 +1,171 @@
+import { tableMemo } from '../../utils'
+import { table_getColumn } from '../../core/columns/coreColumnsFeature.utils'
+import {
+  column_getCanGlobalFilter,
+  table_getGlobalFilterFn,
+} from '../global-filtering/globalFilteringFeature.utils'
+import { table_autoResetPageIndex } from '../row-pagination/rowPaginationFeature.utils'
+import { filterRows } from './filterRowsUtils'
+import { column_getFilterFn } from './columnFilteringFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { RowModel } from '../../core/row-models/coreRowModelsFeature.types'
+import type { Table, Table_Internal } from '../../types/Table'
+import type { Row } from '../../types/Row'
+import type {
+  FilterFn,
+  FilterFns,
+  ResolvedColumnFilter,
+  Row_ColumnFiltering,
+} from './columnFilteringFeature.types'
+
+export function createFilteredRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(
+  filterFns: Record<keyof FilterFns, FilterFn<TFeatures, TData>>,
+): (table: Table<TFeatures, TData>) => () => RowModel<TFeatures, TData> {
+  return (_table) => {
+    const table = _table as Table_Internal<TFeatures, TData>
+    if (!table._rowModelFns.filterFns) table._rowModelFns.filterFns = filterFns
+    return tableMemo({
+      feature: 'columnFilteringFeature',
+      table,
+      fnName: 'table.getFilteredRowModel',
+      memoDeps: () => [
+        table.getPreFilteredRowModel(),
+        table.store.state.columnFilters,
+        table.store.state.globalFilter,
+      ],
+      fn: () => _createFilteredRowModel(table),
+      onAfterUpdate: () => table_autoResetPageIndex(table),
+    })
+  }
+}
+
+function _createFilteredRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {
+  const rowModel = table.getPreFilteredRowModel()
+  const { columnFilters, globalFilter } = table.store.state
+
+  if (!rowModel.rows.length || (!columnFilters?.length && !globalFilter)) {
+    for (const row of rowModel.flatRows as Array<
+      Row<TFeatures, TData> & Partial<Row_ColumnFiltering<TFeatures, TData>>
+    >) {
+      row.columnFilters = {}
+      row.columnFiltersMeta = {}
+    }
+    return rowModel
+  }
+
+  const resolvedColumnFilters: Array<ResolvedColumnFilter<TFeatures, TData>> =
+    []
+  const resolvedGlobalFilters: Array<ResolvedColumnFilter<TFeatures, TData>> =
+    []
+
+  columnFilters?.forEach((columnFilter) => {
+    const column = table_getColumn(table, columnFilter.id)
+
+    if (!column) {
+      return
+    }
+
+    const filterFn = column_getFilterFn(column)!
+
+    resolvedColumnFilters.push({
+      id: columnFilter.id,
+      filterFn,
+      resolvedValue:
+        filterFn.resolveFilterValue?.(columnFilter.value) ?? columnFilter.value,
+    })
+  })
+
+  const filterableIds = columnFilters?.map((d) => d.id) ?? []
+
+  const globalFilterFn = table_getGlobalFilterFn(table)
+
+  const globallyFilterableColumns = table
+    .getAllLeafColumns()
+    .filter((column) => column_getCanGlobalFilter(column))
+
+  if (globalFilter && globalFilterFn && globallyFilterableColumns.length) {
+    filterableIds.push('__global__')
+
+    globallyFilterableColumns.forEach((column) => {
+      resolvedGlobalFilters.push({
+        id: column.id,
+        filterFn: globalFilterFn,
+        resolvedValue:
+          globalFilterFn.resolveFilterValue?.(globalFilter) ?? globalFilter,
+      })
+    })
+  }
+
+  // Flag the pre-filtered row model with each filter state
+  for (const row of rowModel.flatRows as Array<
+    Row<TFeatures, TData> & Partial<Row_ColumnFiltering<TFeatures, TData>>
+  >) {
+    row.columnFilters = {}
+
+    if (resolvedColumnFilters.length) {
+      for (const currentColumnFilter of resolvedColumnFilters) {
+        const id = currentColumnFilter.id
+
+        // Tag the row with the column filter state
+        row.columnFilters[id] = currentColumnFilter.filterFn(
+          row,
+          id,
+          currentColumnFilter.resolvedValue,
+          (filterMeta) => {
+            !row.columnFiltersMeta
+              ? (row.columnFiltersMeta = {})
+              : (row.columnFiltersMeta[id] = filterMeta)
+          },
+        )
+      }
+    }
+
+    if (resolvedGlobalFilters.length) {
+      for (const currentGlobalFilter of resolvedGlobalFilters) {
+        const id = currentGlobalFilter.id
+        // Tag the row with the first truthy global filter state
+        if (
+          currentGlobalFilter.filterFn(
+            row,
+            id,
+            currentGlobalFilter.resolvedValue,
+            (filterMeta) => {
+              !row.columnFiltersMeta
+                ? (row.columnFiltersMeta = {})
+                : (row.columnFiltersMeta[id] = filterMeta)
+            },
+          )
+        ) {
+          row.columnFilters.__global__ = true
+          break
+        }
+      }
+
+      if (row.columnFilters.__global__ !== true) {
+        row.columnFilters.__global__ = false
+      }
+    }
+  }
+
+  const filterRowsImpl = (
+    row: Row<TFeatures, TData> & Row_ColumnFiltering<TFeatures, TData>,
+  ) => {
+    // Horizontally filter rows through each column
+    for (const columnId of filterableIds) {
+      if (row.columnFilters[columnId] === false) {
+        return false
+      }
+    }
+    return true
+  }
+
+  // Filter final rows using all of the active filters
+  return filterRows(rowModel.rows, filterRowsImpl as any, table)
+}

package/src/features/column-filtering/filterRowsUtils.ts

@@ -0,0 +1,152 @@
+import { constructRow } from '../../core/rows/constructRow'
+import type { Row_ColumnFiltering } from './columnFilteringFeature.types'
+import type { RowModel } from '../../core/row-models/coreRowModelsFeature.types'
+import type { Row } from '../../types/Row'
+import type { Table_Internal } from '../../types/Table'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { RowData } from '../../types/type-utils'
+
+export function filterRows<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  rows: Array<Row<TFeatures, TData>>,
+  filterRowImpl: (row: Row<TFeatures, TData>) => any,
+  table: Table_Internal<TFeatures, TData>,
+) {
+  if (table.options.filterFromLeafRows) {
+    return filterRowModelFromLeafs(rows, filterRowImpl, table)
+  }
+
+  return filterRowModelFromRoot(rows, filterRowImpl, table)
+}
+
+function filterRowModelFromLeafs<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  rowsToFilter: Array<Row<TFeatures, TData>>,
+  filterRow: (
+    row: Row<TFeatures, TData>,
+  ) => Array<Row<TFeatures, TData>> | undefined,
+  table: Table_Internal<TFeatures, TData>,
+): RowModel<TFeatures, TData> {
+  const newFilteredFlatRows: Array<Row<TFeatures, TData>> = []
+  const newFilteredRowsById: Record<string, Row<TFeatures, TData>> = {}
+  const maxDepth = table.options.maxLeafRowFilterDepth ?? 100
+
+  const recurseFilterRows = (
+    rowsToFilter: Array<
+      Row<TFeatures, TData> & Partial<Row_ColumnFiltering<TFeatures, TData>>
+    >,
+    depth = 0,
+  ) => {
+    const filteredRows: Array<Row<TFeatures, TData>> &
+      Partial<Row_ColumnFiltering<TFeatures, TData>> = []
+
+    // Filter from children up first
+    for (let row of rowsToFilter) {
+      const newRow = constructRow(
+        table,
+        row.id,
+        row.original,
+        row.index,
+        row.depth,
+        undefined,
+        row.parentId,
+      ) as Row<TFeatures, TData> &
+        Partial<Row_ColumnFiltering<TFeatures, TData>>
+      newRow.columnFilters = row.columnFilters
+
+      if (row.subRows.length && depth < maxDepth) {
+        newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+        row = newRow
+
+        if (filterRow(row) && !newRow.subRows.length) {
+          filteredRows.push(row)
+          newFilteredRowsById[row.id] = row
+          newFilteredFlatRows.push(row)
+          continue
+        }
+
+        if (filterRow(row) || newRow.subRows.length) {
+          filteredRows.push(row)
+          newFilteredRowsById[row.id] = row
+          newFilteredFlatRows.push(row)
+          continue
+        }
+      } else {
+        row = newRow
+        if (filterRow(row)) {
+          filteredRows.push(row)
+          newFilteredRowsById[row.id] = row
+          newFilteredFlatRows.push(row)
+        }
+      }
+    }
+
+    return filteredRows
+  }
+
+  return {
+    rows: recurseFilterRows(rowsToFilter),
+    flatRows: newFilteredFlatRows,
+    rowsById: newFilteredRowsById,
+  }
+}
+
+function filterRowModelFromRoot<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  rowsToFilter: Array<Row<TFeatures, TData>>,
+  filterRow: (row: Row<TFeatures, TData>) => any,
+  table: Table_Internal<TFeatures, TData>,
+): RowModel<TFeatures, TData> {
+  const newFilteredFlatRows: Array<Row<TFeatures, TData>> = []
+  const newFilteredRowsById: Record<string, Row<TFeatures, TData>> = {}
+  const maxDepth = table.options.maxLeafRowFilterDepth ?? 100
+
+  // Filters top level and nested rows
+  const recurseFilterRows = (
+    rowsToFilter: Array<Row<TFeatures, TData>>,
+    depth = 0,
+  ) => {
+    // Filter from parents downward first
+
+    const filteredRows: Array<Row<TFeatures, TData>> = []
+
+    // Apply the filter to any subRows
+    for (let row of rowsToFilter) {
+      const pass = filterRow(row)
+
+      if (pass) {
+        if (row.subRows.length && depth < maxDepth) {
+          const newRow = constructRow(
+            table,
+            row.id,
+            row.original,
+            row.index,
+            row.depth,
+            undefined,
+            row.parentId,
+          )
+          newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+          row = newRow
+        }
+
+        filteredRows.push(row)
+        newFilteredFlatRows.push(row)
+        newFilteredRowsById[row.id] = row
+      }
+    }
+
+    return filteredRows
+  }
+
+  return {
+    rows: recurseFilterRows(rowsToFilter),
+    flatRows: newFilteredFlatRows,
+    rowsById: newFilteredRowsById,
+  }
+}

package/src/features/column-grouping/columnGroupingFeature.ts

@@ -0,0 +1,151 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../utils'
+import {
+  cell_getIsAggregated,
+  cell_getIsGrouped,
+  cell_getIsPlaceholder,
+  column_getAggregationFn,
+  column_getAutoAggregationFn,
+  column_getCanGroup,
+  column_getGroupedIndex,
+  column_getIsGrouped,
+  column_getToggleGroupingHandler,
+  column_toggleGrouping,
+  getDefaultGroupingState,
+  row_getGroupingValue,
+  row_getIsGrouped,
+  table_resetGrouping,
+  table_setGrouping,
+} from './columnGroupingFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   CachedRowModel_Grouped,
+//   Cell_ColumnGrouping,
+//   ColumnDef_ColumnGrouping,
+//   Column_ColumnGrouping,
+//   CreateRowModel_Grouped,
+//   RowModelFns_ColumnGrouping,
+//   Row_ColumnGrouping,
+//   TableOptions_ColumnGrouping,
+//   TableState_ColumnGrouping,
+//   Table_ColumnGrouping,
+// } from './columnGroupingFeature.types'
+
+interface ColumnGroupingFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // CachedRowModel: CachedRowModel_Grouped<TFeatures, TData>
+  // Cell: Cell_ColumnGrouping
+  // Column: Column_ColumnGrouping<TFeatures, TData>
+  // ColumnDef: ColumnDef_ColumnGrouping<TFeatures, TData>
+  // CreateRowModels: CreateRowModel_Grouped<TFeatures, TData>
+  // Row: Row_ColumnGrouping
+  // RowModelFns: RowModelFns_ColumnGrouping<TFeatures, TData>
+  // Table: Table_ColumnGrouping<TFeatures, TData>
+  // TableOptions: TableOptions_ColumnGrouping
+  // TableState: TableState_ColumnGrouping
+}
+
+export function constructColumnGroupingFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<ColumnGroupingFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        grouping: getDefaultGroupingState(),
+        ...initialState,
+      }
+    },
+
+    getDefaultColumnDef: () => {
+      return {
+        aggregatedCell: ({ getValue }: any) => getValue()?.toString?.() ?? null,
+        aggregationFn: 'auto',
+      }
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        onGroupingChange: makeStateUpdater('grouping', table),
+        groupedColumnMode: 'reorder',
+      }
+    },
+
+    assignCellPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnGroupingFeature', prototype, table, {
+        cell_getIsGrouped: {
+          fn: (cell) => cell_getIsGrouped(cell),
+        },
+        cell_getIsPlaceholder: {
+          fn: (cell) => cell_getIsPlaceholder(cell),
+        },
+        cell_getIsAggregated: {
+          fn: (cell) => cell_getIsAggregated(cell),
+        },
+      })
+    },
+
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnGroupingFeature', prototype, table, {
+        column_toggleGrouping: {
+          fn: (column) => column_toggleGrouping(column),
+        },
+        column_getCanGroup: {
+          fn: (column) => column_getCanGroup(column),
+        },
+        column_getIsGrouped: {
+          fn: (column) => column_getIsGrouped(column),
+        },
+        column_getGroupedIndex: {
+          fn: (column) => column_getGroupedIndex(column),
+        },
+        column_getToggleGroupingHandler: {
+          fn: (column) => column_getToggleGroupingHandler(column),
+        },
+        column_getAutoAggregationFn: {
+          fn: (column) => column_getAutoAggregationFn(column),
+        },
+        column_getAggregationFn: {
+          fn: (column) => column_getAggregationFn(column),
+        },
+      })
+    },
+
+    assignRowPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnGroupingFeature', prototype, table, {
+        row_getIsGrouped: {
+          fn: (row) => row_getIsGrouped(row),
+        },
+        row_getGroupingValue: {
+          fn: (row, columnId) => row_getGroupingValue(row, columnId),
+        },
+      })
+    },
+
+    initRowInstanceData: (row) => {
+      ;(row as any)._groupingValuesCache = {}
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('columnGroupingFeature', table, {
+        table_setGrouping: {
+          fn: (updater) => table_setGrouping(table, updater),
+        },
+        table_resetGrouping: {
+          fn: (defaultState) => table_resetGrouping(table, defaultState),
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The (Column) Grouping feature adds column grouping state and APIs to the table, row, column, and cell objects.
+ */
+export const columnGroupingFeature = constructColumnGroupingFeature()

package/src/features/column-grouping/columnGroupingFeature.types.ts

@@ -0,0 +1,218 @@
+import type { RowModel } from '../../core/row-models/coreRowModelsFeature.types'
+import type { Table } from '../../types/Table'
+import type { BuiltInAggregationFn } from '../../fns/aggregationFns'
+import type {
+  CellData,
+  OnChangeFn,
+  RowData,
+  Updater,
+} from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { Row } from '../../types/Row'
+import type { Cell } from '../../types/Cell'
+import type { ColumnDefTemplate } from '../../types/ColumnDef'
+
+export type GroupingState = Array<string>
+
+export interface TableState_ColumnGrouping {
+  grouping: GroupingState
+}
+
+export interface RowModelFns_ColumnGrouping<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  aggregationFns: Record<keyof AggregationFns, AggregationFn<TFeatures, TData>>
+}
+
+export interface AggregationFns {}
+
+export type AggregationFn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = (
+  columnId: string,
+  leafRows: Array<Row<TFeatures, TData>>,
+  childRows: Array<Row<TFeatures, TData>>,
+) => any
+
+export type CustomAggregationFns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = Record<string, AggregationFn<TFeatures, TData>>
+
+export type AggregationFnOption<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> =
+  | 'auto'
+  | keyof AggregationFns
+  | BuiltInAggregationFn
+  | AggregationFn<TFeatures, TData>
+
+export interface ColumnDef_ColumnGrouping<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+> {
+  /**
+   * The cell to display each row for the column if the cell is an aggregate. If a function is passed, it will be passed a props object with the context of the cell and should return the property type for your adapter (the exact type depends on the adapter being used).
+   */
+  aggregatedCell?: ColumnDefTemplate<
+    ReturnType<Cell<TFeatures, TData, TValue>['getContext']>
+  >
+  /**
+   * The resolved aggregation function for the column.
+   */
+  aggregationFn?: AggregationFnOption<TFeatures, TData>
+  /**
+   * Enables/disables grouping for this column.
+   */
+  enableGrouping?: boolean
+  /**
+   * Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from `accessorKey` / `accessorFn` will be used instead.
+   */
+  getGroupingValue?: (row: TData) => any
+}
+
+export interface Column_ColumnGrouping<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Returns the aggregation function for the column.
+   */
+  getAggregationFn: () => AggregationFn<TFeatures, TData> | undefined
+  /**
+   * Returns the automatically inferred aggregation function for the column.
+   */
+  getAutoAggregationFn: () => AggregationFn<TFeatures, TData> | undefined
+  /**
+   * Returns whether or not the column can be grouped.
+   */
+  getCanGroup: () => boolean
+  /**
+   * Returns the index of the column in the grouping state.
+   */
+  getGroupedIndex: () => number
+  /**
+   * Returns whether or not the column is currently grouped.
+   */
+  getIsGrouped: () => boolean
+  /**
+   * Returns a function that toggles the grouping state of the column. This is useful for passing to the `onClick` prop of a button.
+   */
+  getToggleGroupingHandler: () => () => void
+  /**
+   * Toggles the grouping state of the column.
+   */
+  toggleGrouping: () => void
+}
+
+export interface Row_ColumnGrouping {
+  _groupingValuesCache: Record<string, any>
+  /**
+   * Returns the grouping value for any row and column (including leaf rows).
+   */
+  getGroupingValue: (columnId: string) => unknown
+  /**
+   * Returns whether or not the row is currently grouped.
+   */
+  getIsGrouped: () => boolean
+  /**
+   * If this row is grouped, this is the id of the column that this row is grouped by.
+   */
+  groupingColumnId?: string
+  /**
+   * If this row is grouped, this is the unique/shared value for the `groupingColumnId` for all of the rows in this group.
+   */
+  groupingValue?: unknown
+}
+
+export interface Cell_ColumnGrouping {
+  /**
+   * Returns whether or not the cell is currently aggregated.
+   */
+  getIsAggregated: () => boolean
+  /**
+   * Returns whether or not the cell is currently grouped.
+   */
+  getIsGrouped: () => boolean
+  /**
+   * Returns whether or not the cell is currently a placeholder cell.
+   */
+  getIsPlaceholder: () => boolean
+}
+
+export interface ColumnDefaultOptions {
+  enableGrouping: boolean
+  onGroupingChange: OnChangeFn<GroupingState>
+}
+
+export interface TableOptions_ColumnGrouping {
+  /**
+   * Enables/disables grouping for the table.
+   */
+  enableGrouping?: boolean
+  /**
+   * Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
+   */
+  groupedColumnMode?: false | 'reorder' | 'remove'
+  /**
+   * Enables manual grouping. If this option is set to `true`, the table will not automatically group rows using `getGroupedRowModel()` and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation.
+   */
+  manualGrouping?: boolean
+  /**
+   * If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.grouping` option.
+   */
+  onGroupingChange?: OnChangeFn<GroupingState>
+}
+
+export type GroupingColumnMode = false | 'reorder' | 'remove'
+
+export interface Table_ColumnGrouping<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Resets the **grouping** state to `initialState.grouping`, or `true` can be passed to force a default blank state reset to `[]`.
+   */
+  resetGrouping: (defaultState?: boolean) => void
+  /**
+   * Updates the grouping state of the table via an update function or value.
+   */
+  setGrouping: (updater: Updater<GroupingState>) => void
+}
+
+export interface Table_RowModels_Grouped<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Returns the row model for the table after grouping has been applied.
+   */
+  getGroupedRowModel: () => RowModel<TFeatures, TData>
+  /**
+   * Returns the row model for the table before any grouping has been applied.
+   */
+  getPreGroupedRowModel: () => RowModel<TFeatures, TData>
+}
+
+export interface CreateRowModel_Grouped<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Returns the row model after grouping has taken place, but no further.
+   */
+  groupedRowModel?: (
+    table: Table<TFeatures, TData>,
+  ) => () => RowModel<TFeatures, TData>
+}
+
+export interface CachedRowModel_Grouped<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  groupedRowModel: () => RowModel<TFeatures, TData>
+}