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

package/src/features/column-pinning/columnPinningFeature.utils.ts

@@ -0,0 +1,537 @@
+import {
+  column_getIsVisible,
+  row_getAllVisibleCells,
+  table_getVisibleLeafColumns,
+} from '../column-visibility/columnVisibilityFeature.utils'
+import { buildHeaderGroups } from '../../core/headers/buildHeaderGroups'
+import { callMemoOrStaticFn } from '../../utils'
+import type { HeaderGroup } from '../../types/HeaderGroup'
+import type { Cell } from '../../types/Cell'
+import type { Row } from '../../types/Row'
+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,
+  ColumnPinningState,
+} from './columnPinningFeature.types'
+
+// State
+
+export function getDefaultColumnPinningState(): ColumnPinningState {
+  return structuredClone({
+    left: [],
+    right: [],
+  })
+}
+
+// Column APIs
+
+export function column_pin<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position: ColumnPinningPosition,
+) {
+  const columnIds = column
+    .getLeafColumns()
+    .map((d) => d.id)
+    .filter(Boolean)
+
+  table_setColumnPinning(column.table, (old) => {
+    if (position === 'right') {
+      return {
+        left: old.left.filter((d) => !columnIds.includes(d)),
+        right: [
+          ...old.right.filter((d) => !columnIds.includes(d)),
+          ...columnIds,
+        ],
+      }
+    }
+
+    if (position === 'left') {
+      return {
+        left: [...old.left.filter((d) => !columnIds.includes(d)), ...columnIds],
+        right: old.right.filter((d) => !columnIds.includes(d)),
+      }
+    }
+
+    return {
+      left: old.left.filter((d) => !columnIds.includes(d)),
+      right: old.right.filter((d) => !columnIds.includes(d)),
+    }
+  })
+}
+
+export function column_getCanPin<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  const leafColumns = column.getLeafColumns() as Array<
+    Column_Internal<TFeatures, TData, TValue>
+  >
+
+  return leafColumns.some(
+    (leafColumn) =>
+      (leafColumn.columnDef.enablePinning ?? true) &&
+      (column.table.options.enableColumnPinning ?? true),
+  )
+}
+
+export function column_getIsPinned<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+): ColumnPinningPosition | false {
+  const leafColumnIds = column.getLeafColumns().map((d) => d.id)
+
+  const { left, right } =
+    column.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+
+  const isLeft = leafColumnIds.some((d) => left.includes(d))
+  const isRight = leafColumnIds.some((d) => right.includes(d))
+
+  return isLeft ? 'left' : isRight ? 'right' : false
+}
+
+export function column_getPinnedIndex<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  const position = column_getIsPinned(column)
+
+  return position
+    ? (column.table.store.state.columnPinning?.[position].indexOf(column.id) ??
+        -1)
+    : 0
+}
+
+// Row APIs
+
+export function row_getCenterVisibleCells<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>) {
+  const allCells = callMemoOrStaticFn(
+    row,
+    'getAllVisibleCells',
+    row_getAllVisibleCells,
+  )
+  const { left, right } =
+    row.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+  const leftAndRight: Array<string> = [...left, ...right]
+  return allCells.filter((d) => !leftAndRight.includes(d.column.id))
+}
+
+export function row_getLeftVisibleCells<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>): Array<Cell<TFeatures, TData, unknown>> {
+  const allCells = callMemoOrStaticFn(
+    row,
+    'getAllVisibleCells',
+    row_getAllVisibleCells,
+  )
+  const { left } =
+    row.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+  const cells = left
+    .map((columnId) => allCells.find((cell) => cell.column.id === columnId)!)
+    .filter(Boolean)
+  // Assign position property directly to preserve prototype chain
+  cells.forEach((cell) => {
+    cell.position = 'left'
+  })
+  return cells as any
+}
+
+export function row_getRightVisibleCells<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(row: Row<TFeatures, TData>) {
+  const allCells = callMemoOrStaticFn(
+    row,
+    'getAllVisibleCells',
+    row_getAllVisibleCells,
+  )
+  const { right } =
+    row.table.store.state.columnPinning ?? getDefaultColumnPinningState()
+  const cells = right
+    .map((columnId) => allCells.find((cell) => cell.column.id === columnId)!)
+    .filter(Boolean)
+  // Assign position property directly to preserve prototype chain
+  cells.forEach((cell) => {
+    cell.position = 'right'
+  })
+  return cells as any
+}
+
+// Table APIs
+
+export function table_setColumnPinning<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  updater: Updater<ColumnPinningState>,
+) {
+  table.options.onColumnPinningChange?.(updater)
+}
+
+export function table_resetColumnPinning<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnPinning(
+    table,
+    defaultState
+      ? getDefaultColumnPinningState()
+      : (table.initialState.columnPinning ?? getDefaultColumnPinningState()),
+  )
+}
+
+export function table_getIsSomeColumnsPinned<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, position?: ColumnPinningPosition) {
+  const pinningState = table.store.state.columnPinning
+
+  if (!position) {
+    return Boolean(pinningState?.left.length || pinningState?.right.length)
+  }
+  return Boolean(pinningState?.[position].length)
+}
+
+// header groups
+
+export function table_getLeftHeaderGroups<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const allColumns = table.getAllColumns()
+  const leafColumns = callMemoOrStaticFn(
+    table,
+    'getVisibleLeafColumns',
+    table_getVisibleLeafColumns,
+  ) as Array<Column_Internal<TFeatures, TData, unknown>>
+  const { left } =
+    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+
+  const orderedLeafColumns = left
+    .map((columnId) => leafColumns.find((d) => d.id === columnId)!)
+    .filter(Boolean)
+
+  return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'left')
+}
+
+export function table_getRightHeaderGroups<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const allColumns = table.getAllColumns()
+  const leafColumns = callMemoOrStaticFn(
+    table,
+    'getVisibleLeafColumns',
+    table_getVisibleLeafColumns,
+  ) as unknown as Array<Column_Internal<TFeatures, TData, unknown>>
+  const { right } =
+    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+
+  const orderedLeafColumns = right
+    .map((columnId) => leafColumns.find((d) => d.id === columnId)!)
+    .filter(Boolean)
+
+  return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'right')
+}
+
+export function table_getCenterHeaderGroups<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+): Array<HeaderGroup<TFeatures, TData>> {
+  const allColumns = table.getAllColumns()
+  let leafColumns = callMemoOrStaticFn(
+    table,
+    'getVisibleLeafColumns',
+    table_getVisibleLeafColumns,
+  ) as unknown as Array<Column_Internal<TFeatures, TData, unknown>>
+  const { left, right } =
+    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+  const leftAndRight: Array<string> = [...left, ...right]
+
+  leafColumns = leafColumns.filter(
+    (column) => !leftAndRight.includes(column.id),
+  )
+  return buildHeaderGroups(allColumns, leafColumns, table, 'center')
+}
+
+// footer groups
+
+export function table_getLeftFooterGroups<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const headerGroups = callMemoOrStaticFn(
+    table,
+    'getLeftHeaderGroups',
+    table_getLeftHeaderGroups,
+  )
+  return [...headerGroups].reverse()
+}
+
+export function table_getRightFooterGroups<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const headerGroups = callMemoOrStaticFn(
+    table,
+    'getRightHeaderGroups',
+    table_getRightHeaderGroups,
+  )
+  return [...headerGroups].reverse()
+}
+
+export function table_getCenterFooterGroups<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const headerGroups = callMemoOrStaticFn(
+    table,
+    'getCenterHeaderGroups',
+    table_getCenterHeaderGroups,
+  )
+  return [...headerGroups].reverse()
+}
+
+// flat headers
+
+export function table_getLeftFlatHeaders<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const leftHeaderGroups = callMemoOrStaticFn(
+    table,
+    'getLeftHeaderGroups',
+    table_getLeftHeaderGroups,
+  )
+  return leftHeaderGroups
+    .map((headerGroup) => {
+      return headerGroup.headers
+    })
+    .flat()
+}
+
+export function table_getRightFlatHeaders<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const rightHeaderGroups = callMemoOrStaticFn(
+    table,
+    'getRightHeaderGroups',
+    table_getRightHeaderGroups,
+  )
+  return rightHeaderGroups
+    .map((headerGroup) => {
+      return headerGroup.headers
+    })
+    .flat()
+}
+
+export function table_getCenterFlatHeaders<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const centerHeaderGroups = callMemoOrStaticFn(
+    table,
+    'getCenterHeaderGroups',
+    table_getCenterHeaderGroups,
+  )
+  return centerHeaderGroups
+    .map((headerGroup) => {
+      return headerGroup.headers
+    })
+    .flat()
+}
+
+// leaf headers
+
+export function table_getLeftLeafHeaders<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return callMemoOrStaticFn(
+    table,
+    'getLeftFlatHeaders',
+    table_getLeftFlatHeaders,
+  ).filter((header) => !header.subHeaders.length)
+}
+
+export function table_getRightLeafHeaders<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return callMemoOrStaticFn(
+    table,
+    'getRightFlatHeaders',
+    table_getRightFlatHeaders,
+  ).filter((header) => !header.subHeaders.length)
+}
+
+export function table_getCenterLeafHeaders<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return callMemoOrStaticFn(
+    table,
+    'getCenterFlatHeaders',
+    table_getCenterFlatHeaders,
+  ).filter((header) => !header.subHeaders.length)
+}
+
+// leaf columns
+
+export function table_getLeftLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const { left } =
+    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+  return left
+    .map(
+      (columnId) =>
+        table.getAllLeafColumns().find((column) => column.id === columnId)!,
+    )
+    .filter(Boolean)
+}
+
+export function table_getRightLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const { right } =
+    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+  return right
+    .map(
+      (columnId) =>
+        table.getAllLeafColumns().find((column) => column.id === columnId)!,
+    )
+    .filter(Boolean)
+}
+
+export function table_getCenterLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const { left, right } =
+    table.store.state.columnPinning ?? getDefaultColumnPinningState()
+  const leftAndRight: Array<string> = [...left, ...right]
+  return table.getAllLeafColumns().filter((d) => !leftAndRight.includes(d.id))
+}
+
+export function table_getPinnedLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  position: ColumnPinningPosition | 'center',
+) {
+  return !position
+    ? table.getAllLeafColumns()
+    : position === 'left'
+      ? callMemoOrStaticFn(
+          table,
+          'getLeftLeafColumns',
+          table_getLeftLeafColumns,
+        )
+      : position === 'right'
+        ? callMemoOrStaticFn(
+            table,
+            'getRightLeafColumns',
+            table_getRightLeafColumns,
+          )
+        : callMemoOrStaticFn(
+            table,
+            'getCenterLeafColumns',
+            table_getCenterLeafColumns,
+          )
+}
+
+// visible leaf columns
+
+export function table_getLeftVisibleLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return callMemoOrStaticFn(
+    table,
+    'getLeftLeafColumns',
+    table_getLeftLeafColumns,
+  ).filter((column) =>
+    callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+  )
+}
+
+export function table_getRightVisibleLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return callMemoOrStaticFn(
+    table,
+    'getRightLeafColumns',
+    table_getRightLeafColumns,
+  ).filter((column) =>
+    callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+  )
+}
+
+export function table_getCenterVisibleLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  return callMemoOrStaticFn(
+    table,
+    'getCenterLeafColumns',
+    table_getCenterLeafColumns,
+  ).filter((column) =>
+    callMemoOrStaticFn(column, 'getIsVisible', column_getIsVisible),
+  )
+}
+
+export function table_getPinnedVisibleLeafColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  return !position
+    ? callMemoOrStaticFn(
+        table,
+        'getVisibleLeafColumns',
+        table_getVisibleLeafColumns,
+      )
+    : position === 'left'
+      ? callMemoOrStaticFn(
+          table,
+          'getLeftVisibleLeafColumns',
+          table_getLeftVisibleLeafColumns,
+        )
+      : position === 'right'
+        ? callMemoOrStaticFn(
+            table,
+            'getRightVisibleLeafColumns',
+            table_getRightVisibleLeafColumns,
+          )
+        : callMemoOrStaticFn(
+            table,
+            'getCenterVisibleLeafColumns',
+            table_getCenterVisibleLeafColumns,
+          )
+}

package/src/features/column-resizing/columnResizingFeature.ts

@@ -0,0 +1,92 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../utils'
+import {
+  column_getCanResize,
+  column_getIsResizing,
+  getDefaultColumnResizingState,
+  header_getResizeHandler,
+  table_resetHeaderSizeInfo,
+  table_setColumnResizing,
+} from './columnResizingFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   Column_ColumnResizing,
+//   Header_ColumnResizing,
+//   TableOptions_ColumnResizing,
+//   TableState_ColumnResizing,
+//   Table_ColumnResizing,
+// } from './columnResizingFeature.types'
+
+interface ColumnResizingFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // Column: Column_ColumnResizing
+  // Header: Header_ColumnResizing
+  // Table: Table_ColumnResizing
+  // TableOptions: TableOptions_ColumnResizing
+  // TableState: TableState_ColumnResizing
+}
+
+export function constructColumnResizingFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<ColumnResizingFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        columnResizing: getDefaultColumnResizingState(),
+        ...initialState,
+      }
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        columnResizeMode: 'onEnd',
+        columnResizeDirection: 'ltr',
+        onColumnResizingChange: makeStateUpdater('columnResizing', table),
+      }
+    },
+
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnResizingFeature', prototype, table, {
+        column_getCanResize: {
+          fn: (column) => column_getCanResize(column),
+        },
+        column_getIsResizing: {
+          fn: (column) => column_getIsResizing(column),
+        },
+      })
+    },
+
+    assignHeaderPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnResizingFeature', prototype, table, {
+        header_getResizeHandler: {
+          fn: (header, _contextDocument) =>
+            header_getResizeHandler(header, _contextDocument),
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('columnResizingFeature', table, {
+        table_setColumnResizing: {
+          fn: (updater) => table_setColumnResizing(table, updater),
+        },
+        table_resetHeaderSizeInfo: {
+          fn: (defaultState) => table_resetHeaderSizeInfo(table, defaultState),
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Column Resizing feature adds column resizing state and APIs to the table and column objects.
+ * **Note:** This is dependent on the Column Sizing feature.
+ */
+export const columnResizingFeature = constructColumnResizingFeature()

package/src/features/column-resizing/columnResizingFeature.types.ts

@@ -0,0 +1,81 @@
+import type { OnChangeFn, Updater } from '../../types/type-utils'
+
+export interface TableState_ColumnResizing {
+  columnResizing: columnResizingState
+}
+
+export interface columnResizingState {
+  columnSizingStart: Array<[string, number]>
+  deltaOffset: null | number
+  deltaPercentage: null | number
+  isResizingColumn: false | string
+  startOffset: null | number
+  startSize: null | number
+}
+
+export type ColumnResizeMode = 'onChange' | 'onEnd'
+
+export type ColumnResizeDirection = 'ltr' | 'rtl'
+
+export interface TableOptions_ColumnResizing {
+  /**
+   * Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle.
+   */
+  columnResizeMode?: ColumnResizeMode
+  /**
+   * Enables or disables column resizing for the column.
+   */
+  enableColumnResizing?: boolean
+  /**
+   * Enables or disables right-to-left support for resizing the column. defaults to 'ltr'.
+   */
+  columnResizeDirection?: ColumnResizeDirection
+  /**
+   * If provided, this function will be called with an `updaterFn` when `state.columnResizing` changes. This overrides the default internal state management, so you will also need to supply `state.columnResizing` from your own managed state.
+   */
+  onColumnResizingChange?: OnChangeFn<columnResizingState>
+}
+
+export type ColumnResizingDefaultOptions = Pick<
+  TableOptions_ColumnResizing,
+  'columnResizeMode' | 'onColumnResizingChange' | 'columnResizeDirection'
+>
+
+export interface Table_ColumnResizing {
+  /**
+   * Resets column sizing info to its initial state. If `defaultState` is `true`, the default state for the table will be used instead of the initialValue provided to the table.
+   */
+  resetHeaderSizeInfo: (defaultState?: boolean) => void
+  /**
+   * Sets the column sizing info state using an updater function or a value. This will trigger the underlying `oncolumnResizingChange` function if one is passed to the table options, otherwise the state will be managed automatically by the table.
+   */
+  setcolumnResizing: (updater: Updater<columnResizingState>) => void
+}
+
+export interface ColumnDef_ColumnResizing {
+  /**
+   * Enables or disables column resizing for the column.
+   */
+  enableResizing?: boolean
+}
+
+export interface Column_ColumnResizing {
+  /**
+   * Returns `true` if the column can be resized.
+   */
+  getCanResize: () => boolean
+  /**
+   * Returns `true` if the column is currently being resized.
+   */
+  getIsResizing: () => boolean
+}
+
+export interface Header_ColumnResizing {
+  /**
+   * Returns an event handler function that can be used to resize the header. It can be used as an:
+   * - `onMouseDown` handler
+   * - `onTouchStart` handler
+   * The dragging and release events are automatically handled for you.
+   */
+  getResizeHandler: (context?: Document) => (event: unknown) => void
+}