@tanstack/table-core 8.9.11 → 8.10.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.9.11",
+  "version": "8.10.1",
   "description": "Headless UI for building powerful tables & datagrids for TS/JS.",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/table#readme",

package/src/core/table.ts

@@ -99,7 +99,7 @@ export interface CoreInstance<TData extends RowData> {
   getCoreRowModel: () => RowModel<TData>
   _getCoreRowModel?: () => RowModel<TData>
   getRowModel: () => RowModel<TData>
-  getRow: (id: string) => Row<TData>
+  getRow: (id: string, searchAll?: boolean) => Row<TData>
   _getDefaultColumnDef: () => Partial<ColumnDef<TData, unknown>>
   _getColumnDefs: () => ColumnDef<TData, unknown>[]
   _getAllFlatColumnsById: () => Record<string, Column<TData, unknown>>
@@ -213,8 +213,9 @@ export function createTable<TData extends RowData>(
     getRowModel: () => {
       return table.getPaginationRowModel()
     },
-    getRow: (id: string) => {
-      const row = table.getRowModel().rowsById[id]
+    getRow: (id: string, searchAll?: boolean) => {
+      const row = (searchAll ? table.getCoreRowModel() : table.getRowModel())
+        .rowsById[id]
 
       if (!row) {
         if (process.env.NODE_ENV !== 'production') {
@@ -311,10 +312,13 @@ export function createTable<TData extends RowData>(
     _getAllFlatColumnsById: memo(
       () => [table.getAllFlatColumns()],
       flatColumns => {
-        return flatColumns.reduce((acc, column) => {
-          acc[column.id] = column
-          return acc
-        }, {} as Record<string, Column<TData, unknown>>)
+        return flatColumns.reduce(
+          (acc, column) => {
+            acc[column.id] = column
+            return acc
+          },
+          {} as Record<string, Column<TData, unknown>>
+        )
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById',

package/src/features/Expanding.ts

@@ -13,6 +13,7 @@ export interface ExpandedRow {
   toggleExpanded: (expanded?: boolean) => void
   getIsExpanded: () => boolean
   getCanExpand: () => boolean
+  getIsAllParentsExpanded: () => boolean
   getToggleExpandedHandler: () => () => void
 }
 
@@ -210,6 +211,17 @@ export const Expanding: TableFeature = {
         ((table.options.enableExpanding ?? true) && !!row.subRows?.length)
       )
     }
+    row.getIsAllParentsExpanded = () => {
+      let isFullyExpanded = true
+      let currentRow = row
+
+      while (isFullyExpanded && currentRow.parentId) {
+        currentRow = table.getRow(currentRow.parentId, true)
+        isFullyExpanded = currentRow.getIsExpanded()
+      }
+
+      return isFullyExpanded
+    }
     row.getToggleExpandedHandler = () => {
       const canExpand = row.getCanExpand()
 

package/src/features/Pinning.ts

@@ -11,25 +11,46 @@ import {
 import { makeStateUpdater, memo } from '../utils'
 
 export type ColumnPinningPosition = false | 'left' | 'right'
+export type RowPinningPosition = false | 'top' | 'bottom'
 
 export interface ColumnPinningState {
   left?: string[]
   right?: string[]
 }
 
+export interface RowPinningState {
+  top?: string[]
+  bottom?: string[]
+}
+
 export interface ColumnPinningTableState {
   columnPinning: ColumnPinningState
 }
 
+export interface RowPinningTableState {
+  rowPinning: RowPinningState
+}
+
 export interface ColumnPinningOptions {
   onColumnPinningChange?: OnChangeFn<ColumnPinningState>
   enablePinning?: boolean
+  enableColumnPinning?: boolean
+}
+
+export interface RowPinningOptions<TData extends RowData> {
+  onRowPinningChange?: OnChangeFn<RowPinningState>
+  enableRowPinning?: boolean | ((row: Row<TData>) => boolean)
+  keepPinnedRows?: boolean
 }
 
 export interface ColumnPinningDefaultOptions {
   onColumnPinningChange: OnChangeFn<ColumnPinningState>
 }
 
+export interface RowPinningDefaultOptions {
+  onRowPinningChange: OnChangeFn<RowPinningState>
+}
+
 export interface ColumnPinningColumnDef {
   enablePinning?: boolean
 }
@@ -47,6 +68,17 @@ export interface ColumnPinningRow<TData extends RowData> {
   getRightVisibleCells: () => Cell<TData, unknown>[]
 }
 
+export interface RowPinningRow {
+  getCanPin: () => boolean
+  getIsPinned: () => RowPinningPosition
+  getPinnedIndex: () => number
+  pin: (
+    position: RowPinningPosition,
+    includeLeafRows?: boolean,
+    includeParentRows?: boolean
+  ) => void
+}
+
 export interface ColumnPinningInstance<TData extends RowData> {
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
   resetColumnPinning: (defaultState?: boolean) => void
@@ -56,26 +88,43 @@ export interface ColumnPinningInstance<TData extends RowData> {
   getCenterLeafColumns: () => Column<TData, unknown>[]
 }
 
+export interface RowPinningInstance<TData extends RowData> {
+  setRowPinning: (updater: Updater<RowPinningState>) => void
+  resetRowPinning: (defaultState?: boolean) => void
+  getIsSomeRowsPinned: (position?: RowPinningPosition) => boolean
+  _getPinnedRows: (position: 'top' | 'bottom') => Row<TData>[]
+  getTopRows: () => Row<TData>[]
+  getBottomRows: () => Row<TData>[]
+  getCenterRows: () => Row<TData>[]
+}
+
 //
 
-const getDefaultPinningState = (): ColumnPinningState => ({
+const getDefaultColumnPinningState = (): ColumnPinningState => ({
   left: [],
   right: [],
 })
 
+const getDefaultRowPinningState = (): RowPinningState => ({
+  top: [],
+  bottom: [],
+})
+
 export const Pinning: TableFeature = {
-  getInitialState: (state): ColumnPinningTableState => {
+  getInitialState: (state): ColumnPinningTableState & RowPinningState => {
     return {
-      columnPinning: getDefaultPinningState(),
+      columnPinning: getDefaultColumnPinningState(),
+      rowPinning: getDefaultRowPinningState(),
       ...state,
     }
   },
 
   getDefaultOptions: <TData extends RowData>(
     table: Table<TData>
-  ): ColumnPinningDefaultOptions => {
+  ): ColumnPinningDefaultOptions & RowPinningDefaultOptions => {
     return {
       onColumnPinningChange: makeStateUpdater('columnPinning', table),
+      onRowPinningChange: makeStateUpdater('rowPinning', table),
     }
   },
 
@@ -123,7 +172,9 @@ export const Pinning: TableFeature = {
       return leafColumns.some(
         d =>
           (d.columnDef.enablePinning ?? true) &&
-          (table.options.enablePinning ?? true)
+          (table.options.enableColumnPinning ??
+            table.options.enablePinning ??
+            true)
       )
     }
 
@@ -151,6 +202,69 @@ export const Pinning: TableFeature = {
     row: Row<TData>,
     table: Table<TData>
   ): void => {
+    row.pin = (position, includeLeafRows, includeParentRows) => {
+      const leafRowIds = includeLeafRows
+        ? row.getLeafRows().map(({ id }) => id)
+        : []
+      const parentRowIds = includeParentRows
+        ? row.getParentRows().map(({ id }) => id)
+        : []
+      const rowIds = new Set([...parentRowIds, row.id, ...leafRowIds])
+
+      table.setRowPinning(old => {
+        if (position === 'bottom') {
+          return {
+            top: (old?.top ?? []).filter(d => !rowIds?.has(d)),
+            bottom: [
+              ...(old?.bottom ?? []).filter(d => !rowIds?.has(d)),
+              ...Array.from(rowIds),
+            ],
+          }
+        }
+
+        if (position === 'top') {
+          return {
+            top: [
+              ...(old?.top ?? []).filter(d => !rowIds?.has(d)),
+              ...Array.from(rowIds),
+            ],
+            bottom: (old?.bottom ?? []).filter(d => !rowIds?.has(d)),
+          }
+        }
+
+        return {
+          top: (old?.top ?? []).filter(d => !rowIds?.has(d)),
+          bottom: (old?.bottom ?? []).filter(d => !rowIds?.has(d)),
+        }
+      })
+    }
+    row.getCanPin = () => {
+      const { enableRowPinning, enablePinning } = table.options
+      if (typeof enableRowPinning === 'function') {
+        return enableRowPinning(row)
+      }
+      return enableRowPinning ?? enablePinning ?? true
+    }
+    row.getIsPinned = () => {
+      const rowIds = [row.id]
+
+      const { top, bottom } = table.getState().rowPinning
+
+      const isTop = rowIds.some(d => top?.includes(d))
+      const isBottom = rowIds.some(d => bottom?.includes(d))
+
+      return isTop ? 'top' : isBottom ? 'bottom' : false
+    }
+    row.getPinnedIndex = () => {
+      const position = row.getIsPinned()
+      if (!position) return -1
+
+      const visiblePinnedRowIds = table
+        ._getPinnedRows(position)
+        ?.map(({ id }) => id)
+
+      return visiblePinnedRowIds?.indexOf(row.id) ?? -1
+    }
     row.getCenterVisibleCells = memo(
       () => [
         row._getAllVisibleCells(),
@@ -164,7 +278,7 @@ export const Pinning: TableFeature = {
       },
       {
         key:
-          process.env.NODE_ENV === 'production' && 'row.getCenterVisibleCells',
+          process.env.NODE_ENV === 'development' && 'row.getCenterVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
       }
     )
@@ -174,12 +288,13 @@ export const Pinning: TableFeature = {
         const cells = (left ?? [])
           .map(columnId => allCells.find(cell => cell.column.id === columnId)!)
           .filter(Boolean)
-          .map(d => ({ ...d, position: 'left' } as Cell<TData, unknown>))
+          .map(d => ({ ...d, position: 'left' }) as Cell<TData, unknown>)
 
         return cells
       },
       {
-        key: process.env.NODE_ENV === 'production' && 'row.getLeftVisibleCells',
+        key:
+          process.env.NODE_ENV === 'development' && 'row.getLeftVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
       }
     )
@@ -189,13 +304,13 @@ export const Pinning: TableFeature = {
         const cells = (right ?? [])
           .map(columnId => allCells.find(cell => cell.column.id === columnId)!)
           .filter(Boolean)
-          .map(d => ({ ...d, position: 'right' } as Cell<TData, unknown>))
+          .map(d => ({ ...d, position: 'right' }) as Cell<TData, unknown>)
 
         return cells
       },
       {
         key:
-          process.env.NODE_ENV === 'production' && 'row.getRightVisibleCells',
+          process.env.NODE_ENV === 'development' && 'row.getRightVisibleCells',
         debug: () => table.options.debugAll ?? table.options.debugRows,
       }
     )
@@ -208,8 +323,8 @@ export const Pinning: TableFeature = {
     table.resetColumnPinning = defaultState =>
       table.setColumnPinning(
         defaultState
-          ? getDefaultPinningState()
-          : table.initialState?.columnPinning ?? getDefaultPinningState()
+          ? getDefaultColumnPinningState()
+          : table.initialState?.columnPinning ?? getDefaultColumnPinningState()
       )
 
     table.getIsSomeColumnsPinned = position => {
@@ -263,5 +378,72 @@ export const Pinning: TableFeature = {
         debug: () => table.options.debugAll ?? table.options.debugColumns,
       }
     )
+
+    table.setRowPinning = updater => table.options.onRowPinningChange?.(updater)
+
+    table.resetRowPinning = defaultState =>
+      table.setRowPinning(
+        defaultState
+          ? getDefaultRowPinningState()
+          : table.initialState?.rowPinning ?? getDefaultRowPinningState()
+      )
+
+    table.getIsSomeRowsPinned = position => {
+      const pinningState = table.getState().rowPinning
+
+      if (!position) {
+        return Boolean(pinningState.top?.length || pinningState.bottom?.length)
+      }
+      return Boolean(pinningState[position]?.length)
+    }
+
+    table._getPinnedRows = (position: 'top' | 'bottom') =>
+      memo(
+        () => [table.getRowModel().rows, table.getState().rowPinning[position]],
+        (visibleRows, pinnedRowIds) => {
+          const rows =
+            table.options.keepPinnedRows ?? true
+              ? //get all rows that are pinned even if they would not be otherwise visible
+                //account for expanded parent rows, but not pagination or filtering
+                (pinnedRowIds ?? []).map(rowId => {
+                  const row = table.getRow(rowId, true)
+                  return row.getIsAllParentsExpanded() ? row : null
+                })
+              : //else get only visible rows that are pinned
+                (pinnedRowIds ?? []).map(
+                  rowId => visibleRows.find(row => row.id === rowId)!
+                )
+
+          return rows
+            .filter(Boolean)
+            .map(d => ({ ...d, position })) as Row<TData>[]
+        },
+        {
+          key:
+            process.env.NODE_ENV === 'development' &&
+            `row.get${position === 'top' ? 'Top' : 'Bottom'}Rows`,
+          debug: () => table.options.debugAll ?? table.options.debugRows,
+        }
+      )()
+
+    table.getTopRows = () => table._getPinnedRows('top')
+
+    table.getBottomRows = () => table._getPinnedRows('bottom')
+
+    table.getCenterRows = memo(
+      () => [
+        table.getRowModel().rows,
+        table.getState().rowPinning.top,
+        table.getState().rowPinning.bottom,
+      ],
+      (allRows, top, bottom) => {
+        const topAndBottom = new Set([...(top ?? []), ...(bottom ?? [])])
+        return allRows.filter(d => !topAndBottom.has(d.id))
+      },
+      {
+        key: process.env.NODE_ENV === 'development' && 'row.getCenterRows',
+        debug: () => table.options.debugAll ?? table.options.debugRows,
+      }
+    )
   },
 }

package/src/types.ts

@@ -19,6 +19,10 @@ import {
   ColumnPinningOptions,
   ColumnPinningRow,
   ColumnPinningTableState,
+  RowPinningInstance,
+  RowPinningOptions,
+  RowPinningRow,
+  RowPinningTableState,
 } from './features/Pinning'
 import {
   CoreHeader,
@@ -106,6 +110,7 @@ export interface Table<TData extends RowData>
     VisibilityInstance<TData>,
     ColumnOrderInstance<TData>,
     ColumnPinningInstance<TData>,
+    RowPinningInstance<TData>,
     FiltersInstance<TData>,
     SortingInstance<TData>,
     GroupingInstance<TData>,
@@ -118,6 +123,7 @@ interface FeatureOptions<TData extends RowData>
   extends VisibilityOptions,
     ColumnOrderOptions,
     ColumnPinningOptions,
+    RowPinningOptions<TData>,
     FiltersOptions<TData>,
     SortingOptions<TData>,
     GroupingOptions,
@@ -140,6 +146,7 @@ export interface TableState
     VisibilityTableState,
     ColumnOrderTableState,
     ColumnPinningTableState,
+    RowPinningTableState,
     FiltersTableState,
     SortingTableState,
     ExpandedTableState,
@@ -153,6 +160,7 @@ interface CompleteInitialTableState
     VisibilityTableState,
     ColumnOrderTableState,
     ColumnPinningTableState,
+    RowPinningTableState,
     FiltersTableState,
     SortingTableState,
     ExpandedTableState,
@@ -167,6 +175,7 @@ export interface Row<TData extends RowData>
   extends CoreRow<TData>,
     VisibilityRow<TData>,
     ColumnPinningRow<TData>,
+    RowPinningRow,
     FiltersRow<TData>,
     GroupingRow,
     RowSelectionRow,