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

package/src/features/column-sizing/columnSizingFeature.utils.ts

@@ -0,0 +1,211 @@
+import {
+  table_getCenterHeaderGroups,
+  table_getLeftHeaderGroups,
+  table_getPinnedVisibleLeafColumns,
+  table_getRightHeaderGroups,
+} from '../column-pinning/columnPinningFeature.utils'
+import { column_getIndex } from '../column-ordering/columnOrderingFeature.utils'
+import { callMemoOrStaticFn, cloneState } from '../../utils'
+import type { ColumnPinningPosition } from '../column-pinning/columnPinningFeature.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 { Header } from '../../types/Header'
+import type { Column_Internal } from '../../types/Column'
+import type { ColumnSizingState } from './columnSizingFeature.types'
+
+export function getDefaultColumnSizingState(): ColumnSizingState {
+  return {}
+}
+
+export function getDefaultColumnSizingColumnDef() {
+  return {
+    size: 150,
+    minSize: 20,
+    maxSize: Number.MAX_SAFE_INTEGER,
+  }
+}
+
+export function column_getSize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>): number {
+  const defaultSizes = getDefaultColumnSizingColumnDef()
+  const columnSize = column.table.atoms.columnSizing?.get()?.[column.id]
+
+  return Math.min(
+    Math.max(
+      column.columnDef.minSize ?? defaultSizes.minSize,
+      columnSize ?? column.columnDef.size ?? defaultSizes.size,
+    ),
+    column.columnDef.maxSize ?? defaultSizes.maxSize,
+  )
+}
+
+export function column_getStart<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position: ColumnPinningPosition | 'center',
+): number {
+  const visibleLeafColumns = callMemoOrStaticFn(
+    column.table,
+    'getPinnedVisibleLeafColumns',
+    table_getPinnedVisibleLeafColumns,
+    position,
+  )
+
+  return visibleLeafColumns
+    .slice(0, callMemoOrStaticFn(column, 'getIndex', column_getIndex, position))
+    .reduce((sum: number, c) => sum + column_getSize(c), 0)
+}
+
+export function column_getAfter<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position: ColumnPinningPosition | 'center',
+): number {
+  const visibleLeafColumns = callMemoOrStaticFn(
+    column.table,
+    'getPinnedVisibleLeafColumns',
+    table_getPinnedVisibleLeafColumns,
+    position,
+  )
+
+  return visibleLeafColumns
+    .slice(
+      callMemoOrStaticFn(column, 'getIndex', column_getIndex, position) + 1,
+    )
+    .reduce((sum: number, c) => sum + column_getSize(c), 0)
+}
+
+export function column_resetSize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  table_setColumnSizing(column.table, ({ [column.id]: _, ...rest }) => {
+    return rest
+  })
+}
+
+export function header_getSize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(header: Header<TFeatures, TData, TValue>) {
+  let sum = 0
+
+  const recurse = (h: Header<TFeatures, TData, TValue>) => {
+    if (h.subHeaders.length) {
+      h.subHeaders.forEach(recurse)
+    } else {
+      sum += column_getSize(h.column)
+    }
+  }
+
+  recurse(header)
+
+  return sum
+}
+
+export function header_getStart<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(header: Header<TFeatures, TData, TValue>): number {
+  if (header.index > 0) {
+    const prevSiblingHeader = header.headerGroup?.headers[header.index - 1]
+    if (prevSiblingHeader) {
+      return (
+        header_getStart(prevSiblingHeader) + header_getSize(prevSiblingHeader)
+      )
+    }
+  }
+
+  return 0
+}
+
+// Table APIs
+
+export function table_setColumnSizing<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  updater: Updater<ColumnSizingState>,
+) {
+  table.options.onColumnSizingChange?.(updater)
+}
+
+export function table_resetColumnSizing<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnSizing(
+    table,
+    defaultState ? {} : cloneState(table.initialState.columnSizing ?? {}),
+  )
+}
+
+export function table_getTotalSize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return (
+    table.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
+      return sum + header_getSize(header)
+    }, 0) ?? 0
+  )
+}
+
+export function table_getLeftTotalSize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return (
+    callMemoOrStaticFn(
+      table,
+      'getLeftHeaderGroups',
+      table_getLeftHeaderGroups,
+    )[0]?.headers.reduce((sum: number, header: Header<TFeatures, TData>) => {
+      return sum + header_getSize(header)
+    }, 0) ?? 0
+  )
+}
+
+export function table_getCenterTotalSize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return (
+    callMemoOrStaticFn(
+      table,
+      'getCenterHeaderGroups',
+      table_getCenterHeaderGroups,
+    )[0]?.headers.reduce((sum: number, header: Header<TFeatures, TData>) => {
+      return sum + header_getSize(header)
+    }, 0) ?? 0
+  )
+}
+
+export function table_getRightTotalSize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return (
+    callMemoOrStaticFn(
+      table,
+      'getRightHeaderGroups',
+      table_getRightHeaderGroups,
+    )[0]?.headers.reduce((sum: number, header: Header<TFeatures, TData>) => {
+      return sum + header_getSize(header)
+    }, 0) ?? 0
+  )
+}

package/src/features/column-visibility/columnVisibilityFeature.ts

@@ -0,0 +1,157 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../utils'
+import {
+  row_getCenterVisibleCells,
+  row_getLeftVisibleCells,
+  row_getRightVisibleCells,
+} from '../column-pinning/columnPinningFeature.utils'
+import {
+  column_getCanHide,
+  column_getIsVisible,
+  column_getToggleVisibilityHandler,
+  column_toggleVisibility,
+  getDefaultColumnVisibilityState,
+  row_getAllVisibleCells,
+  row_getVisibleCells,
+  table_getIsAllColumnsVisible,
+  table_getIsSomeColumnsVisible,
+  table_getToggleAllColumnsVisibilityHandler,
+  table_getVisibleFlatColumns,
+  table_getVisibleLeafColumns,
+  table_resetColumnVisibility,
+  table_setColumnVisibility,
+  table_toggleAllColumnsVisible,
+} from './columnVisibilityFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   ColumnDef_ColumnVisibility,
+//   Column_ColumnVisibility,
+//   Row_ColumnVisibility,
+//   TableOptions_ColumnVisibility,
+//   TableState_ColumnVisibility,
+//   Table_ColumnVisibility,
+// } from './columnVisibilityFeature.types'
+
+export interface ColumnVisibilityFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // ColumnDef: ColumnDef_ColumnVisibility
+  // Column: Column_ColumnVisibility
+  // Row: Row_ColumnVisibility<TFeatures, TData>
+  // Table: Table_ColumnVisibility<TFeatures, TData>
+  // TableOptions: TableOptions_ColumnVisibility
+  // TableState: TableState_ColumnVisibility
+}
+
+export function constructColumnVisibilityFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<ColumnVisibilityFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        columnVisibility: getDefaultColumnVisibilityState(),
+        ...initialState,
+      }
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        onColumnVisibilityChange: makeStateUpdater('columnVisibility', table),
+      }
+    },
+
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnVisibilityFeature', prototype, table, {
+        column_getIsVisible: {
+          fn: (column) => column_getIsVisible(column),
+          memoDeps: (column) => [
+            column.table.options.columns,
+            column.table.atoms.columnVisibility?.get(),
+            column.columns,
+          ],
+        },
+        column_getCanHide: {
+          fn: (column) => column_getCanHide(column),
+        },
+        column_getToggleVisibilityHandler: {
+          fn: (column) => column_getToggleVisibilityHandler(column),
+        },
+        column_toggleVisibility: {
+          fn: (column, visible) => column_toggleVisibility(column, visible),
+        },
+      })
+    },
+
+    assignRowPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnVisibilityFeature', prototype, table, {
+        row_getAllVisibleCells: {
+          fn: (row) => row_getAllVisibleCells(row),
+          memoDeps: (row) => [
+            row.getAllCells(),
+            row.table.atoms.columnVisibility?.get(),
+          ],
+        },
+        row_getVisibleCells: {
+          fn: (row, left, center, right) =>
+            row_getVisibleCells(left, center, right),
+          memoDeps: (row) => [
+            row_getLeftVisibleCells(row),
+            row_getCenterVisibleCells(row),
+            row_getRightVisibleCells(row),
+          ],
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('columnVisibilityFeature', table, {
+        table_getVisibleFlatColumns: {
+          fn: () => table_getVisibleFlatColumns(table),
+          memoDeps: () => [
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get(),
+            table.options.columns,
+          ],
+        },
+        table_getVisibleLeafColumns: {
+          fn: () => table_getVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.atoms.columnVisibility?.get(),
+            table.atoms.columnOrder?.get(),
+            table.options.columns,
+          ],
+        },
+        table_setColumnVisibility: {
+          fn: (updater) => table_setColumnVisibility(table, updater),
+        },
+        table_resetColumnVisibility: {
+          fn: (defaultState) =>
+            table_resetColumnVisibility(table, defaultState),
+        },
+        table_toggleAllColumnsVisible: {
+          fn: (value) => table_toggleAllColumnsVisible(table, value),
+        },
+        table_getIsAllColumnsVisible: {
+          fn: () => table_getIsAllColumnsVisible(table),
+        },
+        table_getIsSomeColumnsVisible: {
+          fn: () => table_getIsSomeColumnsVisible(table),
+        },
+        table_getToggleAllColumnsVisibilityHandler: {
+          fn: () => table_getToggleAllColumnsVisibilityHandler(table),
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Column Visibility feature adds column visibility state and APIs to the table, row, and column objects.
+ */
+export const columnVisibilityFeature = constructColumnVisibilityFeature()

package/src/features/column-visibility/columnVisibilityFeature.types.ts

@@ -0,0 +1,101 @@
+import type { OnChangeFn, RowData, Updater } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { Cell } from '../../types/Cell'
+import type { Column } from '../../types/Column'
+
+export type ColumnVisibilityState = Record<string, boolean>
+
+export interface TableState_ColumnVisibility {
+  columnVisibility: ColumnVisibilityState
+}
+
+export interface TableOptions_ColumnVisibility {
+  /**
+   * Whether to enable column hiding. Defaults to `true`.
+   */
+  enableHiding?: boolean
+  /**
+   * If provided, this function will be called with an `updaterFn` when `state.columnVisibility` 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.
+   */
+  onColumnVisibilityChange?: OnChangeFn<ColumnVisibilityState>
+}
+
+export type VisibilityDefaultOptions = Pick<
+  TableOptions_ColumnVisibility,
+  'onColumnVisibilityChange'
+>
+
+export interface Table_ColumnVisibility<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Returns whether all columns are visible
+   */
+  getIsAllColumnsVisible: () => boolean
+  /**
+   * Returns whether any columns are visible
+   */
+  getIsSomeColumnsVisible: () => boolean
+  /**
+   * Returns a handler for toggling the visibility of all columns, meant to be bound to a `input[type=checkbox]` element.
+   */
+  getToggleAllColumnsVisibilityHandler: () => (event: unknown) => void
+  /**
+   * Returns a flat array of columns that are visible, including parent columns.
+   */
+  getVisibleFlatColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * Returns a flat array of leaf-node columns that are visible.
+   */
+  getVisibleLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * Resets the column visibility state to the initial state. If `defaultState` is provided, the state will be reset to `{}`
+   */
+  resetColumnVisibility: (defaultState?: boolean) => void
+  /**
+   * Sets or updates the `state.columnVisibility` state.
+   */
+  setColumnVisibility: (updater: Updater<ColumnVisibilityState>) => void
+  /**
+   * Toggles the visibility of all columns.
+   */
+  toggleAllColumnsVisible: (value?: boolean) => void
+}
+
+export interface ColumnDef_ColumnVisibility {
+  /**
+   * Enables/disables column hiding for this column. Defaults to `true`.
+   */
+  enableHiding?: boolean
+}
+
+export interface Row_ColumnVisibility<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  getAllVisibleCells: () => Array<Cell<TFeatures, TData, unknown>>
+  /**
+   * Returns an array of cells that account for column visibility for the row.
+   */
+  getVisibleCells: () => Array<Cell<TFeatures, TData, unknown>>
+}
+
+export interface Column_ColumnVisibility {
+  /**
+   * Returns whether the column can be hidden
+   */
+  getCanHide: () => boolean
+  /**
+   * Returns whether the column is visible
+   */
+  getIsVisible: () => boolean
+  /**
+   * Returns a function that can be used to toggle the column visibility. This function can be used to bind to an event handler to a checkbox.
+   */
+  getToggleVisibilityHandler: () => (event: unknown) => void
+  /**
+   * Toggles the visibility of the column.
+   */
+  toggleVisibility: (value?: boolean) => void
+}

package/src/features/column-visibility/columnVisibilityFeature.utils.ts

@@ -0,0 +1,183 @@
+import { callMemoOrStaticFn, cloneState } 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 { Cell } from '../../types/Cell'
+import type { Column_Internal } from '../../types/Column'
+import type { ColumnVisibilityState } from './columnVisibilityFeature.types'
+import type { Row } from '../../types/Row'
+
+export function getDefaultColumnVisibilityState(): ColumnVisibilityState {
+  return {}
+}
+
+export function column_toggleVisibility<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>, visible?: boolean): void {
+  if (column_getCanHide(column)) {
+    table_setColumnVisibility(column.table, (old) => ({
+      ...old,
+      [column.id]:
+        visible ??
+        !callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+    }))
+  }
+}
+
+export function column_getIsVisible<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>): boolean {
+  const childColumns = column.columns
+  return (
+    (childColumns.length
+      ? childColumns.some((childColumn) =>
+          callMemoOrStaticFn(childColumn, 'getIsVisible', column_getIsVisible),
+        )
+      : column.table.atoms.columnVisibility?.get()?.[column.id]) ?? true
+  )
+}
+
+export function column_getCanHide<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return (
+    (column.columnDef.enableHiding ?? true) &&
+    (column.table.options.enableHiding ?? true)
+  )
+}
+
+export function column_getToggleVisibilityHandler<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return (e: unknown) => {
+    column_toggleVisibility(
+      column,
+      ((e as MouseEvent).target as HTMLInputElement).checked,
+    )
+  }
+}
+
+export function row_getAllVisibleCells<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>) {
+  return row
+    .getAllCells()
+    .filter((cell) =>
+      callMemoOrStaticFn(cell.column, 'getIsVisible', column_getIsVisible),
+    )
+}
+
+export function row_getVisibleCells<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  left: Array<Cell<TFeatures, TData, unknown>>,
+  center: Array<Cell<TFeatures, TData, unknown>>,
+  right: Array<Cell<TFeatures, TData, unknown>>,
+) {
+  return [...left, ...center, ...right]
+}
+
+export function table_getVisibleFlatColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return table
+    .getAllFlatColumns()
+    .filter((column) =>
+      callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+    )
+}
+
+export function table_getVisibleLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return table
+    .getAllLeafColumns()
+    .filter((column) =>
+      callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+    )
+}
+
+export function table_setColumnVisibility<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  updater: Updater<ColumnVisibilityState>,
+) {
+  table.options.onColumnVisibilityChange?.(updater)
+}
+
+export function table_resetColumnVisibility<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnVisibility(
+    table,
+    defaultState ? {} : cloneState(table.initialState.columnVisibility ?? {}),
+  )
+}
+
+export function table_toggleAllColumnsVisible<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, value?: boolean) {
+  value = value ?? !table_getIsAllColumnsVisible(table)
+
+  table_setColumnVisibility(
+    table,
+    table.getAllLeafColumns().reduce(
+      (obj, column) => ({
+        ...obj,
+        [column.id]: !value ? !column_getCanHide(column) : value,
+      }),
+      {},
+    ),
+  )
+}
+
+export function table_getIsAllColumnsVisible<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return !table
+    .getAllLeafColumns()
+    .some(
+      (column) =>
+        !callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+    )
+}
+
+export function table_getIsSomeColumnsVisible<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return table
+    .getAllLeafColumns()
+    .some((column) =>
+      callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+    )
+}
+
+export function table_getToggleAllColumnsVisibilityHandler<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return (e: unknown) => {
+    table_toggleAllColumnsVisible(
+      table,
+      ((e as MouseEvent).target as HTMLInputElement).checked,
+    )
+  }
+}