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

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

@@ -0,0 +1,192 @@
+import { isFunction } from '../../utils'
+import { table_getColumn } from '../../core/columns/coreColumnsFeature.utils'
+import type { Column_Internal } from '../../types/Column'
+import type { CellData, RowData, Updater } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { Table_Internal } from '../../types/Table'
+import type { Row } from '../../types/Row'
+import type { Cell } from '../../types/Cell'
+import type {
+  AggregationFn,
+  GroupingState,
+  Row_ColumnGrouping,
+} from './columnGroupingFeature.types'
+
+export function getDefaultGroupingState(): GroupingState {
+  return structuredClone([])
+}
+
+export function column_toggleGrouping<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  table_setGrouping(column.table, (old) => {
+    // Find any existing grouping for this column
+    if (old.includes(column.id)) {
+      return old.filter((d) => d !== column.id)
+    }
+
+    return [...old, column.id]
+  })
+}
+
+export function column_getCanGroup<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return (
+    (column.columnDef.enableGrouping ?? true) &&
+    (column.table.options.enableGrouping ?? true) &&
+    (!!column.accessorFn || !!column.columnDef.getGroupingValue)
+  )
+}
+
+export function column_getIsGrouped<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>): boolean {
+  return !!column.table.store.state.grouping?.includes(column.id)
+}
+
+export function column_getGroupedIndex<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>): number {
+  return column.table.store.state.grouping?.indexOf(column.id) ?? -1
+}
+
+export function column_getToggleGroupingHandler<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  const canGroup = column_getCanGroup(column)
+
+  return () => {
+    if (!canGroup) return
+    column_toggleGrouping(column)
+  }
+}
+
+export function column_getAutoAggregationFn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  const aggregationFns = column.table._rowModelFns.aggregationFns as
+    | Record<string, AggregationFn<TFeatures, TData>>
+    | undefined
+
+  const firstRow = column.table.getCoreRowModel().flatRows[0]
+
+  const value = firstRow?.getValue(column.id)
+
+  if (typeof value === 'number') {
+    return aggregationFns?.sum
+  }
+
+  if (Object.prototype.toString.call(value) === '[object Date]') {
+    return aggregationFns?.extent
+  }
+}
+
+export function column_getAggregationFn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  const aggregationFns = column.table._rowModelFns.aggregationFns as
+    | Record<string, AggregationFn<TFeatures, TData>>
+    | undefined
+
+  return isFunction(column.columnDef.aggregationFn)
+    ? column.columnDef.aggregationFn
+    : column.columnDef.aggregationFn === 'auto'
+      ? column_getAutoAggregationFn(column)
+      : aggregationFns?.[column.columnDef.aggregationFn as string]
+}
+
+export function table_setGrouping<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, updater: Updater<GroupingState>) {
+  table.options.onGroupingChange?.(updater)
+}
+
+export function table_resetGrouping<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setGrouping(
+    table,
+    defaultState ? [] : (table.initialState.grouping ?? []),
+  )
+}
+
+export function row_getIsGrouped<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData> & Partial<Row_ColumnGrouping>) {
+  return !!row.groupingColumnId
+}
+
+export function row_getGroupingValue<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData> & Partial<Row_ColumnGrouping>, columnId: string) {
+  if (row._groupingValuesCache?.hasOwnProperty(columnId)) {
+    return row._groupingValuesCache[columnId]
+  }
+
+  const column = table_getColumn(row.table, columnId) as Column_Internal<
+    TFeatures,
+    TData
+  >
+
+  if (!column.columnDef.getGroupingValue) {
+    return row.getValue(columnId)
+  }
+
+  if (row._groupingValuesCache) {
+    row._groupingValuesCache[columnId] = column.columnDef.getGroupingValue(
+      row.original,
+    )
+  }
+
+  return row._groupingValuesCache?.[columnId]
+}
+
+export function cell_getIsGrouped<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(cell: Cell<TFeatures, TData, TValue>) {
+  const row = cell.row as Row<TFeatures, TData> & Partial<Row_ColumnGrouping>
+  return (
+    column_getIsGrouped(cell.column) && cell.column.id === row.groupingColumnId
+  )
+}
+
+export function cell_getIsPlaceholder<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(cell: Cell<TFeatures, TData, TValue>) {
+  return !cell_getIsGrouped(cell) && column_getIsGrouped(cell.column)
+}
+
+export function cell_getIsAggregated<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(cell: Cell<TFeatures, TData, TValue>) {
+  return (
+    !cell_getIsGrouped(cell) &&
+    !cell_getIsPlaceholder(cell) &&
+    !!cell.row.subRows.length
+  )
+}

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

@@ -0,0 +1,215 @@
+import { flattenBy, tableMemo } from '../../utils'
+import { constructRow } from '../../core/rows/constructRow'
+import { table_getColumn } from '../../core/columns/coreColumnsFeature.utils'
+import { table_autoResetExpanded } from '../row-expanding/rowExpandingFeature.utils'
+import { table_autoResetPageIndex } from '../row-pagination/rowPaginationFeature.utils'
+import {
+  column_getAggregationFn,
+  row_getGroupingValue,
+} from './columnGroupingFeature.utils'
+import type { Column } from '../../types/Column'
+import type {
+  AggregationFn,
+  AggregationFns,
+  Row_ColumnGrouping,
+} from './columnGroupingFeature.types'
+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 { RowData } from '../../types/type-utils'
+
+export function createGroupedRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(
+  aggregationFns: Record<keyof AggregationFns, AggregationFn<TFeatures, TData>>,
+): (table: Table<TFeatures, TData>) => () => RowModel<TFeatures, TData> {
+  return (_table) => {
+    const table = _table as Table_Internal<TFeatures, TData>
+    if (!table._rowModelFns.aggregationFns)
+      table._rowModelFns.aggregationFns = aggregationFns
+    return tableMemo({
+      feature: 'columnGroupingFeature',
+      table,
+      fnName: 'table.getGroupedRowModel',
+      memoDeps: () => [
+        table.store.state.grouping,
+        table.getPreGroupedRowModel(),
+      ],
+      fn: () => _createGroupedRowModel(table),
+      onAfterUpdate: () => {
+        table_autoResetExpanded(table)
+        table_autoResetPageIndex(table)
+      },
+    })
+  }
+}
+
+function _createGroupedRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {
+  const rowModel = table.getPreGroupedRowModel()
+  const grouping = table.store.state.grouping
+
+  if (!rowModel.rows.length || !grouping?.length) {
+    rowModel.rows.forEach((row) => {
+      row.depth = 0
+      row.parentId = undefined
+    })
+    return rowModel
+  }
+
+  // Filter the grouping list down to columns that exist
+  const existingGrouping = grouping.filter((columnId) =>
+    table_getColumn(table, columnId),
+  )
+
+  const groupedFlatRows: Array<Row<TFeatures, TData>> &
+    Partial<Row_ColumnGrouping> = []
+  const groupedRowsById: Record<string, Row<TFeatures, TData>> = {}
+
+  // Recursively group the data
+  const groupUpRecursively = (
+    rows: Array<Row<TFeatures, TData>>,
+    depth = 0,
+    parentId?: string,
+  ) => {
+    // Grouping depth has been been met
+    // Stop grouping and simply rewrite thd depth and row relationships
+    if (depth >= existingGrouping.length) {
+      return rows.map((row) => {
+        row.depth = depth
+
+        groupedFlatRows.push(row)
+        groupedRowsById[row.id] = row
+
+        if (row.subRows.length) {
+          row.subRows = groupUpRecursively(row.subRows, depth + 1, row.id)
+        }
+
+        return row
+      })
+    }
+
+    const columnId = existingGrouping[depth] as string
+
+    // Group the rows together for this level
+    const rowGroupsMap = groupBy(rows, columnId)
+
+    // Perform aggregations for each group
+    const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map(
+      ([groupingValue, groupedRows], index) => {
+        let id = `${columnId}:${groupingValue}`
+        id = parentId ? `${parentId}>${id}` : id
+
+        // First, Recurse to group sub rows before aggregation
+        const subRows = groupUpRecursively(groupedRows, depth + 1, id)
+
+        subRows.forEach((subRow) => {
+          subRow.parentId = id
+        })
+
+        // Flatten the leaf rows of the rows in this group
+        const leafRows = depth
+          ? flattenBy(groupedRows, (row) => row.subRows)
+          : groupedRows
+
+        const row = constructRow(
+          table,
+          id,
+          leafRows[0]!.original,
+          index,
+          depth,
+          undefined,
+          parentId,
+        ) as Row<TFeatures, TData> & Partial<Row_ColumnGrouping>
+
+        Object.assign(row, {
+          groupingColumnId: columnId,
+          groupingValue,
+          subRows,
+          leafRows,
+          getValue: (colId: string) => {
+            // Don't aggregate columns that are in the grouping
+            if (existingGrouping.includes(colId)) {
+              if (row._valuesCache.hasOwnProperty(colId)) {
+                return row._valuesCache[colId]
+              }
+
+              if (groupedRows[0]) {
+                row._valuesCache[colId] =
+                  groupedRows[0].getValue(colId) ?? undefined
+              }
+
+              return row._valuesCache[colId]
+            }
+
+            if (row._groupingValuesCache?.hasOwnProperty(colId)) {
+              return row._groupingValuesCache[colId]
+            }
+
+            // Aggregate the values
+            const column = table.getColumn(colId)
+            const aggregateFn = column_getAggregationFn(
+              column as Column<TFeatures, TData, unknown>,
+            )
+
+            if (!row._groupingValuesCache) row._groupingValuesCache = {}
+
+            if (aggregateFn) {
+              row._groupingValuesCache[colId] = aggregateFn(
+                colId,
+                leafRows,
+                groupedRows,
+              )
+
+              return row._groupingValuesCache[colId]
+            }
+          },
+        })
+
+        subRows.forEach((subRow) => {
+          groupedFlatRows.push(subRow)
+          groupedRowsById[subRow.id] = subRow
+        })
+
+        return row
+      },
+    )
+
+    return aggregatedGroupedRows
+  }
+
+  const groupedRows = groupUpRecursively(rowModel.rows, 0)
+
+  groupedRows.forEach((subRow) => {
+    groupedFlatRows.push(subRow)
+    groupedRowsById[subRow.id] = subRow
+  })
+
+  return {
+    rows: groupedRows,
+    flatRows: groupedFlatRows,
+    rowsById: groupedRowsById,
+  }
+}
+
+function groupBy<TFeatures extends TableFeatures, TData extends RowData = any>(
+  rows: Array<Row<TFeatures, TData>>,
+  columnId: string,
+) {
+  const groupMap = new Map<any, Array<Row<TFeatures, TData>>>()
+
+  return rows.reduce((map, row) => {
+    const resKey = `${row_getGroupingValue(row, columnId)}`
+    const previous = map.get(resKey)
+    if (!previous) {
+      map.set(resKey, [row])
+    } else {
+      previous.push(row)
+    }
+    return map
+  }, groupMap)
+}

package/src/features/column-ordering/columnOrderingFeature.ts

@@ -0,0 +1,96 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../utils'
+import {
+  column_getIndex,
+  column_getIsFirstColumn,
+  column_getIsLastColumn,
+  getDefaultColumnOrderState,
+  table_getOrderColumnsFn,
+  table_resetColumnOrder,
+  table_setColumnOrder,
+} from './columnOrderingFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   Column_ColumnOrdering,
+//   TableOptions_ColumnOrdering,
+//   TableState_ColumnOrdering,
+//   Table_ColumnOrdering,
+// } from './columnOrderingFeature.types'
+
+interface ColumnOrderingFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // Column: Column_ColumnOrdering
+  // Table: Table_ColumnOrdering<TFeatures, TData>
+  // TableOptions: TableOptions_ColumnOrdering
+  // TableState: TableState_ColumnOrdering
+}
+
+export function constructColumnOrderingFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<ColumnOrderingFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        columnOrder: getDefaultColumnOrderState(),
+        ...initialState,
+      }
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        onColumnOrderChange: makeStateUpdater('columnOrder', table),
+      }
+    },
+
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnOrderingFeature', prototype, table, {
+        column_getIndex: {
+          fn: (column, position) => column_getIndex(column, position),
+          memoDeps: (column, position) => [
+            position,
+            column.table.store.state.columnOrder,
+            column.table.store.state.columnPinning,
+            column.table.store.state.grouping,
+          ],
+        },
+        column_getIsFirstColumn: {
+          fn: (column, position) => column_getIsFirstColumn(column, position),
+        },
+        column_getIsLastColumn: {
+          fn: (column, position) => column_getIsLastColumn(column, position),
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('columnOrderingFeature', table, {
+        table_setColumnOrder: {
+          fn: (updater) => table_setColumnOrder(table, updater),
+        },
+        table_resetColumnOrder: {
+          fn: (defaultState) => table_resetColumnOrder(table, defaultState),
+        },
+        table_getOrderColumnsFn: {
+          fn: () => table_getOrderColumnsFn(table),
+          memoDeps: () => [
+            table.store.state.columnOrder,
+            table.store.state.grouping,
+            table.options.groupedColumnMode,
+          ],
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Column Ordering feature adds column ordering state and APIs to the table and column objects.
+ */
+export const columnOrderingFeature = constructColumnOrderingFeature()

package/src/features/column-ordering/columnOrderingFeature.types.ts

@@ -0,0 +1,49 @@
+import type { OnChangeFn, RowData, Updater } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { ColumnPinningPosition } from '../column-pinning/columnPinningFeature.types'
+
+export type ColumnOrderState = Array<string>
+
+export interface TableState_ColumnOrdering {
+  columnOrder: ColumnOrderState
+}
+
+export interface TableOptions_ColumnOrdering {
+  /**
+   * If provided, this function will be called with an `updaterFn` when `state.columnOrder` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+   */
+  onColumnOrderChange?: OnChangeFn<ColumnOrderState>
+}
+
+export interface Column_ColumnOrdering {
+  /**
+   * Returns the index of the column in the order of the visible columns. Optionally pass a `position` parameter to get the index of the column in a sub-section of the table
+   */
+  getIndex: (position?: ColumnPinningPosition | 'center') => number
+  /**
+   * Returns `true` if the column is the first column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the first in a sub-section of the table.
+   */
+  getIsFirstColumn: (position?: ColumnPinningPosition | 'center') => boolean
+  /**
+   * Returns `true` if the column is the last column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the last in a sub-section of the table.
+   */
+  getIsLastColumn: (position?: ColumnPinningPosition | 'center') => boolean
+}
+
+export interface ColumnOrderDefaultOptions {
+  onColumnOrderChange: OnChangeFn<ColumnOrderState>
+}
+
+export interface Table_ColumnOrdering<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Resets the **columnOrder** state to `initialState.columnOrder`, or `true` can be passed to force a default blank state reset to `[]`.
+   */
+  resetColumnOrder: (defaultState?: boolean) => void
+  /**
+   * Sets or updates the `state.columnOrder` state.
+   */
+  setColumnOrder: (updater: Updater<ColumnOrderState>) => void
+}

package/src/features/column-ordering/columnOrderingFeature.utils.ts

@@ -0,0 +1,133 @@
+import { table_getPinnedVisibleLeafColumns } from '../column-pinning/columnPinningFeature.utils'
+import type { GroupingState } from '../column-grouping/columnGroupingFeature.types'
+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 { ColumnPinningPosition } from '../column-pinning/columnPinningFeature.types'
+import type { ColumnOrderState } from './columnOrderingFeature.types'
+
+export function getDefaultColumnOrderState(): ColumnOrderState {
+  return structuredClone([])
+}
+
+export function column_getIndex<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
+  return columns.findIndex((d) => d.id === column.id)
+}
+
+export function column_getIsFirstColumn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
+  return columns[0]?.id === column.id
+}
+
+export function column_getIsLastColumn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
+  return columns[columns.length - 1]?.id === column.id
+}
+
+export function table_setColumnOrder<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, updater: Updater<ColumnOrderState>) {
+  table.options.onColumnOrderChange?.(updater)
+}
+
+export function table_resetColumnOrder<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnOrder(
+    table,
+    defaultState ? [] : (table.initialState.columnOrder ?? []),
+  )
+}
+
+export function table_getOrderColumnsFn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const { columnOrder = [] } = table.store.state
+
+  return (columns: Array<Column_Internal<TFeatures, TData, unknown>>) => {
+    // Sort grouped columns to the start of the column list
+    // before the headers are built
+    let orderedColumns: Array<Column_Internal<TFeatures, TData, unknown>> = []
+
+    // If there is no order, return the normal columns
+    if (!columnOrder.length) {
+      orderedColumns = columns
+    } else {
+      const columnOrderCopy = [...columnOrder]
+
+      // If there is an order, make a copy of the columns
+      const columnsCopy = [...columns]
+
+      // And make a new ordered array of the columns
+
+      // Loop over the columns and place them in order into the new array
+      while (columnsCopy.length && columnOrderCopy.length) {
+        const targetColumnId = columnOrderCopy.shift()
+        const foundIndex = columnsCopy.findIndex((d) => d.id === targetColumnId)
+        if (foundIndex > -1) {
+          orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!)
+        }
+      }
+
+      // If there are any columns left, add them to the end
+      orderedColumns = [...orderedColumns, ...columnsCopy]
+    }
+
+    return orderColumns(table, orderedColumns)
+  }
+}
+
+export function orderColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  leafColumns: Array<Column_Internal<TFeatures, TData, unknown>>,
+) {
+  const grouping = table.store.state.grouping ?? ([] as GroupingState)
+  const { groupedColumnMode } = table.options
+
+  if (!grouping.length || !groupedColumnMode) {
+    return leafColumns
+  }
+
+  const nonGroupingColumns = leafColumns.filter(
+    (col) => !grouping.includes(col.id),
+  )
+
+  if (groupedColumnMode === 'remove') {
+    return nonGroupingColumns
+  }
+
+  const groupingColumns = grouping
+    .map((g) => leafColumns.find((col) => col.id === g)!)
+    .filter(Boolean)
+
+  return [...groupingColumns, ...nonGroupingColumns]
+}