@tanstack/table-core 9.0.0-alpha.0 → 9.0.0-alpha.11

package/src/core/columns/constructColumn.ts

@@ -0,0 +1,111 @@
+import {} from '../../utils'
+import type { Table_Internal } from '../../types/Table'
+import type { CellData, RowData } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type {
+  AccessorFn,
+  ColumnDef,
+  ColumnDefResolved,
+} from '../../types/ColumnDef'
+import type { Column } from '../../types/Column'
+import type { Column_CoreProperties } from './coreColumnsFeature.types'
+
+/**
+ * Creates or retrieves the column prototype for a table.
+ * The prototype is cached on the table and shared by all column instances.
+ */
+function getColumnPrototype<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>): object {
+  if (!table._columnPrototype) {
+    table._columnPrototype = { table }
+    for (const feature of Object.values(table._features)) {
+      feature.assignColumnPrototype?.(table._columnPrototype, table)
+    }
+  }
+  return table._columnPrototype
+}
+
+export function constructColumn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  columnDef: ColumnDef<TFeatures, TData, TValue>,
+  depth: number,
+  parent?: Column<TFeatures, TData, TValue>,
+): Column<TFeatures, TData, TValue> {
+  const defaultColumn = table.getDefaultColumnDef()
+
+  const resolvedColumnDef = {
+    ...defaultColumn,
+    ...columnDef,
+  } as ColumnDefResolved<{}, TData, TValue>
+
+  const accessorKey = resolvedColumnDef.accessorKey
+
+  const id =
+    resolvedColumnDef.id ??
+    (accessorKey ? accessorKey.replaceAll('.', '_') : undefined) ??
+    (typeof resolvedColumnDef.header === 'string'
+      ? resolvedColumnDef.header
+      : undefined)
+
+  let accessorFn: AccessorFn<TData, TValue> | undefined
+
+  if (resolvedColumnDef.accessorFn) {
+    accessorFn = resolvedColumnDef.accessorFn
+  } else if (accessorKey) {
+    // Support deep accessor keys
+    if (accessorKey.includes('.')) {
+      accessorFn = (originalRow: TData) => {
+        let result = originalRow as Record<string, any> | undefined
+
+        for (const key of accessorKey.split('.')) {
+          result = result?.[key]
+          if (process.env.NODE_ENV === 'development' && result === undefined) {
+            console.warn(
+              `"${key}" in deeply nested key "${accessorKey}" returned undefined.`,
+            )
+          }
+        }
+
+        return result as TValue
+      }
+    } else {
+      accessorFn = (originalRow: TData) =>
+        (originalRow as any)[resolvedColumnDef.accessorKey]
+    }
+  }
+
+  if (!id) {
+    if (process.env.NODE_ENV === 'development') {
+      throw new Error(
+        resolvedColumnDef.accessorFn
+          ? `coreColumnsFeature require an id when using an accessorFn`
+          : `coreColumnsFeature require an id when using a non-string header`,
+      )
+    }
+    throw new Error()
+  }
+
+  // Create column with shared prototype for memory efficiency
+  const columnPrototype = getColumnPrototype(table)
+  const column = Object.create(columnPrototype) as Column_CoreProperties<
+    TFeatures,
+    TData,
+    TValue
+  >
+
+  // Only assign instance-specific properties
+  column.accessorFn = accessorFn
+  column.columnDef = resolvedColumnDef as ColumnDef<TFeatures, TData, TValue>
+  column.columns = []
+  column.depth = depth
+  column.id = `${String(id)}`
+  column.parent = parent
+
+  return column as Column<TFeatures, TData, TValue>
+}

package/src/core/columns/coreColumnsFeature.ts

@@ -0,0 +1,90 @@
+import { assignPrototypeAPIs, assignTableAPIs } from '../../utils'
+import {
+  column_getFlatColumns,
+  column_getLeafColumns,
+  table_getAllColumns,
+  table_getAllFlatColumns,
+  table_getAllFlatColumnsById,
+  table_getAllLeafColumns,
+  table_getColumn,
+  table_getDefaultColumnDef,
+} from './coreColumnsFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   Column_Column,
+//   TableOptions_Columns,
+//   Table_Columns,
+// } from './coreColumnsFeature.types'
+
+interface CoreColumnsFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // Column: Column_Column<TFeatures, TData>
+  // Table: Table_Columns<TFeatures, TData>
+  // TableOptions: TableOptions_Columns<TFeatures, TData>
+}
+
+export function constructCoreColumnsFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<CoreColumnsFeatureConstructors<TFeatures, TData>> {
+  return {
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('coreColumnsFeature', prototype, table, {
+        column_getFlatColumns: {
+          fn: (column) => column_getFlatColumns(column),
+          memoDeps: (column) => [column.table.options.columns],
+        },
+        column_getLeafColumns: {
+          fn: (column) => column_getLeafColumns(column),
+          memoDeps: (column) => [
+            column.table.store.state.columnOrder,
+            column.table.store.state.grouping,
+            column.table.options.columns,
+            column.table.options.groupedColumnMode,
+          ],
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('coreColumnsFeature', table, {
+        table_getDefaultColumnDef: {
+          fn: () => table_getDefaultColumnDef(table),
+          memoDeps: () => [table.options.defaultColumn],
+        },
+        table_getAllColumns: {
+          fn: () => table_getAllColumns(table),
+          memoDeps: () => [table.options.columns],
+        },
+        table_getAllFlatColumns: {
+          fn: () => table_getAllFlatColumns(table),
+          memoDeps: () => [table.options.columns],
+        },
+        table_getAllFlatColumnsById: {
+          fn: () => table_getAllFlatColumnsById(table),
+          memoDeps: () => [table.options.columns],
+        },
+        table_getAllLeafColumns: {
+          fn: () => table_getAllLeafColumns(table),
+          memoDeps: () => [
+            table.store.state.columnOrder,
+            table.store.state.grouping,
+            table.options.columns,
+            table.options.groupedColumnMode,
+          ],
+        },
+        table_getColumn: {
+          fn: (columnId) => table_getColumn(table, columnId),
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Core Columns feature provides the core column functionality.
+ */
+export const coreColumnsFeature = constructCoreColumnsFeature()

package/src/core/columns/coreColumnsFeature.types.ts

@@ -0,0 +1,103 @@
+import type { Table_Internal } from '../../types/Table'
+import type { CellData, RowData } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { AccessorFn, ColumnDef } from '../../types/ColumnDef'
+import type { Column } from '../../types/Column'
+
+export interface Column_CoreProperties<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+> {
+  /**
+   * The resolved accessor function to use when extracting the value for the column from each row. Will only be defined if the column def has a valid accessor key or function defined.
+   */
+  accessorFn?: AccessorFn<TData, TValue>
+  /**
+   * The original column def used to create the column.
+   */
+  columnDef: ColumnDef<TFeatures, TData, TValue>
+  /**
+   * The child column (if the column is a group column). Will be an empty array if the column is not a group column.
+   */
+  columns: Array<Column<TFeatures, TData, TValue>>
+  /**
+   * The depth of the column (if grouped) relative to the root column def array.
+   */
+  depth: number
+  /**
+   * The resolved unique identifier for the column resolved in this priority:
+      - A manual `id` property from the column def
+      - The accessor key from the column def
+      - The header string from the column def
+   */
+  id: string
+  /**
+   * The parent column for this column. Will be undefined if this is a root column.
+   */
+  parent?: Column<TFeatures, TData, TValue>
+  /**
+   * Reference to the parent table instance.
+   */
+  table: Table_Internal<TFeatures, TData>
+}
+
+export interface Column_Column<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+> extends Column_CoreProperties<TFeatures, TData, TValue> {
+  /**
+   * Returns the flattened array of this column and all child/grand-child columns for this column.
+   */
+  getFlatColumns: () => Array<Column<TFeatures, TData, TValue>>
+  /**
+   * Returns an array of all leaf-node columns for this column. If a column has no children, it is considered the only leaf-node column.
+   */
+  getLeafColumns: () => Array<Column<TFeatures, TData, TValue>>
+}
+
+export interface TableOptions_Columns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+> {
+  /**
+   * The array of column defs to use for the table.
+   */
+  columns: Array<ColumnDef<TFeatures, TData, TValue>>
+  /**
+   * Default column options to use for all column defs supplied to the table.
+   */
+  defaultColumn?: Partial<ColumnDef<TFeatures, TData, TValue>>
+}
+
+export interface Table_Columns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Returns a map of all flat columns by their ID.
+   */
+  getAllFlatColumnsById: () => Record<string, Column<TFeatures, TData, unknown>>
+  /**
+   * Returns the default column options to use for all column defs supplied to the table.
+   */
+  getDefaultColumnDef: () => Partial<ColumnDef<TFeatures, TData, unknown>>
+  /**
+   * Returns all columns in the table in their normalized and nested hierarchy.
+   */
+  getAllColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * Returns all columns in the table flattened to a single level.
+   */
+  getAllFlatColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * Returns all leaf-node columns in the table flattened to a single level. This does not include parent columns.
+   */
+  getAllLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * Returns a single column by its ID.
+   */
+  getColumn: (columnId: string) => Column<TFeatures, TData, unknown> | undefined
+}

package/src/core/columns/coreColumnsFeature.utils.ts

@@ -0,0 +1,160 @@
+import { callMemoOrStaticFn } from '../../utils'
+import { table_getOrderColumnsFn } from '../../features/column-ordering/columnOrderingFeature.utils'
+import { constructColumn } from './constructColumn'
+import type { Table_Internal } from '../../types/Table'
+import type { CellData, RowData } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type {
+  ColumnDef,
+  ColumnDefResolved,
+  GroupColumnDef,
+} from '../../types/ColumnDef'
+import type { Column } from '../../types/Column'
+
+export function column_getFlatColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column<TFeatures, TData, TValue>,
+): Array<Column<TFeatures, TData, TValue>> {
+  return [column, ...column.columns.flatMap((col) => col.getFlatColumns())]
+}
+
+export function column_getLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column<TFeatures, TData, TValue>,
+): Array<Column<TFeatures, TData, TValue>> {
+  if (column.columns.length) {
+    const leafColumns = column.columns.flatMap(
+      (col) => col.getLeafColumns(), // recursive
+    )
+
+    return callMemoOrStaticFn(
+      column.table,
+      'getOrderColumns',
+      table_getOrderColumnsFn,
+    )(leafColumns as any) as any
+  }
+
+  return [column]
+}
+
+export function table_getDefaultColumnDef<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+): Partial<ColumnDef<TFeatures, TData, unknown>> {
+  return {
+    header: (props) => {
+      const resolvedColumnDef = props.header.column
+        .columnDef as ColumnDefResolved<{}, TData>
+
+      if (resolvedColumnDef.accessorKey) {
+        return resolvedColumnDef.accessorKey
+      }
+
+      if (resolvedColumnDef.accessorFn) {
+        return resolvedColumnDef.id
+      }
+
+      return null
+    },
+    cell: (props) => props.renderValue<any>()?.toString?.() ?? null,
+    ...Object.values(table._features).reduce((obj, feature) => {
+      return Object.assign(obj, feature.getDefaultColumnDef?.())
+    }, {}),
+    ...table.options.defaultColumn,
+  } as Partial<ColumnDef<TFeatures, TData, unknown>>
+}
+
+export function table_getAllColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+): Array<Column<TFeatures, TData, unknown>> {
+  const recurseColumns = (
+    colDefs: Array<ColumnDef<TFeatures, TData, unknown>>,
+    parent?: Column<TFeatures, TData, unknown>,
+    depth = 0,
+  ): Array<Column<TFeatures, TData, unknown>> => {
+    return colDefs.map((columnDef) => {
+      const column = constructColumn(table, columnDef, depth, parent)
+
+      const groupingColumnDef = columnDef as GroupColumnDef<
+        TFeatures,
+        TData,
+        unknown
+      >
+
+      column.columns = groupingColumnDef.columns
+        ? recurseColumns(groupingColumnDef.columns, column, depth + 1)
+        : []
+
+      return column
+    })
+  }
+
+  return recurseColumns(table.options.columns as any)
+}
+
+export function table_getAllFlatColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+): Array<Column<TFeatures, TData, unknown>> {
+  return table.getAllColumns().flatMap((column) => column.getFlatColumns())
+}
+
+export function table_getAllFlatColumnsById<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+): Record<string, Column<TFeatures, TData, unknown>> {
+  return table.getAllFlatColumns().reduce(
+    (acc, column) => {
+      acc[column.id] = column
+      return acc
+    },
+    {} as Record<string, Column<TFeatures, TData, unknown>>,
+  )
+}
+
+export function table_getAllLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+): Array<Column<TFeatures, TData, unknown>> {
+  const leafColumns = table.getAllColumns().flatMap(
+    (c) => c.getLeafColumns(), // recursive
+  )
+  return callMemoOrStaticFn(
+    table,
+    'getOrderColumns',
+    table_getOrderColumnsFn,
+  )(leafColumns as any) as any
+}
+
+export function table_getColumn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  columnId: string,
+): Column<TFeatures, TData, unknown> | undefined {
+  const column = table.getAllFlatColumnsById()[columnId]
+
+  if (process.env.NODE_ENV === 'development' && !column) {
+    console.warn(`[Table] Column with id '${columnId}' does not exist.`)
+  }
+
+  return column
+}

package/src/core/coreFeatures.ts

@@ -0,0 +1,24 @@
+import { coreCellsFeature } from './cells/coreCellsFeature'
+import { coreColumnsFeature } from './columns/coreColumnsFeature'
+import { coreHeadersFeature } from './headers/coreHeadersFeature'
+import { coreRowModelsFeature } from './row-models/coreRowModelsFeature'
+import { coreRowsFeature } from './rows/coreRowsFeature'
+import { coreTablesFeature } from './table/coreTablesFeature'
+
+export interface CoreFeatures {
+  coreCellsFeature: typeof coreCellsFeature
+  coreColumnsFeature: typeof coreColumnsFeature
+  coreHeadersFeature: typeof coreHeadersFeature
+  coreRowModelsFeature: typeof coreRowModelsFeature
+  coreRowsFeature: typeof coreRowsFeature
+  coreTablesFeature: typeof coreTablesFeature
+}
+
+export const coreFeatures: CoreFeatures = {
+  coreCellsFeature,
+  coreColumnsFeature,
+  coreHeadersFeature,
+  coreRowModelsFeature,
+  coreRowsFeature,
+  coreTablesFeature,
+}

package/src/core/headers/buildHeaderGroups.ts

@@ -0,0 +1,177 @@
+import { callMemoOrStaticFn } from '../../utils'
+import { column_getIsVisible } from '../../features/column-visibility/columnVisibilityFeature.utils'
+import { constructHeader } from './constructHeader'
+import type { Table_Internal } from '../../types/Table'
+import type { CellData, RowData } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { Header } from '../../types/Header'
+import type { HeaderGroup } from '../../types/HeaderGroup'
+import type { Column } from '../../types/Column'
+
+export function buildHeaderGroups<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  allColumns: Array<Column<TFeatures, TData, TValue>>,
+  columnsToGroup: Array<Column<TFeatures, TData, TValue>>,
+  table: Table_Internal<TFeatures, TData>,
+  headerFamily?: 'center' | 'left' | 'right',
+) {
+  // Find the max depth of the columns:
+  // build the leaf column row
+  // build each buffer row going up
+  //    placeholder for non-existent level
+  //    real column for existing level
+
+  let maxDepth = 0
+
+  const findMaxDepth = (
+    columns: Array<Column<TFeatures, TData, TValue>>,
+    depth = 1,
+  ) => {
+    maxDepth = Math.max(maxDepth, depth)
+
+    columns
+      .filter((column) =>
+        callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+      )
+      .forEach((column) => {
+        if (column.columns.length) {
+          findMaxDepth(column.columns, depth + 1)
+        }
+      }, 0)
+  }
+
+  findMaxDepth(allColumns)
+
+  const headerGroups: Array<HeaderGroup<TFeatures, TData>> = []
+
+  const constructHeaderGroup = (
+    headersToGroup: Array<Header<TFeatures, TData, TValue>>,
+    depth: number,
+  ) => {
+    // The header group we are creating
+    const headerGroup: HeaderGroup<TFeatures, TData> = {
+      depth,
+      id: [headerFamily, `${depth}`].filter(Boolean).join('_'),
+      headers: [],
+    } as any
+
+    // The parent columns we're going to scan next
+    const pendingParentHeaders: Array<Header<TFeatures, TData, TValue>> = []
+
+    // Scan each column for parents
+    headersToGroup.forEach((headerToGroup) => {
+      // What is the latest (last) parent column?
+
+      const latestPendingParentHeader = [...pendingParentHeaders].reverse()[0]
+
+      const isLeafHeader = headerToGroup.column.depth === headerGroup.depth
+
+      let column: Column<TFeatures, TData, TValue>
+      let isPlaceholder = false
+
+      if (isLeafHeader && headerToGroup.column.parent) {
+        // The parent header is new
+        column = headerToGroup.column.parent
+      } else {
+        // The parent header is repeated
+        column = headerToGroup.column
+        isPlaceholder = true
+      }
+
+      if (
+        latestPendingParentHeader &&
+        latestPendingParentHeader.column === column
+      ) {
+        // This column is repeated. Add it as a sub header to the next batch
+        latestPendingParentHeader.subHeaders.push(headerToGroup)
+      } else {
+        // This is a new header. Let's create it
+        const header = constructHeader(table, column, {
+          id: [headerFamily, depth, column.id, headerToGroup.id]
+            .filter(Boolean)
+            .join('_'),
+          isPlaceholder,
+          placeholderId: isPlaceholder
+            ? `${pendingParentHeaders.filter((d) => d.column === column).length}`
+            : undefined,
+          depth,
+          index: pendingParentHeaders.length,
+        })
+
+        // Add the headerToGroup as a subHeader of the new header
+        header.subHeaders.push(headerToGroup)
+        // Add the new header to the pendingParentHeaders to get grouped
+        // in the next batch
+        pendingParentHeaders.push(header)
+      }
+
+      headerGroup.headers.push(headerToGroup)
+      headerToGroup.headerGroup = headerGroup
+    })
+
+    headerGroups.push(headerGroup)
+
+    if (depth > 0) {
+      constructHeaderGroup(pendingParentHeaders, depth - 1)
+    }
+  }
+
+  const bottomHeaders = columnsToGroup.map((column, index) =>
+    constructHeader(table, column, {
+      depth: maxDepth,
+      index,
+    }),
+  )
+
+  constructHeaderGroup(bottomHeaders, maxDepth - 1)
+
+  headerGroups.reverse()
+
+  // headerGroups = headerGroups.filter(headerGroup => {
+  //   return !headerGroup.headers.every(header => header.isPlaceholder)
+  // })
+
+  const recurseHeadersForSpans = (
+    headers: Array<Header<TFeatures, TData, TValue>>,
+  ): Array<{ colSpan: number; rowSpan: number }> => {
+    const filteredHeaders = headers.filter((header) =>
+      callMemoOrStaticFn(header.column, 'getIsVisible', column_getIsVisible),
+    )
+
+    return filteredHeaders.map((header) => {
+      let colSpan = 0
+      let rowSpan = 0
+      let childRowSpans = [0]
+
+      if (header.subHeaders.length) {
+        childRowSpans = []
+
+        recurseHeadersForSpans(header.subHeaders).forEach(
+          ({ colSpan: childColSpan, rowSpan: childRowSpan }) => {
+            colSpan += childColSpan
+            childRowSpans.push(childRowSpan)
+          },
+        )
+      } else {
+        colSpan = 1
+      }
+
+      const minChildRowSpan = Math.min(...childRowSpans)
+      rowSpan = rowSpan + minChildRowSpan
+
+      header.colSpan = colSpan
+      header.rowSpan = rowSpan
+
+      return { colSpan, rowSpan }
+    })
+  }
+
+  recurseHeadersForSpans(
+    (headerGroups[0]?.headers ?? []) as Array<Header<TFeatures, TData, TValue>>,
+  )
+
+  return headerGroups
+}