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

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

@@ -0,0 +1,324 @@
+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_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'
+
+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,
+        },
+      }
+    },
+
+    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.store.state.columnPinning,
+            row.table.store.state.columnVisibility,
+          ],
+        },
+        row_getLeftVisibleCells: {
+          fn: (row) => row_getLeftVisibleCells(row),
+          memoDeps: (row) => [
+            row.getAllCells(),
+            row.table.store.state.columnPinning?.left,
+            row.table.store.state.columnVisibility,
+          ],
+        },
+        row_getRightVisibleCells: {
+          fn: (row) => row_getRightVisibleCells(row),
+          memoDeps: (row) => [
+            row.getAllCells(),
+            row.table.store.state.columnPinning?.right,
+            row.table.store.state.columnVisibility,
+          ],
+        },
+      })
+    },
+
+    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.store.state.columnPinning?.left,
+          ],
+        },
+        table_getCenterHeaderGroups: {
+          fn: () => table_getCenterHeaderGroups(table),
+          memoDeps: () => [
+            table.getAllColumns(),
+            callMemoOrStaticFn(
+              table,
+              'getVisibleLeafColumns',
+              table_getVisibleLeafColumns,
+            ),
+            table.store.state.columnPinning,
+          ],
+        },
+        table_getRightHeaderGroups: {
+          fn: () => table_getRightHeaderGroups(table),
+          memoDeps: () => [
+            table.getAllColumns(),
+            callMemoOrStaticFn(
+              table,
+              'getVisibleLeafColumns',
+              table_getVisibleLeafColumns,
+            ),
+            table.store.state.columnPinning?.right,
+          ],
+        },
+        // 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.store.state.columnPinning,
+          ],
+        },
+        table_getRightLeafColumns: {
+          fn: () => table_getRightLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.store.state.columnPinning,
+          ],
+        },
+        table_getCenterLeafColumns: {
+          fn: () => table_getCenterLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.store.state.columnPinning,
+          ],
+        },
+        // visible leaf columns
+        table_getLeftVisibleLeafColumns: {
+          fn: () => table_getLeftVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.store.state.columnPinning,
+            table.store.state.columnVisibility,
+          ],
+        },
+        table_getCenterVisibleLeafColumns: {
+          fn: () => table_getCenterVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.store.state.columnPinning,
+            table.store.state.columnVisibility,
+          ],
+        },
+        table_getRightVisibleLeafColumns: {
+          fn: () => table_getRightVisibleLeafColumns(table),
+          memoDeps: () => [
+            table.options.columns,
+            table.store.state.columnPinning,
+            table.store.state.columnVisibility,
+          ],
+        },
+      })
+    },
+  }
+}
+
+/**
+ * The Column Pinning feature adds column pinning state and APIs to the table, row, and column objects.
+ */
+export const columnPinningFeature = constructColumnPinningFeature()

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

@@ -0,0 +1,176 @@
+import type { OnChangeFn, RowData, Updater } from '../../types/type-utils'
+import type { TableFeatures } from '../../types/TableFeatures'
+import type { Cell } from '../../types/Cell'
+import type { Header } from '../../types/Header'
+import type { HeaderGroup } from '../../types/HeaderGroup'
+import type { Column } from '../../types/Column'
+
+export type ColumnPinningPosition = false | 'left' | 'right'
+
+export interface ColumnPinningState {
+  left: Array<string>
+  right: Array<string>
+}
+
+export interface TableState_ColumnPinning {
+  columnPinning: ColumnPinningState
+}
+
+export interface TableOptions_ColumnPinning {
+  /**
+   * Enables/disables column pinning for the table. Defaults to `true`.
+   */
+  enableColumnPinning?: boolean
+  /**
+   * If provided, this function will be called with an `updaterFn` when `state.columnPinning` changes. This overrides the default internal state management, so you will also need to supply `state.columnPinning` from your own managed state.
+   */
+  onColumnPinningChange?: OnChangeFn<ColumnPinningState>
+}
+
+export interface ColumnPinningDefaultOptions {
+  onColumnPinningChange: OnChangeFn<ColumnPinningState>
+}
+
+export interface ColumnDef_ColumnPinning {
+  /**
+   * Enables/disables column pinning for this column. Defaults to `true`.
+   */
+  enablePinning?: boolean
+}
+
+export interface Column_ColumnPinning {
+  /**
+   * Returns whether or not the column can be pinned.
+   */
+  getCanPin: () => boolean
+  /**
+   * Returns the pinned position of the column. (`'left'`, `'right'` or `false`)
+   */
+  getIsPinned: () => ColumnPinningPosition
+  /**
+   * Returns the numeric pinned index of the column within a pinned column group.
+   */
+  getPinnedIndex: () => number
+  /**
+   * Pins a column to the `'left'` or `'right'`, or unpins the column to the center if `false` is passed.
+   */
+  pin: (position: ColumnPinningPosition) => void
+}
+
+export interface Row_ColumnPinning<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * Returns all center pinned (unpinned) leaf cells in the row.
+   */
+  getCenterVisibleCells: () => Array<Cell<TFeatures, TData, unknown>>
+  /**
+   * Returns all left pinned leaf cells in the row.
+   */
+  getLeftVisibleCells: () => Array<Cell<TFeatures, TData, unknown>>
+  /**
+   * Returns all right pinned leaf cells in the row.
+   */
+  getRightVisibleCells: () => Array<Cell<TFeatures, TData, unknown>>
+}
+
+export interface Table_ColumnPinning<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> {
+  /**
+   * If pinning, returns headers for all columns that are not pinned, including parent headers.
+   */
+  getCenterFlatHeaders: () => Array<Header<TFeatures, TData, unknown>>
+  /**
+   * If pinning, returns the footer groups for columns that are not pinned.
+   */
+  getCenterFooterGroups: () => Array<HeaderGroup<TFeatures, TData>>
+  /**
+   * If pinning, returns the header groups for columns that are not pinned.
+   */
+  getCenterHeaderGroups: () => Array<HeaderGroup<TFeatures, TData>>
+  /**
+   * Returns all center pinned (unpinned) leaf columns.
+   */
+  getCenterLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * If pinning, returns headers for all columns that are not pinned, (not including parent headers).
+   */
+  getCenterLeafHeaders: () => Array<Header<TFeatures, TData, unknown>>
+  /**
+   * If column pinning, returns a flat array of leaf-node columns that are visible in the unpinned/center portion of the table.
+   */
+  getCenterVisibleLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * Returns whether or not any columns are pinned. Optionally specify to only check for pinned columns in either the `left` or `right` position.
+   */
+  getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean
+  /**
+   * If pinning, returns headers for all left pinned columns in the table, including parent headers.
+   */
+  getLeftFlatHeaders: () => Array<Header<TFeatures, TData, unknown>>
+  /**
+   * If pinning, returns the footer groups for the left pinned columns.
+   */
+  getLeftFooterGroups: () => Array<HeaderGroup<TFeatures, TData>>
+  /**
+   * If pinning, returns the header groups for the left pinned columns.
+   */
+  getLeftHeaderGroups: () => Array<HeaderGroup<TFeatures, TData>>
+  /**
+   * Returns all left pinned leaf columns.
+   */
+  getLeftLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * If pinning, returns headers for all left pinned leaf columns in the table, (not including parent headers).
+   */
+  getLeftLeafHeaders: () => Array<Header<TFeatures, TData, unknown>>
+  /**
+   * If column pinning, returns a flat array of leaf-node columns that are visible in the left portion of the table.
+   */
+  getLeftVisibleLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * If pinning, returns headers for all right pinned columns in the table, including parent headers.
+   */
+  getRightFlatHeaders: () => Array<Header<TFeatures, TData, unknown>>
+  /**
+   * If pinning, returns the footer groups for the right pinned columns.
+   */
+  getRightFooterGroups: () => Array<HeaderGroup<TFeatures, TData>>
+  /**
+   * If pinning, returns the header groups for the right pinned columns.
+   */
+  getRightHeaderGroups: () => Array<HeaderGroup<TFeatures, TData>>
+  /**
+   * Returns all right pinned leaf columns.
+   */
+  getRightLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * If pinning, returns headers for all right pinned leaf columns in the table, (not including parent headers).
+   */
+  getRightLeafHeaders: () => Array<Header<TFeatures, TData, unknown>>
+  /**
+   * If column pinning, returns a flat array of leaf-node columns that are visible in the right portion of the table.
+   */
+  getRightVisibleLeafColumns: () => Array<Column<TFeatures, TData, unknown>>
+  /**
+   * Resets the **columnPinning** state to `initialState.columnPinning`, or `true` can be passed to force a default blank state reset to `{ left: [], right: [], }`.
+   */
+  resetColumnPinning: (defaultState?: boolean) => void
+  /**
+   * Sets or updates the `state.columnPinning` state.
+   */
+  setColumnPinning: (updater: Updater<ColumnPinningState>) => void
+  /**
+   */
+  getPinnedLeafColumns: (
+    position: ColumnPinningPosition | 'center',
+  ) => Array<Column<TFeatures, TData, unknown>>
+  /**
+   */
+  getPinnedVisibleLeafColumns: (
+    position: ColumnPinningPosition | 'center',
+  ) => Array<Column<TFeatures, TData, unknown>>
+}