@tanstack/table-core 8.0.0-alpha.9 → 8.0.0-beta.2

package/src/types.ts

@@ -1,11 +1,5 @@
-import React from 'react'
-import {
-  CoreColumn,
-  CoreColumnDef,
-  CoreOptions,
-  CoreRow,
-  TableCore,
-} from './core'
+import { CoreOptions, CoreTableState, CoreInstance } from './core/instance'
+import { CoreColumn, CoreColumnDef } from './core/column'
 import {
   VisibilityInstance,
   VisibilityTableState,
@@ -24,14 +18,16 @@ import {
   ColumnPinningColumnDef,
   ColumnPinningInstance,
   ColumnPinningOptions,
+  ColumnPinningRow,
   ColumnPinningTableState,
 } from './features/Pinning'
-import { HeadersInstance, HeadersRow } from './features/Headers'
+import { CoreHeader, CoreHeaderGroup, HeadersInstance } from './core/headers'
 import {
   FiltersColumn,
   FiltersColumnDef,
   FiltersInstance,
   FiltersOptions,
+  FiltersRow,
   FiltersTableState,
 } from './features/Filters'
 import {
@@ -42,6 +38,7 @@ import {
   SortingTableState,
 } from './features/Sorting'
 import {
+  GroupingCell,
   GroupingColumn,
   GroupingColumnDef,
   GroupingInstance,
@@ -55,7 +52,6 @@ import {
   ExpandedTableState,
   ExpandedRow,
 } from './features/Expanding'
-import { Overwrite } from './utils'
 import {
   ColumnSizingColumn,
   ColumnSizingColumnDef,
@@ -65,6 +61,7 @@ import {
   ColumnSizingTableState,
 } from './features/ColumnSizing'
 import {
+  PaginationInitialTableState,
   PaginationInstance,
   PaginationOptions,
   PaginationTableState,
@@ -75,27 +72,34 @@ import {
   RowSelectionRow,
   RowSelectionTableState,
 } from './features/RowSelection'
+import { CoreRow } from './core/row'
+import { PartialKeys } from './utils'
+import { CoreCell } from './core/cell'
 
-// declare global {
-//   const process.env.NODE_ENV !== 'production': boolean
-// }
+export type Updater<T> = T | ((old: T) => T)
+export type OnChangeFn<T> = (updaterOrValue: Updater<T>) => void
 
-export type DefaultGenerics = {
-  Row: unknown
-  Value: unknown
-  FilterFns: object
-  SortingFns: object
-  AggregationFns: object
+export type TableGenerics = {
+  Row?: any
+  Value?: any
+  FilterFns?: any
+  SortingFns?: any
+  AggregationFns?: any
+  Renderer?: any
+  Rendered?: any
+  ColumnMeta?: any
+  TableMeta?: any
+  FilterMeta?: any
 }
 
-export type PartialGenerics = Partial<DefaultGenerics>
+export type AnyRender = (Comp: any, props: any) => any
 
-export type TableInstance<TGenerics extends PartialGenerics> =
-  TableCore<TGenerics> &
+export type TableInstance<TGenerics extends TableGenerics> =
+  CoreInstance<TGenerics> &
+    HeadersInstance<TGenerics> &
     VisibilityInstance<TGenerics> &
     ColumnOrderInstance<TGenerics> &
     ColumnPinningInstance<TGenerics> &
-    HeadersInstance<TGenerics> &
     FiltersInstance<TGenerics> &
     SortingInstance<TGenerics> &
     GroupingInstance<TGenerics> &
@@ -104,14 +108,7 @@ export type TableInstance<TGenerics extends PartialGenerics> =
     PaginationInstance<TGenerics> &
     RowSelectionInstance<TGenerics>
 
-export type Renderable<TProps> =
-  | React.ReactNode
-  | React.FunctionComponent<TProps>
-  | React.Component<TProps>
-
-//
-
-export type Options<TGenerics extends PartialGenerics> =
+export type TableOptionsResolved<TGenerics extends TableGenerics> =
   CoreOptions<TGenerics> &
     VisibilityOptions &
     ColumnOrderOptions &
@@ -124,10 +121,13 @@ export type Options<TGenerics extends PartialGenerics> =
     PaginationOptions<TGenerics> &
     RowSelectionOptions<TGenerics>
 
-export type Updater<T> = T | ((old: T) => T)
-export type OnChangeFn<T> = (updaterOrValue: Updater<T>, value: T) => void
+export type TableOptions<TGenerics extends TableGenerics> = Omit<
+  PartialKeys<TableOptionsResolved<TGenerics>, 'state' | 'onStateChange'>,
+  'render'
+>
 
-export type TableState = VisibilityTableState &
+export type TableState = CoreTableState &
+  VisibilityTableState &
   ColumnOrderTableState &
   ColumnPinningTableState &
   FiltersTableState &
@@ -138,9 +138,24 @@ export type TableState = VisibilityTableState &
   PaginationTableState &
   RowSelectionTableState
 
-export type Row<TGenerics extends PartialGenerics> = CoreRow<TGenerics> &
+export type InitialTableState = Partial<
+  CoreTableState &
+    VisibilityTableState &
+    ColumnOrderTableState &
+    ColumnPinningTableState &
+    FiltersTableState &
+    SortingTableState &
+    ExpandedTableState &
+    GroupingTableState &
+    ColumnSizingTableState &
+    PaginationInitialTableState &
+    RowSelectionTableState
+>
+
+export type Row<TGenerics extends TableGenerics> = CoreRow<TGenerics> &
   VisibilityRow<TGenerics> &
-  HeadersRow<TGenerics> &
+  ColumnPinningRow<TGenerics> &
+  FiltersRow<TGenerics> &
   GroupingRow &
   RowSelectionRow &
   ExpandedRow
@@ -149,7 +164,7 @@ export type RowValues = {
   [key: string]: any
 }
 
-export type RowModel<TGenerics extends PartialGenerics> = {
+export type RowModel<TGenerics extends TableGenerics> = {
   rows: Row<TGenerics>[]
   flatRows: Row<TGenerics>[]
   rowsById: Record<string, Row<TGenerics>>
@@ -157,17 +172,11 @@ export type RowModel<TGenerics extends PartialGenerics> = {
 
 export type AccessorFn<TData> = (originalRow: TData, index: number) => any
 
-export const Please_use_the_create_table_column_utilities_to_define_columns: unique symbol =
-  Symbol()
-
-export type _NonGenerated<T> = Overwrite<
-  T,
-  {
-    [Please_use_the_create_table_column_utilities_to_define_columns]?: never
-  }
->
+export type Renderable<TGenerics extends TableGenerics, TProps> =
+  | string
+  | ((props: TProps) => TGenerics['Rendered'])
 
-export type ColumnDef<TGenerics extends PartialGenerics> =
+export type ColumnDef<TGenerics extends TableGenerics> =
   CoreColumnDef<TGenerics> &
     VisibilityColumnDef &
     ColumnPinningColumnDef &
@@ -176,8 +185,7 @@ export type ColumnDef<TGenerics extends PartialGenerics> =
     GroupingColumnDef<TGenerics> &
     ColumnSizingColumnDef
 
-export type Column<TGenerics extends PartialGenerics> = ColumnDef<TGenerics> &
-  CoreColumn<TGenerics> &
+export type Column<TGenerics extends TableGenerics> = CoreColumn<TGenerics> &
   ColumnVisibilityColumn &
   ColumnPinningColumn &
   FiltersColumn<TGenerics> &
@@ -185,127 +193,13 @@ export type Column<TGenerics extends PartialGenerics> = ColumnDef<TGenerics> &
   GroupingColumn<TGenerics> &
   ColumnSizingColumn<TGenerics>
 
-export type Cell<TGenerics extends PartialGenerics> = {
-  id: string
-  rowId: string
-  columnId: string
-  value: TGenerics['Value']
-  row: Row<TGenerics>
-  column: Column<TGenerics>
-  getCellProps: PropGetter<CellProps>
-  renderCell: () => React.ReactNode
-}
+export type Cell<TGenerics extends TableGenerics> = CoreCell<TGenerics> &
+  GroupingCell<TGenerics>
 
-export type Header<TGenerics extends PartialGenerics> = CoreHeader<TGenerics> &
+export type Header<TGenerics extends TableGenerics> = CoreHeader<TGenerics> &
   ColumnSizingHeader<TGenerics>
 
-export type CoreHeader<TGenerics extends PartialGenerics> = {
-  id: string
-  depth: number
-  column: Column<TGenerics>
-  getWidth: () => number
-  subHeaders: Header<TGenerics>[]
-  colSpan?: number
-  rowSpan?: number
-  getHeaderProps: PropGetter<HeaderProps>
-  getFooterProps: PropGetter<HeaderProps>
-  getLeafHeaders: () => Header<TGenerics>[]
-  isPlaceholder?: boolean
-  placeholderId?: string
-  renderHeader: (options?: { renderPlaceholder?: boolean }) => React.ReactNode
-  renderFooter: (options?: { renderPlaceholder?: boolean }) => React.ReactNode
-}
-
-export type HeaderGroup<TGenerics extends PartialGenerics> = {
-  id: string
-  depth: number
-  headers: Header<TGenerics>[]
-  getHeaderGroupProps: PropGetter<HeaderGroupProps>
-  getFooterGroupProps: PropGetter<FooterGroupProps>
-}
-
-export type HeaderRenderProps<THeader> = {
-  header: THeader
-}
-
-export type FooterRenderProps<THeader> = {
-  header: THeader
-}
-
-export type CellRenderProps<TCell, TRow> = {
-  cell: TCell
-  row: TRow
-}
-
-export type TableProps = {
-  role: string
-}
-
-export type TableBodyProps = {
-  role: string
-}
-
-export type TableHeadProps = {
-  key: string
-  role: string
-}
-
-export type TableFooterProps = {
-  key: string
-  role: string
-}
-
-export type HeaderGroupProps = {
-  key: string
-  role: string
-}
-
-export type FooterGroupProps = {
-  key: string
-  role: string
-}
-
-export type HeaderProps = {
-  key: string
-  role: string
-  colSpan?: number
-  rowSpan?: number
-}
-
-export type FooterProps = {
-  key: string
-  role: string
-  colSpan?: number
-  rowSpan?: number
-}
-
-export type RowProps = {
-  key: string
-  role: string
-}
-
-export type CellProps = {
-  key: string
-  role: string
-}
-
-//
-
-export type PropGetter<TBase> = <TGetter extends Getter<TBase>>(
-  userProps?: TGetter
-) => PropGetterValue<TBase, TGetter>
-
-export type Getter<TInitial> =
-  | ((initial: TInitial) => object)
-  | object
-  | undefined
-
-export type PropGetterValue<TBase, TGetter> = TGetter extends undefined
-  ? TBase
-  : TGetter extends (...args: any[]) => infer TReturn
-  ? Overwrite<TBase, TReturn>
-  : TGetter extends object
-  ? Overwrite<TBase, TGetter>
-  : never
+export type HeaderGroup<TGenerics extends TableGenerics> =
+  CoreHeaderGroup<TGenerics>
 
 export type NoInfer<A extends any> = [A][A extends any ? 0 : never]

package/src/utils/filterRowsUtils.ts

@@ -0,0 +1,112 @@
+import { createRow } from '../core/row'
+import { TableGenerics, Row, RowModel, TableInstance } from '../types'
+
+export function filterRows<TGenerics extends TableGenerics>(
+  rows: Row<TGenerics>[],
+  filterRowImpl: (row: Row<TGenerics>) => any,
+  instance: TableInstance<TGenerics>
+) {
+  if (instance.options.filterFromLeafRows) {
+    return filterRowModelFromLeafs(rows, filterRowImpl, instance)
+  }
+
+  return filterRowModelFromRoot(rows, filterRowImpl, instance)
+}
+
+export function filterRowModelFromLeafs<TGenerics extends TableGenerics>(
+  rowsToFilter: Row<TGenerics>[],
+  filterRow: (row: Row<TGenerics>) => Row<TGenerics>[],
+  instance: TableInstance<TGenerics>
+): RowModel<TGenerics> {
+  const newFilteredFlatRows: Row<TGenerics>[] = []
+  const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
+
+  let row
+  let newRow
+
+  const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
+    const rows: Row<TGenerics>[] = []
+
+    // Filter from children up first
+    for (let i = 0; i < rowsToFilter.length; i++) {
+      row = rowsToFilter[i]!
+
+      if (row.subRows?.length) {
+        newRow = createRow(instance, row.id, row.original, row.index, row.depth)
+        newRow.columnFilters = row.columnFilters
+        newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+        if (!newRow.subRows.length) {
+          continue
+        }
+        row = newRow
+      }
+
+      if (filterRow(row)) {
+        rows.push(row)
+        newFilteredRowsById[row.id] = row
+        newFilteredRowsById[i] = row
+      }
+    }
+
+    return rows
+  }
+
+  return {
+    rows: recurseFilterRows(rowsToFilter),
+    flatRows: newFilteredFlatRows,
+    rowsById: newFilteredRowsById,
+  }
+}
+
+export function filterRowModelFromRoot<TGenerics extends TableGenerics>(
+  rowsToFilter: Row<TGenerics>[],
+  filterRow: (row: Row<TGenerics>) => any,
+  instance: TableInstance<TGenerics>
+): RowModel<TGenerics> {
+  const newFilteredFlatRows: Row<TGenerics>[] = []
+  const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
+
+  let rows
+  let row
+  let newRow
+
+  // Filters top level and nested rows
+  const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
+    // Filter from parents downward first
+
+    rows = []
+
+    // Apply the filter to any subRows
+    for (let i = 0; i < rowsToFilter.length; i++) {
+      row = rowsToFilter[i]!
+
+      const pass = filterRow(row)
+
+      if (pass) {
+        if (row.subRows?.length) {
+          newRow = createRow(
+            instance,
+            row.id,
+            row.original,
+            row.index,
+            row.depth
+          )
+          newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+          row = newRow
+        }
+
+        rows.push(row)
+        newFilteredFlatRows.push(row)
+        newFilteredRowsById[row.id] = row
+      }
+    }
+
+    return rows
+  }
+
+  return {
+    rows: recurseFilterRows(rowsToFilter),
+    flatRows: newFilteredFlatRows,
+    rowsById: newFilteredRowsById,
+  }
+}

package/src/utils/getCoreRowModel.ts

@@ -0,0 +1,84 @@
+import { createRow } from '../core/row'
+import { TableInstance, Row, RowModel, TableGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getCoreRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.options.data],
+      (
+        data
+      ): {
+        rows: Row<TGenerics>[]
+        flatRows: Row<TGenerics>[]
+        rowsById: Record<string, Row<TGenerics>>
+      } => {
+        const rowModel: RowModel<TGenerics> = {
+          rows: [],
+          flatRows: [],
+          rowsById: {},
+        }
+
+        const accessRows = (
+          originalRows: TGenerics['Row'][],
+          depth = 0,
+          parent?: Row<TGenerics>
+        ): Row<TGenerics>[] => {
+          const rows = [] as Row<TGenerics>[]
+
+          for (let i = 0; i < originalRows.length; i++) {
+            // This could be an expensive check at scale, so we should move it somewhere else, but where?
+            // if (!id) {
+            //   if (process.env.NODE_ENV !== 'production') {
+            //     throw new Error(`getRowId expected an ID, but got ${id}`)
+            //   }
+            // }
+
+            // Make the row
+            const row = createRow(
+              instance,
+              instance._getRowId(originalRows[i], i, parent),
+              originalRows[i],
+              i,
+              depth
+            )
+
+            // Keep track of every row in a flat array
+            rowModel.flatRows.push(row)
+            // Also keep track of every row by its ID
+            rowModel.rowsById[row.id] = row
+            // Push instance row into parent
+            rows.push(row)
+
+            // Get the original subrows
+            if (instance.options.getSubRows) {
+              row.originalSubRows = instance.options.getSubRows(
+                originalRows[i],
+                i
+              )
+
+              // Then recursively access them
+              if (row.originalSubRows?.length) {
+                row.subRows = accessRows(row.originalSubRows, depth + 1, row)
+              }
+            }
+          }
+
+          return rows
+        }
+
+        rowModel.rows = accessRows(data)
+
+        return rowModel
+      },
+      {
+        key: process.env.NODE_ENV === 'development' && 'getRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance._autoResetPageIndex()
+        },
+      }
+    )
+}

package/src/utils/getExpandedRowModel.ts

@@ -0,0 +1,54 @@
+import { TableInstance, Row, RowModel, TableGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getExpandedRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [
+        instance.getState().expanded,
+        instance.getPreExpandedRowModel(),
+        instance.options.paginateExpandedRows,
+      ],
+      (expanded, rowModel, paginateExpandedRows) => {
+        if (
+          !rowModel.rows.length ||
+          // Do not expand if rows are not included in pagination
+          !paginateExpandedRows ||
+          (expanded !== true && !Object.keys(expanded ?? {}).length)
+        ) {
+          return rowModel
+        }
+
+        return expandRows(rowModel, instance)
+      },
+      {
+        key: process.env.NODE_ENV === 'development' && 'getExpandedRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+      }
+    )
+}
+
+export function expandRows<TGenerics extends TableGenerics>(
+  rowModel: RowModel<TGenerics>,
+  instance: TableInstance<TGenerics>
+) {
+  const expandedRows: Row<TGenerics>[] = []
+
+  const handleRow = (row: Row<TGenerics>) => {
+    expandedRows.push(row)
+
+    if (row.subRows?.length && row.getIsExpanded()) {
+      row.subRows.forEach(handleRow)
+    }
+  }
+
+  rowModel.rows.forEach(handleRow)
+
+  return {
+    rows: expandedRows,
+    flatRows: rowModel.flatRows,
+    rowsById: rowModel.rowsById,
+  }
+}

package/src/utils/getFacetedMinMaxValues.ts

@@ -0,0 +1,40 @@
+import { TableInstance, TableGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getFacetedMinMaxValues<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>,
+  columnId: string
+) => () => undefined | [number, number] {
+  return (instance, columnId) =>
+    memo(
+      () => [instance.getColumn(columnId).getFacetedRowModel()],
+      facetedRowModel => {
+        const firstValue = facetedRowModel.flatRows[0]?.getValue(columnId)
+
+        if (typeof firstValue === 'undefined') {
+          return undefined
+        }
+
+        let facetedMinMaxValues: [any, any] = [firstValue, firstValue]
+
+        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+          const value = facetedRowModel.flatRows[i]?.getValue(columnId)
+
+          if (value < facetedMinMaxValues[0]) {
+            facetedMinMaxValues[0] = value
+          } else if (value > facetedMinMaxValues[1]) {
+            facetedMinMaxValues[1] = value
+          }
+        }
+
+        return facetedMinMaxValues
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' &&
+          'getFacetedMinMaxValues_' + columnId,
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {},
+      }
+    )
+}

package/src/utils/getFacetedRowModel.ts

@@ -0,0 +1,50 @@
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { memo } from '../utils'
+import { filterRows } from './filterRowsUtils'
+
+export function getFacetedRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>,
+  columnId: string
+) => () => RowModel<TGenerics> {
+  return (instance, columnId) =>
+    memo(
+      () => [
+        instance.getPreFilteredRowModel(),
+        instance.getState().columnFilters,
+        instance.getState().globalFilter,
+        instance.getFilteredRowModel(),
+      ],
+      (preRowModel, columnFilters, globalFilter) => {
+        if (
+          !preRowModel.rows.length ||
+          (!columnFilters?.length && !globalFilter)
+        ) {
+          return preRowModel
+        }
+
+        const filterableIds = [
+          ...columnFilters.map(d => d.id).filter(d => d !== columnId),
+          globalFilter ? '__global__' : undefined,
+        ].filter(Boolean) as string[]
+
+        const filterRowsImpl = (row: Row<TGenerics>) => {
+          // Horizontally filter rows through each column
+          for (let i = 0; i < filterableIds.length; i++) {
+            if (row.columnFilters[filterableIds[i]!] === false) {
+              return false
+            }
+          }
+          return true
+        }
+
+        return filterRows(preRowModel.rows, filterRowsImpl, instance)
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' &&
+          'getFacetedRowModel_' + columnId,
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {},
+      }
+    )
+}