@tanstack/table-core 9.0.0-alpha.8 → 9.0.0-beta.10

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

@@ -0,0 +1,65 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../utils'
+import {
+  column_getCanResize,
+  column_getIsResizing,
+  getDefaultColumnResizingState,
+  header_getResizeHandler,
+  table_resetHeaderSizeInfo,
+  table_setColumnResizing,
+} from './columnResizingFeature.utils'
+import type { TableFeature } from '../../types/TableFeatures'
+
+/**
+ * Feature that adds column resizing state, options, and resize handlers.
+ */
+export const columnResizingFeature: TableFeature = {
+  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),
+      },
+    })
+  },
+}

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

@@ -0,0 +1,89 @@
+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 committed `columnSizing` values are updated. `onChange`
+   * commits sizes while the resize handle is dragged; `onEnd` commits when the
+   * resize interaction finishes.
+   */
+  columnResizeMode?: ColumnResizeMode
+  /**
+   * Enables or disables column resizing for the whole table.
+   */
+  enableColumnResizing?: boolean
+  /**
+   * Sets the resize direction used to calculate drag offsets. Defaults to `ltr`.
+   */
+  columnResizeDirection?: ColumnResizeDirection
+  /**
+   * Called with an updater when the transient `columnResizing` state changes.
+   * Pair this with `state.columnResizing` when using external state; external
+   * atoms can own the slice without this callback.
+   */
+  onColumnResizingChange?: OnChangeFn<columnResizingState>
+}
+
+export type ColumnResizingDefaultOptions = Pick<
+  TableOptions_ColumnResizing,
+  'columnResizeMode' | 'onColumnResizingChange' | 'columnResizeDirection'
+>
+
+export interface Table_ColumnResizing {
+  /**
+   * Resets `columnResizing` to `initialState.columnResizing`.
+   *
+   * Pass `true` to ignore initial state and reset to the no-drag default state.
+   */
+  resetHeaderSizeInfo: (defaultState?: boolean) => void
+  /**
+   * Updates transient resize interaction state with a next state or updater function.
+   *
+   * The lowercase `c` in this API name matches the current generated v9 table
+   * API for the `columnResizing` state slice.
+   */
+  setcolumnResizing: (updater: Updater<columnResizingState>) => void
+}
+
+export interface ColumnDef_ColumnResizing {
+  /**
+   * Enables or disables column resizing for the column.
+   */
+  enableResizing?: boolean
+}
+
+export interface Column_ColumnResizing {
+  /**
+   * Checks whether this column can start a resize interaction.
+   */
+  getCanResize: () => boolean
+  /**
+   * Checks whether this column is the active resize target.
+   */
+  getIsResizing: () => boolean
+}
+
+export interface Header_ColumnResizing {
+  /**
+   * Creates the `onMouseDown`/`onTouchStart` handler for a resize handle.
+   *
+   * Dragging and release listeners are installed and cleaned up automatically.
+   */
+  getResizeHandler: (context?: Document) => (event: unknown) => void
+}

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

@@ -0,0 +1,364 @@
+import {
+  column_getSize,
+  header_getSize,
+  table_setColumnSizing,
+} from '../column-sizing/columnSizingFeature.utils'
+import { 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 { 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'
+
+/**
+ * Creates the default transient column resizing state.
+ *
+ * The feature default represents no active drag interaction. Reset APIs use
+ * this value when `defaultState` is `true`.
+ *
+ * @example
+ * ```ts
+ * const resizeInfo = getDefaultColumnResizingState()
+ * ```
+ */
+export function getDefaultColumnResizingState(): columnResizingState {
+  return {
+    startOffset: null,
+    startSize: null,
+    deltaOffset: null,
+    deltaPercentage: null,
+    isResizingColumn: false,
+    columnSizingStart: [],
+  }
+}
+
+/**
+ * Checks whether this column can start a resize interaction.
+ *
+ * Both `columnDef.enableResizing` and table `enableColumnResizing` default to
+ * `true`.
+ *
+ * @example
+ * ```ts
+ * const canResize = column_getCanResize(column)
+ * ```
+ */
+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)
+  )
+}
+
+/**
+ * Checks whether this column is the active column resize target.
+ *
+ * The value is read from `state.columnResizing.isResizingColumn`.
+ *
+ * @example
+ * ```ts
+ * const isResizing = column_getIsResizing(column)
+ * ```
+ */
+export function column_getIsResizing<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(column: Column_Internal<TFeatures, TData, TValue>) {
+  return (
+    column.table.atoms.columnResizing?.get()?.isResizingColumn === column.id
+  )
+}
+
+/**
+ * Creates the pointer/touch start handler for resizing a header.
+ *
+ * The handler records starting sizes for all leaf headers, tracks drag deltas,
+ * writes transient resize info, and commits column sizes on change or drag end
+ * depending on `columnResizeMode`.
+ *
+ * @example
+ * ```ts
+ * const onMouseDown = header_getResizeHandler(header)
+ * ```
+ */
+export function header_getResizeHandler<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(header: Header<TFeatures, TData, TValue>, _contextDocument?: Document) {
+  const column = header.table.getColumn(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 startSize = old.startSize ?? 0
+        const deltaPercentage = Math.max(
+          startSize > 0 ? deltaOffset / startSize : 0,
+          -0.999999,
+        )
+
+        old.columnSizingStart.forEach(([columnId, headerSize]) => {
+          newColumnSizing[columnId] =
+            Math.round(
+              Math.max(
+                headerSize > 0
+                  ? headerSize + headerSize * deltaPercentage
+                  : deltaOffset / old.columnSizingStart.length,
+                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,
+    }))
+  }
+}
+
+/**
+ * Routes a transient column resizing updater through the table's resize handler.
+ *
+ * This state tracks the active drag interaction; committed widths live in
+ * `columnSizing`.
+ *
+ * @example
+ * ```ts
+ * table_setColumnResizing(table, (old) => ({ ...old, deltaOffset: 12 }))
+ * ```
+ */
+export function table_setColumnResizing<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  updater: Updater<columnResizingState>,
+) {
+  table.options.onColumnResizingChange?.(updater)
+}
+
+/**
+ * Resets `columnResizing` to the configured initial state or feature default.
+ *
+ * With no argument, the reset clones `table.initialState.columnResizing` when
+ * it exists. Passing `true` ignores initial state and resets to the no-drag
+ * default state.
+ *
+ * @example
+ * ```ts
+ * table_resetHeaderSizeInfo(table)
+ * table_resetHeaderSizeInfo(table, true)
+ * ```
+ */
+export function table_resetHeaderSizeInfo<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnResizing(
+    table,
+    defaultState
+      ? getDefaultColumnResizingState()
+      : cloneState(
+          table.initialState.columnResizing ?? getDefaultColumnResizingState(),
+        ),
+  )
+}
+
+let passiveSupported: boolean | null = null
+/**
+ * Detects whether the current environment supports passive event listeners.
+ *
+ * Column resizing uses this to register pointer and touch listeners with
+ * `passive: false` only when the environment understands passive options.
+ *
+ * @example
+ * ```ts
+ * const canUsePassiveListeners = passiveEventSupported()
+ * ```
+ */
+export function passiveEventSupported() {
+  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
+}
+
+/**
+ * Narrows an unknown event to a `touchstart` event.
+ *
+ * Column resizing uses this before reading touch coordinates and installing
+ * touch-specific listeners.
+ *
+ * @example
+ * ```ts
+ * const isTouch = isTouchStartEvent(event)
+ * ```
+ */
+export function isTouchStartEvent(e: unknown): e is TouchEvent {
+  return (e as TouchEvent).type === 'touchstart'
+}

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

@@ -0,0 +1,145 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../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 { TableFeature } from '../../types/TableFeatures'
+
+/**
+ * Feature that adds column sizing state, defaults, and size measurement APIs.
+ */
+export const columnSizingFeature: TableFeature = {
+  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),
+        memoDeps: (column) => [
+          table.options.columns,
+          table.atoms.columnSizing?.get()?.[column.id], // just this column's size state
+        ],
+      },
+      column_getStart: {
+        fn: (column, position) => column_getStart(column, position),
+        memoDeps: (column, position) => [
+          position,
+          table.options.columns,
+          table.atoms.columnSizing?.get(),
+          table.atoms.columnOrder?.get(),
+          table.atoms.columnPinning?.get(),
+          table.atoms.columnVisibility?.get(),
+        ],
+      },
+      column_getAfter: {
+        fn: (column, position) => column_getAfter(column, position),
+        memoDeps: (column, position) => [
+          position,
+          table.options.columns,
+          table.atoms.columnSizing?.get(),
+          table.atoms.columnOrder?.get(),
+          table.atoms.columnPinning?.get(),
+          table.atoms.columnVisibility?.get(),
+        ],
+      },
+      column_resetSize: {
+        fn: (column) => column_resetSize(column),
+      },
+    })
+  },
+
+  assignHeaderPrototype: (prototype, table) => {
+    assignPrototypeAPIs('columnSizingFeature', prototype, table, {
+      header_getSize: {
+        fn: (header) => header_getSize(header),
+        memoDeps: (header) => [
+          table.options.columns,
+          header.column.columns.length > 0
+            ? table.atoms.columnSizing?.get() // must be all columns (sum child columns)
+            : table.atoms.columnSizing?.get()?.[header.column.id], // can just check it's associated column size state
+        ],
+      },
+      header_getStart: {
+        fn: (header) => header_getStart(header),
+        memoDeps: (header, position) => [
+          position,
+          table.options.columns,
+          table.atoms.columnSizing?.get(),
+          table.atoms.columnOrder?.get(),
+          table.atoms.columnPinning?.get(),
+          table.atoms.columnVisibility?.get(),
+        ],
+      },
+    })
+  },
+
+  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),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+      table_getLeftTotalSize: {
+        fn: () => table_getLeftTotalSize(table),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+      table_getCenterTotalSize: {
+        fn: () => table_getCenterTotalSize(table),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+      table_getRightTotalSize: {
+        fn: () => table_getRightTotalSize(table),
+        memoDeps: () => [
+          table.atoms.columnSizing?.get(),
+          table.getHeaderGroups(),
+        ],
+      },
+    })
+  },
+}