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

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

@@ -0,0 +1,265 @@
+import {
+  column_getSize,
+  header_getSize,
+  table_setColumnSizing,
+} from '../column-sizing/columnSizingFeature.utils'
+import { table_getColumn } from '../../core/columns/coreColumnsFeature.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 { Header } from '../../types/Header'
+import type { Column_Internal } from '../../types/Column'
+import type { ColumnSizingState } from '../column-sizing/columnSizingFeature.types'
+import type { columnResizingState } from './columnResizingFeature.types'
+
+export function getDefaultColumnResizingState(): columnResizingState {
+  return structuredClone({
+    startOffset: null,
+    startSize: null,
+    deltaOffset: null,
+    deltaPercentage: null,
+    isResizingColumn: false,
+    columnSizingStart: [],
+  })
+}
+
+export function column_getCanResize<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return (
+    (column.columnDef.enableResizing ?? true) &&
+    (column.table.options.enableColumnResizing ?? true)
+  )
+}
+
+export function column_getIsResizing<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return column.table.store.state.columnResizing?.isResizingColumn === column.id
+}
+
+export function header_getResizeHandler<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(header: Header<TFeatures, TData, TValue>, _contextDocument?: Document) {
+  const column = table_getColumn(header.column.table, header.column.id)!
+  const canResize = column_getCanResize(column)
+
+  return (event: unknown) => {
+    if (!canResize) {
+      return
+    }
+
+    ;(event as any).persist?.()
+
+    if (isTouchStartEvent(event)) {
+      // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+      if (event.touches.length > 1) {
+        return
+      }
+    }
+
+    const startSize = header_getSize(header)
+
+    const columnSizingStart: Array<[string, number]> = header
+      .getLeafHeaders()
+      .map((leafHeader) => [
+        leafHeader.column.id,
+        column_getSize(leafHeader.column),
+      ])
+
+    const clientX = isTouchStartEvent(event)
+      ? Math.round(event.touches[0]!.clientX)
+      : (event as MouseEvent).clientX
+
+    const newColumnSizing: ColumnSizingState = {}
+
+    const updateOffset = (eventType: 'move' | 'end', clientXPos?: number) => {
+      if (typeof clientXPos !== 'number') {
+        return
+      }
+
+      table_setColumnResizing(column.table, (old) => {
+        const deltaDirection =
+          column.table.options.columnResizeDirection === 'rtl' ? -1 : 1
+        const deltaOffset =
+          (clientXPos - (old.startOffset ?? 0)) * deltaDirection
+        const deltaPercentage = Math.max(
+          deltaOffset / (old.startSize ?? 0),
+          -0.999999,
+        )
+
+        old.columnSizingStart.forEach(([columnId, headerSize]) => {
+          newColumnSizing[columnId] =
+            Math.round(
+              Math.max(headerSize + headerSize * deltaPercentage, 0) * 100,
+            ) / 100
+        })
+
+        return {
+          ...old,
+          deltaOffset,
+          deltaPercentage,
+        }
+      })
+
+      if (
+        column.table.options.columnResizeMode === 'onChange' ||
+        eventType === 'end'
+      ) {
+        table_setColumnSizing(column.table, (old) => ({
+          ...old,
+          ...newColumnSizing,
+        }))
+      }
+    }
+
+    const onMove = (clientXPos?: number) => updateOffset('move', clientXPos)
+
+    const onEnd = (clientXPos?: number) => {
+      updateOffset('end', clientXPos)
+
+      table_setColumnResizing(column.table, (old) => ({
+        ...old,
+        isResizingColumn: false,
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        columnSizingStart: [],
+      }))
+    }
+
+    const contextDocument =
+      _contextDocument || typeof document !== 'undefined' ? document : null
+
+    const mouseEvents = {
+      moveHandler: (e: MouseEvent) => onMove(e.clientX),
+      upHandler: (e: MouseEvent) => {
+        contextDocument?.removeEventListener(
+          'mousemove',
+          mouseEvents.moveHandler,
+        )
+        contextDocument?.removeEventListener('mouseup', mouseEvents.upHandler)
+        onEnd(e.clientX)
+      },
+    }
+
+    const touchEvents = {
+      moveHandler: (touchEvent: TouchEvent) => {
+        if (touchEvent.cancelable) {
+          touchEvent.preventDefault()
+          touchEvent.stopPropagation()
+        }
+        onMove(touchEvent.touches[0]!.clientX)
+        return false
+      },
+      upHandler: (e: TouchEvent) => {
+        contextDocument?.removeEventListener(
+          'touchmove',
+          touchEvents.moveHandler,
+        )
+        contextDocument?.removeEventListener('touchend', touchEvents.upHandler)
+        if (e.cancelable) {
+          e.preventDefault()
+          e.stopPropagation()
+        }
+        onEnd(e.touches[0]?.clientX)
+      },
+    }
+
+    const passiveIfSupported = passiveEventSupported()
+      ? { passive: false }
+      : false
+
+    if (isTouchStartEvent(event)) {
+      contextDocument?.addEventListener(
+        'touchmove',
+        touchEvents.moveHandler,
+        passiveIfSupported,
+      )
+      contextDocument?.addEventListener(
+        'touchend',
+        touchEvents.upHandler,
+        passiveIfSupported,
+      )
+    } else {
+      contextDocument?.addEventListener(
+        'mousemove',
+        mouseEvents.moveHandler,
+        passiveIfSupported,
+      )
+      contextDocument?.addEventListener(
+        'mouseup',
+        mouseEvents.upHandler,
+        passiveIfSupported,
+      )
+    }
+
+    table_setColumnResizing(column.table, (old) => ({
+      ...old,
+      startOffset: clientX,
+      startSize,
+      deltaOffset: 0,
+      deltaPercentage: 0,
+      columnSizingStart,
+      isResizingColumn: column.id,
+    }))
+  }
+}
+
+export function table_setColumnResizing<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  updater: Updater<columnResizingState>,
+) {
+  table.options.onColumnResizingChange?.(updater)
+}
+
+export function table_resetHeaderSizeInfo<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnResizing(
+    table,
+    defaultState
+      ? getDefaultColumnResizingState()
+      : (table.initialState.columnResizing ?? getDefaultColumnResizingState()),
+  )
+}
+
+export function passiveEventSupported() {
+  let passiveSupported: boolean | null = null
+
+  if (typeof passiveSupported === 'boolean') return passiveSupported
+
+  let supported = false
+  try {
+    const options = {
+      get passive() {
+        supported = true
+        return false
+      },
+    }
+
+    const noop = () => {}
+
+    window.addEventListener('test', noop, options)
+    window.removeEventListener('test', noop)
+  } catch (err) {
+    supported = false
+  }
+  passiveSupported = supported
+  return passiveSupported
+}
+
+export function isTouchStartEvent(e: unknown): e is TouchEvent {
+  return (e as TouchEvent).type === 'touchstart'
+}

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

@@ -0,0 +1,146 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  callMemoOrStaticFn,
+  makeStateUpdater,
+} from '../../utils'
+import { table_getPinnedVisibleLeafColumns } from '../column-pinning/columnPinningFeature.utils'
+import {
+  column_getAfter,
+  column_getSize,
+  column_getStart,
+  column_resetSize,
+  getDefaultColumnSizingColumnDef,
+  getDefaultColumnSizingState,
+  header_getSize,
+  header_getStart,
+  table_getCenterTotalSize,
+  table_getLeftTotalSize,
+  table_getRightTotalSize,
+  table_getTotalSize,
+  table_resetColumnSizing,
+  table_setColumnSizing,
+} from './columnSizingFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   ColumnDef_ColumnSizing,
+//   Column_ColumnSizing,
+//   Header_ColumnSizing,
+//   TableOptions_ColumnSizing,
+//   TableState_ColumnSizing,
+//   Table_ColumnSizing,
+// } from './columnSizingFeature.types'
+
+interface ColumnSizingFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // ColumnDef: ColumnDef_ColumnSizing
+  // Column: Column_ColumnSizing
+  // Header: Header_ColumnSizing
+  // Table: Table_ColumnSizing
+  // TableOptions: TableOptions_ColumnSizing
+  // TableState: TableState_ColumnSizing
+}
+
+export function constructColumnSizingFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<ColumnSizingFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        columnSizing: getDefaultColumnSizingState(),
+        ...initialState,
+      }
+    },
+
+    getDefaultColumnDef: () => {
+      return getDefaultColumnSizingColumnDef()
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        onColumnSizingChange: makeStateUpdater('columnSizing', table),
+      }
+    },
+
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnSizingFeature', prototype, table, {
+        column_getSize: {
+          fn: (column) => column_getSize(column),
+        },
+        column_getStart: {
+          fn: (column, position) => column_getStart(column, position),
+          memoDeps: (column, position) => [
+            position,
+            callMemoOrStaticFn(
+              column.table,
+              'getPinnedVisibleLeafColumns',
+              table_getPinnedVisibleLeafColumns,
+              position,
+            ),
+            column.table.store.state.columnSizing,
+          ],
+        },
+        column_getAfter: {
+          fn: (column, position) => column_getAfter(column, position),
+          memoDeps: (column, position) => [
+            position,
+            callMemoOrStaticFn(
+              column.table,
+              'getPinnedVisibleLeafColumns',
+              table_getPinnedVisibleLeafColumns,
+              position,
+            ),
+            column.table.store.state.columnSizing,
+          ],
+        },
+        column_resetSize: {
+          fn: (column) => column_resetSize(column),
+        },
+      })
+    },
+
+    assignHeaderPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnSizingFeature', prototype, table, {
+        header_getSize: {
+          fn: (header) => header_getSize(header),
+        },
+        header_getStart: {
+          fn: (header) => header_getStart(header),
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('columnSizingFeature', table, {
+        table_setColumnSizing: {
+          fn: (updater) => table_setColumnSizing(table, updater),
+        },
+        table_resetColumnSizing: {
+          fn: (defaultState) => table_resetColumnSizing(table, defaultState),
+        },
+        table_getTotalSize: {
+          fn: () => table_getTotalSize(table),
+        },
+        table_getLeftTotalSize: {
+          fn: () => table_getLeftTotalSize(table),
+        },
+        table_getCenterTotalSize: {
+          fn: () => table_getCenterTotalSize(table),
+        },
+        table_getRightTotalSize: {
+          fn: () => table_getRightTotalSize(table),
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Column Sizing feature adds column sizing state and APIs to the table, header, and column objects.
+ * **Note:** This does not include column resizing. The columnResizingFeature feature has been split out into its own standalone feature.
+ */
+export const columnSizingFeature = constructColumnSizingFeature()

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

@@ -0,0 +1,92 @@
+import type { OnChangeFn, Updater } from '../../types/type-utils'
+import type { ColumnPinningPosition } from '../column-pinning/columnPinningFeature.types'
+
+export interface TableState_ColumnSizing {
+  columnSizing: ColumnSizingState
+}
+
+export type ColumnSizingState = Record<string, number>
+
+export interface TableOptions_ColumnSizing {
+  /**
+   * If provided, this function will be called with an `updaterFn` when `state.columnSizing` changes. This overrides the default internal state management, so you will also need to supply `state.columnSizing` from your own managed state.
+   */
+  onColumnSizingChange?: OnChangeFn<ColumnSizingState>
+}
+
+export type ColumnSizingDefaultOptions = Pick<
+  TableOptions_ColumnSizing,
+  'onColumnSizingChange'
+>
+
+export interface Table_ColumnSizing {
+  /**
+   * If pinning, returns the total size of the center portion of the table by calculating the sum of the sizes of all unpinned/center leaf-columns.
+   */
+  getCenterTotalSize: () => number
+  /**
+   * Returns the total size of the left portion of the table by calculating the sum of the sizes of all left leaf-columns.
+   */
+  getLeftTotalSize: () => number
+  /**
+   * Returns the total size of the right portion of the table by calculating the sum of the sizes of all right leaf-columns.
+   */
+  getRightTotalSize: () => number
+  /**
+   * Returns the total size of the table by calculating the sum of the sizes of all leaf-columns.
+   */
+  getTotalSize: () => number
+  /**
+   * Resets column sizing 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.
+   */
+  resetColumnSizing: (defaultState?: boolean) => void
+  /**
+   * Sets the column sizing state using an updater function or a value. This will trigger the underlying `onColumnSizingChange` function if one is passed to the table options, otherwise the state will be managed automatically by the table.
+   */
+  setColumnSizing: (updater: Updater<ColumnSizingState>) => void
+}
+
+export interface ColumnDef_ColumnSizing {
+  /**
+   * The maximum allowed size for the column
+   */
+  maxSize?: number
+  /**
+   * The minimum allowed size for the column
+   */
+  minSize?: number
+  /**
+   * The desired size for the column
+   */
+  size?: number
+}
+
+export interface Column_ColumnSizing {
+  /**
+   * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all succeeding (right) headers in relation to the current column.
+   */
+  getAfter: (position?: ColumnPinningPosition | 'center') => number
+  /**
+   * Returns the current size of the column.
+   */
+  getSize: () => number
+  /**
+   * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding (left) headers in relation to the current column.
+   */
+  getStart: (position?: ColumnPinningPosition | 'center') => number
+  /**
+   * Resets the column to its initial size.
+   */
+  resetSize: () => void
+}
+
+export interface Header_ColumnSizing {
+  /**
+   * Returns the current size of the header.
+   */
+  getSize: () => number
+  /**
+   * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding headers.
+   */
+  getStart: (position?: ColumnPinningPosition) => number
+}

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 } 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 structuredClone({})
+}
+
+export function getDefaultColumnSizingColumnDef() {
+  return structuredClone({
+    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.store.state.columnSizing?.[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 ? {} : (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
+  )
+}