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

package/src/features/column-ordering/columnOrderingFeature.ts

@@ -0,0 +1,96 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  makeStateUpdater,
+} from '../../utils'
+import {
+  column_getIndex,
+  column_getIsFirstColumn,
+  column_getIsLastColumn,
+  getDefaultColumnOrderState,
+  table_getOrderColumnsFn,
+  table_resetColumnOrder,
+  table_setColumnOrder,
+} from './columnOrderingFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   Column_ColumnOrdering,
+//   TableOptions_ColumnOrdering,
+//   TableState_ColumnOrdering,
+//   Table_ColumnOrdering,
+// } from './columnOrderingFeature.types'
+
+export interface ColumnOrderingFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // Column: Column_ColumnOrdering
+  // Table: Table_ColumnOrdering<TFeatures, TData>
+  // TableOptions: TableOptions_ColumnOrdering
+  // TableState: TableState_ColumnOrdering
+}
+
+export function constructColumnOrderingFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<ColumnOrderingFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        columnOrder: getDefaultColumnOrderState(),
+        ...initialState,
+      }
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        onColumnOrderChange: makeStateUpdater('columnOrder', table),
+      }
+    },
+
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnOrderingFeature', prototype, table, {
+        column_getIndex: {
+          fn: (column, position) => column_getIndex(column, position),
+          memoDeps: (column, position) => [
+            position,
+            column.table.atoms.columnOrder?.get(),
+            column.table.atoms.columnPinning?.get(),
+            column.table.atoms.grouping?.get(),
+          ],
+        },
+        column_getIsFirstColumn: {
+          fn: (column, position) => column_getIsFirstColumn(column, position),
+        },
+        column_getIsLastColumn: {
+          fn: (column, position) => column_getIsLastColumn(column, position),
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('columnOrderingFeature', table, {
+        table_setColumnOrder: {
+          fn: (updater) => table_setColumnOrder(table, updater),
+        },
+        table_resetColumnOrder: {
+          fn: (defaultState) => table_resetColumnOrder(table, defaultState),
+        },
+        table_getOrderColumnsFn: {
+          fn: () => table_getOrderColumnsFn(table),
+          memoDeps: () => [
+            table.atoms.columnOrder?.get(),
+            table.atoms.grouping?.get(),
+            table.options.groupedColumnMode,
+          ],
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Column Ordering feature adds column ordering state and APIs to the table and column objects.
+ */
+export const columnOrderingFeature = constructColumnOrderingFeature()

package/src/features/column-ordering/columnOrderingFeature.types.ts

@@ -0,0 +1,49 @@
+import type { OnChangeFn, RowData, Updater } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { ColumnPinningPosition } from '../column-pinning/columnPinningFeature.types'
+
+export type ColumnOrderState = Array<string>
+
+export interface TableState_ColumnOrdering {
+  columnOrder: ColumnOrderState
+}
+
+export interface TableOptions_ColumnOrdering {
+  /**
+   * If provided, this function will be called with an `updaterFn` when `state.columnOrder` 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.
+   */
+  onColumnOrderChange?: OnChangeFn<ColumnOrderState>
+}
+
+export interface Column_ColumnOrdering {
+  /**
+   * Returns the index of the column in the order of the visible columns. Optionally pass a `position` parameter to get the index of the column in a sub-section of the table
+   */
+  getIndex: (position?: ColumnPinningPosition | 'center') => number
+  /**
+   * Returns `true` if the column is the first column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the first in a sub-section of the table.
+   */
+  getIsFirstColumn: (position?: ColumnPinningPosition | 'center') => boolean
+  /**
+   * Returns `true` if the column is the last column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the last in a sub-section of the table.
+   */
+  getIsLastColumn: (position?: ColumnPinningPosition | 'center') => boolean
+}
+
+export interface ColumnOrderDefaultOptions {
+  onColumnOrderChange: OnChangeFn<ColumnOrderState>
+}
+
+export interface Table_ColumnOrdering<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Resets the **columnOrder** state to `initialState.columnOrder`, or `true` can be passed to force a default blank state reset to `[]`.
+   */
+  resetColumnOrder: (defaultState?: boolean) => void
+  /**
+   * Sets or updates the `state.columnOrder` state.
+   */
+  setColumnOrder: (updater: Updater<ColumnOrderState>) => void
+}

package/src/features/column-ordering/columnOrderingFeature.utils.ts

@@ -0,0 +1,134 @@
+import { table_getPinnedVisibleLeafColumns } from '../column-pinning/columnPinningFeature.utils'
+import { cloneState } from '../../utils'
+import type { GroupingState } from '../column-grouping/columnGroupingFeature.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 { Column_Internal } from '../../types/Column'
+import type { ColumnPinningPosition } from '../column-pinning/columnPinningFeature.types'
+import type { ColumnOrderState } from './columnOrderingFeature.types'
+
+export function getDefaultColumnOrderState(): ColumnOrderState {
+  return []
+}
+
+export function column_getIndex<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
+  return columns.findIndex((d) => d.id === column.id)
+}
+
+export function column_getIsFirstColumn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
+  return columns[0]?.id === column.id
+}
+
+export function column_getIsLastColumn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(
+  column: Column_Internal<TFeatures, TData, TValue>,
+  position?: ColumnPinningPosition | 'center',
+) {
+  const columns = table_getPinnedVisibleLeafColumns(column.table, position)
+  return columns[columns.length - 1]?.id === column.id
+}
+
+export function table_setColumnOrder<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, updater: Updater<ColumnOrderState>) {
+  table.options.onColumnOrderChange?.(updater)
+}
+
+export function table_resetColumnOrder<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>, defaultState?: boolean) {
+  table_setColumnOrder(
+    table,
+    defaultState ? [] : cloneState(table.initialState.columnOrder ?? []),
+  )
+}
+
+export function table_getOrderColumnsFn<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(table: Table_Internal<TFeatures, TData>) {
+  const columnOrder = table.atoms.columnOrder?.get()
+
+  return (columns: Array<Column_Internal<TFeatures, TData, unknown>>) => {
+    // Sort grouped columns to the start of the column list
+    // before the headers are built
+    let orderedColumns: Array<Column_Internal<TFeatures, TData, unknown>> = []
+
+    // If there is no order, return the normal columns
+    if (!columnOrder?.length) {
+      orderedColumns = columns
+    } else {
+      const columnOrderCopy = [...columnOrder]
+
+      // If there is an order, make a copy of the columns
+      const columnsCopy = [...columns]
+
+      // And make a new ordered array of the columns
+
+      // Loop over the columns and place them in order into the new array
+      while (columnsCopy.length && columnOrderCopy.length) {
+        const targetColumnId = columnOrderCopy.shift()
+        const foundIndex = columnsCopy.findIndex((d) => d.id === targetColumnId)
+        if (foundIndex > -1) {
+          orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!)
+        }
+      }
+
+      // If there are any columns left, add them to the end
+      orderedColumns = [...orderedColumns, ...columnsCopy]
+    }
+
+    return orderColumns(table, orderedColumns)
+  }
+}
+
+export function orderColumns<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  leafColumns: Array<Column_Internal<TFeatures, TData, unknown>>,
+) {
+  const grouping = table.atoms.grouping?.get() ?? ([] as GroupingState)
+  const { groupedColumnMode } = table.options
+
+  if (!grouping.length || !groupedColumnMode) {
+    return leafColumns
+  }
+
+  const nonGroupingColumns = leafColumns.filter(
+    (col) => !grouping.includes(col.id),
+  )
+
+  if (groupedColumnMode === 'remove') {
+    return nonGroupingColumns
+  }
+
+  const groupingColumns = grouping
+    .map((g) => leafColumns.find((col) => col.id === g)!)
+    .filter(Boolean)
+
+  return [...groupingColumns, ...nonGroupingColumns]
+}

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

@@ -0,0 +1,347 @@
+import {
+  assignPrototypeAPIs,
+  assignTableAPIs,
+  callMemoOrStaticFn,
+  makeStateUpdater,
+} from '../../utils'
+import { table_getVisibleLeafColumns } from '../column-visibility/columnVisibilityFeature.utils'
+import {
+  column_getCanPin,
+  column_getIsPinned,
+  column_getPinnedIndex,
+  column_pin,
+  getDefaultColumnPinningState,
+  row_getCenterVisibleCells,
+  row_getLeftVisibleCells,
+  row_getRightVisibleCells,
+  table_getCenterFlatHeaders,
+  table_getCenterFooterGroups,
+  table_getCenterHeaderGroups,
+  table_getCenterLeafColumns,
+  table_getCenterLeafHeaders,
+  table_getCenterVisibleLeafColumns,
+  table_getIsSomeColumnsPinned,
+  table_getLeftFlatHeaders,
+  table_getLeftFooterGroups,
+  table_getLeftHeaderGroups,
+  table_getLeftLeafColumns,
+  table_getLeftLeafHeaders,
+  table_getLeftVisibleLeafColumns,
+  table_getPinnedLeafColumns,
+  table_getPinnedVisibleLeafColumns,
+  table_getRightFlatHeaders,
+  table_getRightFooterGroups,
+  table_getRightHeaderGroups,
+  table_getRightLeafColumns,
+  table_getRightLeafHeaders,
+  table_getRightVisibleLeafColumns,
+  table_resetColumnPinning,
+  table_setColumnPinning,
+} from './columnPinningFeature.utils'
+import type { RowData } from '../../types/type-utils'
+import type { TableFeature, TableFeatures } from '../../types/TableFeatures'
+// import type {
+//   ColumnDef_ColumnPinning,
+//   Column_ColumnPinning,
+//   Row_ColumnPinning,
+//   TableOptions_ColumnPinning,
+//   TableState_ColumnPinning,
+//   Table_ColumnPinning,
+// } from './columnPinningFeature.types'
+
+export interface ColumnPinningFeatureConstructors<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  // Column: Column_ColumnPinning
+  // ColumnDef: ColumnDef_ColumnPinning
+  // Row: Row_ColumnPinning<TFeatures, TData>
+  // Table: Table_ColumnPinning<TFeatures, TData>
+  // TableOptions: TableOptions_ColumnPinning
+  // TableState: TableState_ColumnPinning
+}
+
+export function constructColumnPinningFeature<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(): TableFeature<ColumnPinningFeatureConstructors<TFeatures, TData>> {
+  return {
+    getInitialState: (initialState) => {
+      return {
+        columnPinning: {
+          ...getDefaultColumnPinningState(),
+          ...initialState.columnPinning,
+        },
+        ...initialState,
+      }
+    },
+
+    getDefaultTableOptions: (table) => {
+      return {
+        onColumnPinningChange: makeStateUpdater('columnPinning', table),
+      }
+    },
+
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnPinningFeature', prototype, table, {
+        column_pin: {
+          fn: (column, position) => column_pin(column, position),
+        },
+        column_getCanPin: {
+          fn: (column) => column_getCanPin(column),
+        },
+        column_getPinnedIndex: {
+          fn: (column) => column_getPinnedIndex(column),
+        },
+        column_getIsPinned: {
+          fn: (column) => column_getIsPinned(column),
+        },
+      })
+    },
+
+    assignRowPrototype: (prototype, table) => {
+      assignPrototypeAPIs('columnPinningFeature', prototype, table, {
+        row_getCenterVisibleCells: {
+          fn: (row) => row_getCenterVisibleCells(row),
+          memoDeps: (row) => [
+            row.getAllCells(),
+            row.table.atoms.columnPinning?.get(),
+            row.table.atoms.columnVisibility?.get(),
+          ],
+        },
+        row_getLeftVisibleCells: {
+          fn: (row) => row_getLeftVisibleCells(row),
+          memoDeps: (row) => [
+            row.getAllCells(),
+            row.table.atoms.columnPinning?.get()?.left,
+            row.table.atoms.columnVisibility?.get(),
+          ],
+        },
+        row_getRightVisibleCells: {
+          fn: (row) => row_getRightVisibleCells(row),
+          memoDeps: (row) => [
+            row.getAllCells(),
+            row.table.atoms.columnPinning?.get()?.right,
+            row.table.atoms.columnVisibility?.get(),
+          ],
+        },
+      })
+    },
+
+    constructTableAPIs: (table) => {
+      assignTableAPIs('columnPinningFeature', table, {
+        table_setColumnPinning: {
+          fn: (updater) => table_setColumnPinning(table, updater),
+        },
+        table_resetColumnPinning: {
+          fn: (defaultState) => table_resetColumnPinning(table, defaultState),
+        },
+        table_getIsSomeColumnsPinned: {
+          fn: (position) => table_getIsSomeColumnsPinned(table, position),
+        },
+        // header groups
+        table_getLeftHeaderGroups: {
+          fn: () => table_getLeftHeaderGroups(table),
+          memoDeps: () => [
+            table.getAllColumns(),
+            callMemoOrStaticFn(
+              table,
+              'getVisibleLeafColumns',
+              table_getVisibleLeafColumns,
+            ),
+            table.atoms.columnPinning?.get()?.left,
+            table.atoms.columnOrder?.get(),
+          ],
+        },
+        table_getCenterHeaderGroups: {
+          fn: () => table_getCenterHeaderGroups(table),
+          memoDeps: () => [
+            table.getAllColumns(),
+            callMemoOrStaticFn(
+              table,
+              'getVisibleLeafColumns',
+              table_getVisibleLeafColumns,
+            ),
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnOrder?.get(),
+          ],
+        },
+        table_getRightHeaderGroups: {
+          fn: () => table_getRightHeaderGroups(table),
+          memoDeps: () => [
+            table.getAllColumns(),
+            callMemoOrStaticFn(
+              table,
+              'getVisibleLeafColumns',
+              table_getVisibleLeafColumns,
+            ),
+            table.atoms.columnPinning?.get()?.right,
+            table.atoms.columnOrder?.get(),
+          ],
+        },
+        // footer groups
+        table_getLeftFooterGroups: {
+          fn: () => table_getLeftFooterGroups(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getLeftHeaderGroups',
+              table_getLeftHeaderGroups,
+            ),
+          ],
+        },
+        table_getCenterFooterGroups: {
+          fn: () => table_getCenterFooterGroups(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getCenterHeaderGroups',
+              table_getCenterHeaderGroups,
+            ),
+          ],
+        },
+        table_getRightFooterGroups: {
+          fn: () => table_getRightFooterGroups(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getRightHeaderGroups',
+              table_getRightHeaderGroups,
+            ),
+          ],
+        },
+        // flat headers
+        table_getLeftFlatHeaders: {
+          fn: () => table_getLeftFlatHeaders(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getLeftHeaderGroups',
+              table_getLeftHeaderGroups,
+            ),
+          ],
+        },
+        table_getRightFlatHeaders: {
+          fn: () => table_getRightFlatHeaders(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getRightHeaderGroups',
+              table_getRightHeaderGroups,
+            ),
+          ],
+        },
+        table_getCenterFlatHeaders: {
+          fn: () => table_getCenterFlatHeaders(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getCenterHeaderGroups',
+              table_getCenterHeaderGroups,
+            ),
+          ],
+        },
+        // leaf headers
+        table_getLeftLeafHeaders: {
+          fn: () => table_getLeftLeafHeaders(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getLeftHeaderGroups',
+              table_getLeftHeaderGroups,
+            ),
+          ],
+        },
+        table_getRightLeafHeaders: {
+          fn: () => table_getRightLeafHeaders(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getRightHeaderGroups',
+              table_getRightHeaderGroups,
+            ),
+          ],
+        },
+        table_getCenterLeafHeaders: {
+          fn: () => table_getCenterLeafHeaders(table),
+          memoDeps: () => [
+            callMemoOrStaticFn(
+              table,
+              'getCenterHeaderGroups',
+              table_getCenterHeaderGroups,
+            ),
+          ],
+        },
+        // leaf columns
+        table_getLeftLeafColumns: {
+          fn: () => table_getLeftLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+          ],
+        },
+        table_getRightLeafColumns: {
+          fn: () => table_getRightLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+          ],
+        },
+        table_getCenterLeafColumns: {
+          fn: () => table_getCenterLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+          ],
+        },
+        table_getPinnedLeafColumns: {
+          fn: (position) => table_getPinnedLeafColumns(table, position),
+          memoDeps: (position) => [
+            position,
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+          ],
+        },
+        // visible leaf columns
+        table_getLeftVisibleLeafColumns: {
+          fn: () => table_getLeftVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+          ],
+        },
+        table_getCenterVisibleLeafColumns: {
+          fn: () => table_getCenterVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+          ],
+        },
+        table_getRightVisibleLeafColumns: {
+          fn: () => table_getRightVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+          ],
+        },
+        table_getPinnedVisibleLeafColumns: {
+          fn: (position) => table_getPinnedVisibleLeafColumns(table, position),
+          memoDeps: (position) => [
+            position,
+            table.options.columns,
+            table.atoms.columnPinning?.get(),
+            table.atoms.columnVisibility?.get(),
+          ],
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Column Pinning feature adds column pinning state and APIs to the table, row, and column objects.
+ */
+export const columnPinningFeature = constructColumnPinningFeature()