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

package/src/features/row-expanding/createExpandedRowModel.ts

@@ -0,0 +1,72 @@
+import { tableMemo } from '../../utils'
+import { row_getIsExpanded } from './rowExpandingFeature.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 { RowData } from '../../types/type-utils'
+
+export function createExpandedRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(): (table: Table<TFeatures, TData>) => () => RowModel<TFeatures, TData> {
+  return (_table) => {
+    const table = _table as Table_Internal<TFeatures, TData>
+    return tableMemo({
+      feature: 'rowExpandingFeature',
+      table,
+      fnName: 'table.getExpandedRowModel',
+      memoDeps: () => [
+        table.store.state.expanded,
+        table.getPreExpandedRowModel(),
+        table.options.paginateExpandedRows,
+      ],
+      fn: () => _createExpandedRowModel(table),
+    })
+  }
+}
+
+function _createExpandedRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {
+  const rowModel = table.getPreExpandedRowModel()
+  const expanded = table.store.state.expanded
+
+  if (
+    !rowModel.rows.length ||
+    (expanded !== true && !Object.keys(expanded ?? {}).length)
+  ) {
+    return rowModel
+  }
+
+  if (!table.options.paginateExpandedRows) {
+    // Only expand rows at this point if they are being paginated
+    return rowModel
+  }
+
+  return expandRows(rowModel)
+}
+
+export function expandRows<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(rowModel: RowModel<TFeatures, TData>): RowModel<TFeatures, TData> {
+  const expandedRows: Array<Row<TFeatures, TData>> = []
+
+  const handleRow = (row: Row<TFeatures, TData>) => {
+    expandedRows.push(row)
+
+    if (row.subRows.length && row_getIsExpanded(row)) {
+      row.subRows.forEach(handleRow)
+    }
+  }
+
+  rowModel.rows.forEach(handleRow)
+
+  return {
+    rows: expandedRows,
+    flatRows: rowModel.flatRows,
+    rowsById: rowModel.rowsById,
+  }
+}

package/src/features/row-expanding/rowExpandingFeature.ts

@@ -0,0 +1,122 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../utils'
+import {
+  getDefaultExpandedState,
+  row_getCanExpand,
+  row_getIsAllParentsExpanded,
+  row_getIsExpanded,
+  row_getToggleExpandedHandler,
+  row_toggleExpanded,
+  table_autoResetExpanded,
+  table_getCanSomeRowsExpand,
+  table_getExpandedDepth,
+  table_getIsAllRowsExpanded,
+  table_getIsSomeRowsExpanded,
+  table_getToggleAllRowsExpandedHandler,
+  table_resetExpanded,
+  table_setExpanded,
+  table_toggleAllRowsExpanded,
+} from './rowExpandingFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   CachedRowModel_Expanded,
+//   CreateRowModel_Expanded,
+//   Row_RowExpanding,
+//   TableOptions_RowExpanding,
+//   TableState_RowExpanding,
+//   Table_RowExpanding,
+// } from './rowExpandingFeature.types'
+
+interface RowExpandingFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // CachedRowModel: CachedRowModel_Expanded<TFeatures, TData>
+  // CreateRowModels: CreateRowModel_Expanded<TFeatures, TData>
+  // Row: Row_RowExpanding
+  // Table: Table_RowExpanding<TFeatures, TData>
+  // TableOptions: TableOptions_RowExpanding<TFeatures, TData>
+  // TableState: TableState_RowExpanding
+}
+
+export function constructRowExpandingFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<RowExpandingFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        expanded: getDefaultExpandedState(),
+        ...initialState,
+      }
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        onExpandedChange: makeStateUpdater('expanded', table),
+        paginateExpandedRows: true,
+      }
+    },
+
+    assignRowPrototype: (prototype, table) => {
+      assignPrototypeAPIs('rowExpandingFeature', prototype, table, {
+        row_toggleExpanded: {
+          fn: (row, expanded) => row_toggleExpanded(row, expanded),
+        },
+        row_getIsExpanded: {
+          fn: (row) => row_getIsExpanded(row),
+        },
+        row_getCanExpand: {
+          fn: (row) => row_getCanExpand(row),
+        },
+        row_getIsAllParentsExpanded: {
+          fn: (row) => row_getIsAllParentsExpanded(row),
+        },
+        row_getToggleExpandedHandler: {
+          fn: (row) => row_getToggleExpandedHandler(row),
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('rowExpandingFeature', table, {
+        table_autoResetExpanded: {
+          fn: () => table_autoResetExpanded(table),
+        },
+        table_setExpanded: {
+          fn: (updater) => table_setExpanded(table, updater),
+        },
+        table_toggleAllRowsExpanded: {
+          fn: (expanded) => table_toggleAllRowsExpanded(table, expanded),
+        },
+        table_resetExpanded: {
+          fn: (defaultState) => table_resetExpanded(table, defaultState),
+        },
+        table_getCanSomeRowsExpand: {
+          fn: () => table_getCanSomeRowsExpand(table),
+        },
+        table_getToggleAllRowsExpandedHandler: {
+          fn: () => table_getToggleAllRowsExpandedHandler(table),
+        },
+        table_getIsSomeRowsExpanded: {
+          fn: () => table_getIsSomeRowsExpanded(table),
+        },
+        table_getIsAllRowsExpanded: {
+          fn: () => table_getIsAllRowsExpanded(table),
+        },
+        table_getExpandedDepth: {
+          fn: () => table_getExpandedDepth(table),
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Row Expanding feature adds row expanding state and APIs to the table and row objects.
+ */
+export const rowExpandingFeature = constructRowExpandingFeature()

package/src/features/row-expanding/rowExpandingFeature.types.ts

@@ -0,0 +1,141 @@
+import type { Table } from '../../types/Table'
+import type { OnChangeFn, RowData, Updater } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { RowModel } from '../../core/row-models/coreRowModelsFeature.types'
+import type { Row } from '../../types/Row'
+
+export type ExpandedStateList = Record<string, boolean>
+export type ExpandedState = true | Record<string, boolean>
+
+export interface TableState_RowExpanding {
+  expanded: ExpandedState
+}
+
+export interface Row_RowExpanding {
+  /**
+   * Returns whether the row can be expanded.
+   */
+  getCanExpand: () => boolean
+  /**
+   * Returns whether all parent rows of the row are expanded.
+   */
+  getIsAllParentsExpanded: () => boolean
+  /**
+   * Returns whether the row is expanded.
+   */
+  getIsExpanded: () => boolean
+  /**
+   * Returns a function that can be used to toggle the expanded state of the row. This function can be used to bind to an event handler to a button.
+   */
+  getToggleExpandedHandler: () => () => void
+  /**
+   * Toggles the expanded state (or sets it if `expanded` is provided) for the row.
+   */
+  toggleExpanded: (expanded?: boolean) => void
+}
+
+export interface TableOptions_RowExpanding<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Enable this setting to automatically reset the expanded state of the table when expanding state changes.
+   */
+  autoResetExpanded?: boolean
+  /**
+   * Enable/disable expanding for all rows.
+   */
+  enableExpanding?: boolean
+  /**
+   * If provided, allows you to override the default behavior of determining whether a row is currently expanded.
+   */
+  getIsRowExpanded?: (row: Row<TFeatures, TData>) => boolean
+  /**
+   * If provided, allows you to override the default behavior of determining whether a row can be expanded.
+   */
+  getRowCanExpand?: (row: Row<TFeatures, TData>) => boolean
+  /**
+   * Enables manual row expansion. If this is set to `true`, `getExpandedRowModel` will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.
+   */
+  manualExpanding?: boolean
+  /**
+   * This function is called when the `expanded` table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the `tableOptions.state.expanded` option.
+   */
+  onExpandedChange?: OnChangeFn<ExpandedState>
+  /**
+   * If `true` expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If `false` expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
+   */
+  paginateExpandedRows?: boolean
+}
+
+export interface Table_RowExpanding<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  autoResetExpanded: () => void
+  /**
+   * Returns whether there are any rows that can be expanded.
+   */
+  getCanSomeRowsExpand: () => boolean
+  /**
+   * Returns the maximum depth of the expanded rows.
+   */
+  getExpandedDepth: () => number
+  /**
+   * Returns whether all rows are currently expanded.
+   */
+  getIsAllRowsExpanded: () => boolean
+  /**
+   * Returns whether there are any rows that are currently expanded.
+   */
+  getIsSomeRowsExpanded: () => boolean
+  /**
+   * Returns a handler that can be used to toggle the expanded state of all rows. This handler is meant to be used with an `input[type=checkbox]` element.
+   */
+  getToggleAllRowsExpandedHandler: () => (event: unknown) => void
+  /**
+   * Resets the expanded state of the table to the initial state.
+   */
+  resetExpanded: (defaultState?: boolean) => void
+  /**
+   * Updates the expanded state of the table via an update function or value.
+   */
+  setExpanded: (updater: Updater<ExpandedState>) => void
+  /**
+   * Toggles the expanded state for all rows.
+   */
+  toggleAllRowsExpanded: (expanded?: boolean) => void
+}
+
+export interface Table_RowModels_Expanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Returns the row model after expansion has been applied.
+   */
+  getExpandedRowModel: () => RowModel<TFeatures, TData>
+  /**
+   * Returns the row model before expansion has been applied.
+   */
+  getPreExpandedRowModel: () => RowModel<TFeatures, TData>
+}
+
+export interface CreateRowModel_Expanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported `getExpandedRowModel` function to get the expanded row model or implement your own.
+   */
+  expandedRowModel?: (
+    table: Table<TFeatures, TData>,
+  ) => () => RowModel<TFeatures, TData>
+}
+
+export interface CachedRowModel_Expanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  expandedRowModel: () => RowModel<TFeatures, TData>
+}

package/src/features/row-expanding/rowExpandingFeature.utils.ts

@@ -0,0 +1,207 @@
+import type { 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 {
+  ExpandedState,
+  ExpandedStateList,
+} from './rowExpandingFeature.types'
+
+export function getDefaultExpandedState(): ExpandedState {
+  return structuredClone({})
+}
+
+export function table_autoResetExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  if (
+    table.options.autoResetAll ??
+    table.options.autoResetExpanded ??
+    !table.options.manualExpanding
+  ) {
+    queueMicrotask(() => table_resetExpanded(table))
+  }
+}
+
+export function table_setExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, updater: Updater<ExpandedState>) {
+  table.options.onExpandedChange?.(updater)
+}
+
+export function table_toggleAllRowsExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, expanded?: boolean) {
+  if (expanded ?? !table_getIsAllRowsExpanded(table)) {
+    table_setExpanded(table, true)
+  } else {
+    table_setExpanded(table, {})
+  }
+}
+
+export function table_resetExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setExpanded(
+    table,
+    defaultState ? {} : (table.initialState.expanded ?? {}),
+  )
+}
+
+export function table_getCanSomeRowsExpand<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return table
+    .getPrePaginatedRowModel()
+    .flatRows.some((row) => row_getCanExpand(row))
+}
+
+export function table_getToggleAllRowsExpandedHandler<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return (e: unknown) => {
+    ;(e as any).persist?.()
+    table_toggleAllRowsExpanded(table)
+  }
+}
+
+export function table_getIsSomeRowsExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const expanded = table.store.state.expanded ?? {}
+  return expanded === true || Object.values(expanded).some(Boolean)
+}
+
+export function table_getIsAllRowsExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const expanded = table.store.state.expanded ?? {}
+
+  // If expanded is true, save some cycles and return true
+  if (expanded === true) {
+    return true
+  }
+
+  if (!Object.keys(expanded).length) {
+    return false
+  }
+
+  // If any row is not expanded, return false
+  if (table.getRowModel().flatRows.some((row) => !row_getIsExpanded(row))) {
+    return false
+  }
+
+  // They must all be expanded :shrug:
+  return true
+}
+
+export function table_getExpandedDepth<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  let maxDepth = 0
+
+  const rowIds =
+    table.store.state.expanded === true
+      ? Object.keys(table.getRowModel().rowsById)
+      : Object.keys(table.store.state.expanded ?? {})
+
+  rowIds.forEach((id) => {
+    const splitId = id.split('.')
+    maxDepth = Math.max(maxDepth, splitId.length)
+  })
+
+  return maxDepth
+}
+
+export function row_toggleExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>, expanded?: boolean) {
+  table_setExpanded(row.table, (old) => {
+    const exists = old === true ? true : !!old[row.id]
+
+    let oldExpanded: ExpandedStateList = {}
+
+    if (old === true) {
+      Object.keys(row.table.getRowModel().rowsById).forEach((rowId) => {
+        oldExpanded[rowId] = true
+      })
+    } else {
+      oldExpanded = old
+    }
+
+    expanded = expanded ?? !exists
+
+    if (!exists && expanded) {
+      return {
+        ...oldExpanded,
+        [row.id]: true,
+      }
+    }
+
+    if (exists && !expanded) {
+      const { [row.id]: _, ...rest } = oldExpanded
+      return rest
+    }
+
+    return old
+  })
+}
+
+export function row_getIsExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>) {
+  const expanded = row.table.store.state.expanded ?? ({} as ExpandedState)
+
+  return !!(
+    row.table.options.getIsRowExpanded?.(row) ??
+    (expanded === true || expanded[row.id])
+  )
+}
+
+export function row_getCanExpand<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>) {
+  return (
+    row.table.options.getRowCanExpand?.(row) ??
+    ((row.table.options.enableExpanding ?? true) && !!row.subRows.length)
+  )
+}
+
+export function row_getIsAllParentsExpanded<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>) {
+  let isFullyExpanded = true
+  let currentRow = row
+
+  while (isFullyExpanded && currentRow.parentId) {
+    currentRow = row.table.getRow(currentRow.parentId, true)
+    isFullyExpanded = row_getIsExpanded(row)
+  }
+
+  return isFullyExpanded
+}
+
+export function row_getToggleExpandedHandler<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>) {
+  const canExpand = row_getCanExpand(row)
+
+  return () => {
+    if (!canExpand) return
+    row_toggleExpanded(row)
+  }
+}

package/src/features/row-pagination/createPaginatedRowModel.ts

@@ -0,0 +1,78 @@
+import { tableMemo } from '../../utils'
+import { expandRows } from '../row-expanding/createExpandedRowModel'
+import { getDefaultPaginationState } from './rowPaginationFeature.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 { RowData } from '../../types/type-utils'
+
+export function createPaginatedRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(): (table: Table<TFeatures, TData>) => () => RowModel<TFeatures, TData> {
+  return (_table) => {
+    const table = _table as Table_Internal<TFeatures, TData>
+    return tableMemo({
+      feature: 'rowPaginationFeature',
+      table,
+      fnName: 'table.getPaginatedRowModel',
+      memoDeps: () => [
+        table.getPrePaginatedRowModel(),
+        table.store.state.pagination,
+        table.options.paginateExpandedRows
+          ? table.store.state.expanded
+          : undefined,
+      ],
+      fn: () => _createPaginatedRowModel(table),
+    })
+  }
+}
+
+function _createPaginatedRowModel<
+  TFeatures extends TableFeatures,
+  TData extends RowData = any,
+>(table: Table_Internal<TFeatures, TData>): RowModel<TFeatures, TData> {
+  const prePaginatedRowModel = table.getPrePaginatedRowModel()
+  const pagination = table.store.state.pagination
+
+  if (!prePaginatedRowModel.rows.length) {
+    return prePaginatedRowModel
+  }
+
+  const { pageSize, pageIndex } = pagination ?? getDefaultPaginationState()
+  const { rows, flatRows, rowsById } = prePaginatedRowModel
+  const pageStart = pageSize * pageIndex
+  const pageEnd = pageStart + pageSize
+
+  const paginatedRows = rows.slice(pageStart, pageEnd)
+
+  let paginatedRowModel: RowModel<TFeatures, TData>
+
+  if (!table.options.paginateExpandedRows) {
+    paginatedRowModel = expandRows({
+      rows: paginatedRows,
+      flatRows,
+      rowsById,
+    })
+  } else {
+    paginatedRowModel = {
+      rows: paginatedRows,
+      flatRows,
+      rowsById,
+    }
+  }
+
+  paginatedRowModel.flatRows = []
+
+  const handleRow = (row: Row<TFeatures, TData>) => {
+    paginatedRowModel.flatRows.push(row)
+    if (row.subRows.length) {
+      row.subRows.forEach(handleRow)
+    }
+  }
+
+  paginatedRowModel.rows.forEach(handleRow)
+
+  return paginatedRowModel
+}