@tanstack/table-core 9.0.0-alpha.4 → 9.0.0-alpha.42

package/src/features/column-filtering/columnFilteringFeature.utils.ts

@@ -0,0 +1,209 @@
+import { cloneState, functionalUpdate, isFunction } from '../../utils'
+import type { CellData, RowData, Updater } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { Table_Internal } from '../../types/Table'
+import type { Column_Internal } from '../../types/Column'
+import type {
+  ColumnFiltersState,
+  FilterFn,
+} from './columnFilteringFeature.types'
+
+export function getDefaultColumnFiltersState(): ColumnFiltersState {
+  return []
+}
+
+export function column_getAutoFilterFn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  const filterFns: Record<string, FilterFn<TFeatures, TData>> | undefined =
+    column.table._rowModelFns.filterFns
+
+  const firstRow = column.table.getCoreRowModel().flatRows[0]
+
+  const value = firstRow ? firstRow.getValue(column.id) : undefined
+
+  if (typeof value === 'string') {
+    return filterFns?.includesString
+  }
+
+  if (typeof value === 'number') {
+    return filterFns?.inNumberRange
+  }
+
+  if (typeof value === 'boolean') {
+    return filterFns?.equals
+  }
+
+  if (value !== null && typeof value === 'object') {
+    return filterFns?.equals
+  }
+
+  if (Array.isArray(value)) {
+    return filterFns?.arrIncludes
+  }
+
+  return filterFns?.weakEquals
+}
+
+export function column_getFilterFn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+): FilterFn<TFeatures, TData> | undefined {
+  let filterFn = null
+  const filterFns: Record<string, FilterFn<TFeatures, TData>> | undefined =
+    column.table._rowModelFns.filterFns
+  filterFn = isFunction(column.columnDef.filterFn)
+    ? column.columnDef.filterFn
+    : column.columnDef.filterFn === 'auto'
+      ? column_getAutoFilterFn(column)
+      : filterFns?.[column.columnDef.filterFn as string]
+
+  if (process.env.NODE_ENV === 'development' && !filterFn) {
+    console.warn(
+      `Could not find a valid 'column.filterFn' for column with the ID: ${column.id}.`,
+    )
+  }
+
+  return filterFn
+}
+
+export function column_getCanFilter<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return (
+    (column.columnDef.enableColumnFilter ?? true) &&
+    (column.table.options.enableColumnFilters ?? true) &&
+    (column.table.options.enableFilters ?? true) &&
+    !!column.accessorFn
+  )
+}
+
+export function column_getIsFiltered<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return column_getFilterIndex(column) > -1
+}
+
+export function column_getFilterValue<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return column.table.atoms.columnFilters
+    ?.get()
+    ?.find((d) => d.id === column.id)?.value
+}
+
+export function column_getFilterIndex<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>): number {
+  return (
+    column.table.atoms.columnFilters
+      ?.get()
+      ?.findIndex((d) => d.id === column.id) ?? -1
+  )
+}
+
+export function column_setFilterValue<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>, value: any) {
+  table_setColumnFilters(column.table, (old) => {
+    const filterFn = column_getFilterFn(column)
+    const previousFilter = old.find((d) => d.id === column.id)
+
+    const newFilter = functionalUpdate(
+      value,
+      previousFilter ? previousFilter.value : undefined,
+    )
+
+    if (shouldAutoRemoveFilter(filterFn, newFilter, column)) {
+      return old.filter((d) => d.id !== column.id)
+    }
+
+    const newFilterObj = { id: column.id, value: newFilter }
+
+    if (previousFilter) {
+      return old.map((d) => {
+        if (d.id === column.id) {
+          return newFilterObj
+        }
+        return d
+      })
+    }
+
+    if (old.length) {
+      return [...old, newFilterObj]
+    }
+
+    return [newFilterObj]
+  })
+}
+
+export function table_setColumnFilters<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  updater: Updater<ColumnFiltersState>,
+) {
+  const leafColumns = table.getAllLeafColumns()
+
+  const updateFn = (old: ColumnFiltersState) => {
+    return functionalUpdate(updater, old).filter((filter) => {
+      const column = leafColumns.find((d) => d.id === filter.id)
+
+      if (column) {
+        const filterFn = column_getFilterFn(column)
+
+        if (shouldAutoRemoveFilter(filterFn, filter.value, column)) {
+          return false
+        }
+      }
+
+      return true
+    })
+  }
+
+  table.options.onColumnFiltersChange?.(updateFn)
+}
+
+export function table_resetColumnFilters<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnFilters(
+    table,
+    defaultState ? [] : cloneState(table.initialState.columnFilters ?? []),
+  )
+}
+
+export function shouldAutoRemoveFilter<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  filterFn?: FilterFn<TFeatures, TData>,
+  value?: any,
+  column?: Column_Internal<TFeatures, TData, TValue>,
+) {
+  return (
+    (filterFn && filterFn.autoRemove
+      ? filterFn.autoRemove(value, column)
+      : false) ||
+    typeof value === 'undefined' ||
+    (typeof value === 'string' && !value)
+  )
+}

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

@@ -0,0 +1,172 @@
+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_Internal<TFeatures, TData> = _table
+    if (!table._rowModelFns.filterFns) table._rowModelFns.filterFns = filterFns
+    return tableMemo({
+      feature: 'columnFilteringFeature',
+      table,
+      fnName: 'table.getFilteredRowModel',
+      memoDeps: () => [
+        table.getPreFilteredRowModel(),
+        table.atoms.columnFilters?.get(),
+        table.atoms.globalFilter?.get(),
+      ],
+      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 = table.atoms.columnFilters?.get()
+  const globalFilter = table.atoms.globalFilter?.get()
+
+  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'
+
+export 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()