@tanstack/table-core 8.1.4 → 8.2.0

package/package.json

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

package/src/aggregationFns.ts

@@ -3,20 +3,17 @@ import { AggregationFn } from './features/Grouping'
 const sum: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   // It's faster to just add the aggregations together instead of
   // process leaf nodes individually
-  return childRows.reduce(
-    (sum, next) => {
-      const nextValue = next.getValue(columnId)
-      return sum + (typeof nextValue === 'number' ? nextValue : 0)
-    },
-    0
-  )
+  return childRows.reduce((sum, next) => {
+    const nextValue = next.getValue(columnId)
+    return sum + (typeof nextValue === 'number' ? nextValue : 0)
+  }, 0)
 }
 
 const min: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let min: number | undefined
 
   childRows.forEach(row => {
-    const value = row.getValue(columnId)
+    const value = row.getValue<number>(columnId)
 
     if (
       value != null &&
@@ -33,7 +30,7 @@ const max: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let max: number | undefined
 
   childRows.forEach(row => {
-    const value = row.getValue(columnId)
+    const value = row.getValue<number>(columnId)
     if (
       value != null &&
       (max! < value || (max === undefined && value >= value))
@@ -50,7 +47,7 @@ const extent: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let max: number | undefined
 
   childRows.forEach(row => {
-    const value = row.getValue(columnId)
+    const value = row.getValue<number>(columnId)
     if (value != null) {
       if (min === undefined) {
         if (value >= value) min = max = value
@@ -69,7 +66,7 @@ const mean: AggregationFn<any> = (columnId, leafRows) => {
   let sum = 0
 
   leafRows.forEach(row => {
-    let value = row.getValue(columnId)
+    let value = row.getValue<number>(columnId)
     if (value != null && (value = +value) >= value) {
       ++count, (sum += value)
     }

package/src/core/cell.ts

@@ -1,31 +1,31 @@
 import { RowData, Cell, Column, Row, Table } from '../types'
 
-export type CoreCell<TData extends RowData> = {
+export type CoreCell<TData extends RowData, TValue> = {
   id: string
-  getValue: () => any
-  renderValue: () => unknown
+  getValue: <TTValue = TValue>() => TTValue
+  renderValue: <TTValue = TValue>() => TTValue | null
   row: Row<TData>
-  column: Column<TData>
+  column: Column<TData, TValue>
   getContext: () => {
     table: Table<TData>
-    column: Column<TData>
+    column: Column<TData, TValue>
     row: Row<TData>
-    cell: Cell<TData>
-    getValue: () => any
-    renderValue: () => any
+    cell: Cell<TData, TValue>
+    getValue: <TTValue = TValue>() => TTValue
+    renderValue: <TTValue = TValue>() => TTValue | null
   }
 }
 
-export function createCell<TData extends RowData>(
+export function createCell<TData extends RowData, TValue>(
   table: Table<TData>,
   row: Row<TData>,
-  column: Column<TData>,
+  column: Column<TData, TValue>,
   columnId: string
 ) {
   const getRenderValue = () =>
     cell.getValue() ?? table.options.renderFallbackValue
 
-  const cell: CoreCell<TData> = {
+  const cell: CoreCell<TData, TValue> = {
     id: `${row.id}_${column.id}`,
     row,
     column,
@@ -35,7 +35,7 @@ export function createCell<TData extends RowData>(
       table,
       column,
       row,
-      cell: cell as Cell<TData>,
+      cell: cell as Cell<TData, TValue>,
       getValue: cell.getValue,
       renderValue: cell.renderValue,
     }),
@@ -45,7 +45,7 @@ export function createCell<TData extends RowData>(
     Object.assign(
       cell,
       feature.createCell?.(
-        cell as Cell<TData>,
+        cell as Cell<TData, TValue>,
         column,
         row as Row<TData>,
         table
@@ -53,5 +53,5 @@ export function createCell<TData extends RowData>(
     )
   }, {})
 
-  return cell as Cell<TData>
+  return cell as Cell<TData, TValue>
 }

package/src/core/column.ts

@@ -1,14 +1,11 @@
 import {
-  Cell,
   Column,
-  Header,
-  TableGenerics,
   Table,
-  Row,
   AccessorFn,
   ColumnDef,
   ColumnDefTemplate,
   RowData,
+  ColumnMeta,
 } from '../types'
 import { memo, UnionToIntersection } from '../utils'
 import { CoreCell } from './cell'
@@ -16,64 +13,78 @@ import { CoreHeader } from './headers'
 
 export type CoreColumnDefType = 'data' | 'display' | 'group'
 
-type CoreColumnDefBase<TData extends RowData> = {
+type CoreColumnDefBase<TData extends RowData, TValue> = {
   columns?: ColumnDef<TData>[]
-  header?: ColumnDefTemplate<ReturnType<CoreHeader<TData>['getContext']>>
-  footer?: ColumnDefTemplate<ReturnType<CoreHeader<TData>['getContext']>>
-  cell?: ColumnDefTemplate<ReturnType<CoreCell<TData>['getContext']>>
-  meta?: unknown
+  header?: ColumnDefTemplate<
+    ReturnType<CoreHeader<TData, TValue>['getContext']>
+  >
+  footer?: ColumnDefTemplate<
+    ReturnType<CoreHeader<TData, TValue>['getContext']>
+  >
+  cell?: ColumnDefTemplate<ReturnType<CoreCell<TData, TValue>['getContext']>>
+  meta?: ColumnMeta
 }
 
-type CoreColumnDefDisplay<TData extends RowData> = CoreColumnDefBase<TData> & {
+type CoreColumnDefDisplay<TData extends RowData, TValue> = CoreColumnDefBase<
+  TData,
+  TValue
+> & {
   id: string
 }
 
-type CoreColumnDefDisplayWithStringHeader<TData extends RowData> =
-  CoreColumnDefBase<TData> & {
-    header: string
-    id?: string
-  }
+type CoreColumnDefDisplayWithStringHeader<
+  TData extends RowData,
+  TValue
+> = CoreColumnDefBase<TData, TValue> & {
+  header: string
+  id?: string
+}
 
-type CoreColumnDefAccessorFn<TData extends RowData> =
-  CoreColumnDefBase<TData> & {
-    accessorFn: AccessorFn<TData>
-    id: string
-    // accessorKey?: never
-  }
+type CoreColumnDefAccessorFn<
+  TData extends RowData,
+  TValue = unknown
+> = CoreColumnDefBase<TData, TValue> & {
+  accessorFn: AccessorFn<TData, TValue>
+  id: string
+  // accessorKey?: never
+}
 
-type CoreColumnDefAccessorKey<TData extends RowData> =
-  CoreColumnDefBase<TData> & {
-    accessorKey: keyof TData
-    id?: string
-    // accessorFn?: never
-  }
+type CoreColumnDefAccessorKey<
+  TData extends RowData,
+  TValue
+> = CoreColumnDefBase<TData, TValue> & {
+  accessorKey: keyof TData
+  id?: string
+  // accessorFn?: never
+}
 
-export type CoreColumnDef<TData extends RowData> =
-  | CoreColumnDefDisplay<TData>
-  | CoreColumnDefDisplayWithStringHeader<TData>
+export type CoreColumnDef<TData extends RowData, TValue> =
+  | CoreColumnDefDisplay<TData, TValue>
+  | CoreColumnDefDisplayWithStringHeader<TData, TValue>
   | CoreColumnDefAccessorFn<TData>
-  | CoreColumnDefAccessorKey<TData>
+  | CoreColumnDefAccessorKey<TData, TValue>
 
-export type CoreColumnDefResolved<TData extends RowData> = Partial<
-  UnionToIntersection<CoreColumnDef<TData>>
->
+export type CoreColumnDefResolved<
+  TData extends RowData,
+  TValue = unknown
+> = Partial<UnionToIntersection<CoreColumnDef<TData, TValue>>>
 
-export type CoreColumn<TData extends RowData> = {
+export type CoreColumn<TData extends RowData, TValue> = {
   id: string
   depth: number
-  accessorFn?: AccessorFn<TData>
+  accessorFn?: AccessorFn<TData, TValue>
   columnDef: ColumnDef<TData>
-  columns: Column<TData>[]
-  parent?: Column<TData>
-  getFlatColumns: () => Column<TData>[]
-  getLeafColumns: () => Column<TData>[]
+  columns: Column<TData, TValue>[]
+  parent?: Column<TData, TValue>
+  getFlatColumns: () => Column<TData, TValue>[]
+  getLeafColumns: () => Column<TData, TValue>[]
 }
 
-export function createColumn<TData extends RowData>(
+export function createColumn<TData extends RowData, TValue>(
   table: Table<TData>,
   columnDef: ColumnDef<TData>,
   depth: number,
-  parent?: Column<TData>
+  parent?: Column<TData, TValue>
 ) {
   const defaultColumn = table._getDefaultColumnDef()
 
@@ -109,7 +120,7 @@ export function createColumn<TData extends RowData>(
     throw new Error()
   }
 
-  let column: CoreColumn<TData> = {
+  let column: CoreColumn<TData, any> = {
     id: `${String(id)}`,
     accessorFn,
     parent: parent as any,
@@ -120,7 +131,7 @@ export function createColumn<TData extends RowData>(
       () => [true],
       () => {
         return [
-          column as Column<TData>,
+          column as Column<TData, TValue>,
           ...column.columns?.flatMap(d => d.getFlatColumns()),
         ]
       },
@@ -140,7 +151,7 @@ export function createColumn<TData extends RowData>(
           return orderColumns(leafColumns)
         }
 
-        return [column as Column<TData>]
+        return [column as Column<TData, TValue>]
       },
       {
         key: process.env.NODE_ENV === 'production' && 'column.getLeafColumns',
@@ -154,5 +165,5 @@ export function createColumn<TData extends RowData>(
   }, column)
 
   // Yes, we have to convert table to uknown, because we know more than the compiler here.
-  return column as Column<TData>
+  return column as Column<TData, TValue>
 }

package/src/core/headers.ts

@@ -5,25 +5,25 @@ import { TableFeature } from './table'
 export type CoreHeaderGroup<TData extends RowData> = {
   id: string
   depth: number
-  headers: Header<TData>[]
+  headers: Header<TData, unknown>[]
 }
 
-export type CoreHeader<TData extends RowData> = {
+export type CoreHeader<TData extends RowData, TValue> = {
   id: string
   index: number
   depth: number
-  column: Column<TData>
+  column: Column<TData, TValue>
   headerGroup: HeaderGroup<TData>
-  subHeaders: Header<TData>[]
+  subHeaders: Header<TData, TValue>[]
   colSpan: number
   rowSpan: number
-  getLeafHeaders: () => Header<TData>[]
+  getLeafHeaders: () => Header<TData, unknown>[]
   isPlaceholder: boolean
   placeholderId?: string
   getContext: () => {
     table: Table<TData>
-    header: Header<TData>
-    column: Column<TData>
+    header: Header<TData, TValue>
+    column: Column<TData, TValue>
   }
 }
 
@@ -38,22 +38,22 @@ export type HeadersInstance<TData extends RowData> = {
   getCenterFooterGroups: () => HeaderGroup<TData>[]
   getRightFooterGroups: () => HeaderGroup<TData>[]
 
-  getFlatHeaders: () => Header<TData>[]
-  getLeftFlatHeaders: () => Header<TData>[]
-  getCenterFlatHeaders: () => Header<TData>[]
-  getRightFlatHeaders: () => Header<TData>[]
+  getFlatHeaders: () => Header<TData, unknown>[]
+  getLeftFlatHeaders: () => Header<TData, unknown>[]
+  getCenterFlatHeaders: () => Header<TData, unknown>[]
+  getRightFlatHeaders: () => Header<TData, unknown>[]
 
-  getLeafHeaders: () => Header<TData>[]
-  getLeftLeafHeaders: () => Header<TData>[]
-  getCenterLeafHeaders: () => Header<TData>[]
-  getRightLeafHeaders: () => Header<TData>[]
+  getLeafHeaders: () => Header<TData, unknown>[]
+  getLeftLeafHeaders: () => Header<TData, unknown>[]
+  getCenterLeafHeaders: () => Header<TData, unknown>[]
+  getRightLeafHeaders: () => Header<TData, unknown>[]
 }
 
 //
 
-function createHeader<TData extends RowData>(
+function createHeader<TData extends RowData, TValue>(
   table: Table<TData>,
-  column: Column<TData>,
+  column: Column<TData, TValue>,
   options: {
     id?: string
     isPlaceholder?: boolean
@@ -64,7 +64,7 @@ function createHeader<TData extends RowData>(
 ) {
   const id = options.id ?? column.id
 
-  let header: CoreHeader<TData> = {
+  let header: CoreHeader<TData, TValue> = {
     id,
     column,
     index: options.index,
@@ -75,23 +75,23 @@ function createHeader<TData extends RowData>(
     colSpan: 0,
     rowSpan: 0,
     headerGroup: null!,
-    getLeafHeaders: (): Header<TData>[] => {
-      const leafHeaders: CoreHeader<TData>[] = []
+    getLeafHeaders: (): Header<TData, unknown>[] => {
+      const leafHeaders: Header<TData, unknown>[] = []
 
-      const recurseHeader = (h: CoreHeader<TData>) => {
+      const recurseHeader = (h: CoreHeader<TData, unknown>) => {
         if (h.subHeaders && h.subHeaders.length) {
           h.subHeaders.map(recurseHeader)
         }
-        leafHeaders.push(h)
+        leafHeaders.push(h as Header<TData, unknown>)
       }
 
       recurseHeader(header)
 
-      return leafHeaders as Header<TData>[]
+      return leafHeaders
     },
     getContext: () => ({
       table,
-      header: header as Header<TData>,
+      header: header as Header<TData, TValue>,
       column,
     }),
   }
@@ -100,7 +100,7 @@ function createHeader<TData extends RowData>(
     Object.assign(header, feature.createHeader?.(header, table))
   })
 
-  return header as Header<TData>
+  return header as Header<TData, TValue>
 }
 
 export const Headers: TableFeature = {
@@ -387,8 +387,8 @@ export const Headers: TableFeature = {
 }
 
 export function buildHeaderGroups<TData extends RowData>(
-  allColumns: Column<TData>[],
-  columnsToGroup: Column<TData>[],
+  allColumns: Column<TData, unknown>[],
+  columnsToGroup: Column<TData, unknown>[],
   table: Table<TData>,
   headerFamily?: 'center' | 'left' | 'right'
 ) {
@@ -400,7 +400,7 @@ export function buildHeaderGroups<TData extends RowData>(
 
   let maxDepth = 0
 
-  const findMaxDepth = (columns: Column<TData>[], depth = 1) => {
+  const findMaxDepth = (columns: Column<TData, unknown>[], depth = 1) => {
     maxDepth = Math.max(maxDepth, depth)
 
     columns
@@ -417,7 +417,7 @@ export function buildHeaderGroups<TData extends RowData>(
   let headerGroups: HeaderGroup<TData>[] = []
 
   const createHeaderGroup = (
-    headersToGroup: Header<TData>[],
+    headersToGroup: Header<TData, unknown>[],
     depth: number
   ) => {
     // The header group we are creating
@@ -428,7 +428,7 @@ export function buildHeaderGroups<TData extends RowData>(
     }
 
     // The parent columns we're going to scan next
-    const pendingParentHeaders: Header<TData>[] = []
+    const pendingParentHeaders: Header<TData, unknown>[] = []
 
     // Scan each column for parents
     headersToGroup.forEach(headerToGroup => {
@@ -438,7 +438,7 @@ export function buildHeaderGroups<TData extends RowData>(
 
       const isLeafHeader = headerToGroup.column.depth === headerGroup.depth
 
-      let column: Column<TData>
+      let column: Column<TData, unknown>
       let isPlaceholder = false
 
       if (isLeafHeader && headerToGroup.column.parent) {
@@ -504,7 +504,7 @@ export function buildHeaderGroups<TData extends RowData>(
   // })
 
   const recurseHeadersForSpans = (
-    headers: Header<TData>[]
+    headers: Header<TData, unknown>[]
   ): { colSpan: number; rowSpan: number }[] => {
     const filteredHeaders = headers.filter(header =>
       header.column.getIsVisible()

package/src/core/row.ts

@@ -7,14 +7,14 @@ export type CoreRow<TData extends RowData> = {
   index: number
   original?: TData
   depth: number
-  _valuesCache: Record<string, any>
-  getValue: (columnId: string) => any
-  renderValue: (columnId: string) => unknown
+  _valuesCache: Record<string, unknown>
+  getValue: <TValue>(columnId: string) => TValue
+  renderValue: <TValue>(columnId: string) => TValue
   subRows: Row<TData>[]
   getLeafRows: () => Row<TData>[]
   originalSubRows?: TData[]
-  getAllCells: () => Cell<TData>[]
-  _getAllCellsByColumnId: () => Record<string, Cell<TData>>
+  getAllCells: () => Cell<TData, unknown>[]
+  _getAllCellsByColumnId: () => Record<string, Cell<TData, unknown>>
 }
 
 export const createRow = <TData extends RowData>(
@@ -47,7 +47,7 @@ export const createRow = <TData extends RowData>(
         rowIndex
       )
 
-      return row._valuesCache[columnId]
+      return row._valuesCache[columnId] as any
     },
     renderValue: columnId =>
       row.getValue(columnId) ?? table.options.renderFallbackValue,
@@ -72,7 +72,7 @@ export const createRow = <TData extends RowData>(
         return allCells.reduce((acc, cell) => {
           acc[cell.column.id] = cell
           return acc
-        }, {} as Record<string, Cell<TData>>)
+        }, {} as Record<string, Cell<TData, unknown>>)
       },
       {
         key:

package/src/core/table.ts

@@ -13,6 +13,7 @@ import {
   ColumnDef,
   TableOptions,
   RowData,
+  TableMeta,
 } from '../types'
 
 //
@@ -75,7 +76,7 @@ export type CoreOptions<TData extends RowData> = {
     defaultOptions: TableOptions<TData>,
     options: Partial<TableOptions<TData>>
   ) => TableOptions<TData>
-  meta?: unknown
+  meta?: TableMeta
   getCoreRowModel: (table: Table<any>) => () => RowModel<any>
   getSubRows?: (originalRow: TData, index: number) => undefined | TData[]
   getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
@@ -100,11 +101,11 @@ export type CoreInstance<TData extends RowData> = {
   getRow: (id: string) => Row<TData>
   _getDefaultColumnDef: () => Partial<ColumnDef<TData>>
   _getColumnDefs: () => ColumnDef<TData>[]
-  _getAllFlatColumnsById: () => Record<string, Column<TData>>
-  getAllColumns: () => Column<TData>[]
-  getAllFlatColumns: () => Column<TData>[]
-  getAllLeafColumns: () => Column<TData>[]
-  getColumn: (columnId: string) => Column<TData>
+  _getAllFlatColumnsById: () => Record<string, Column<TData, unknown>>
+  getAllColumns: () => Column<TData, unknown>[]
+  getAllFlatColumns: () => Column<TData, unknown>[]
+  getAllLeafColumns: () => Column<TData, unknown>[]
+  getColumn: (columnId: string) => Column<TData, unknown>
 }
 
 export function createTable<TData extends RowData>(
@@ -231,7 +232,7 @@ export function createTable<TData extends RowData>(
         return {
           header: props => props.header.column.id,
           footer: props => props.header.column.id,
-          cell: props => (props.renderValue() as any)?.toString?.() ?? null,
+          cell: props => props.renderValue<any>()?.toString?.() ?? null,
           ...table._features.reduce((obj, feature) => {
             return Object.assign(obj, feature.getDefaultColumnDef?.())
           }, {}),
@@ -251,9 +252,9 @@ export function createTable<TData extends RowData>(
       columnDefs => {
         const recurseColumns = (
           columnDefs: ColumnDef<TData>[],
-          parent?: Column<TData>,
+          parent?: Column<TData, unknown>,
           depth = 0
-        ): Column<TData>[] => {
+        ): Column<TData, unknown>[] => {
           return columnDefs.map(columnDef => {
             const column = createColumn(table, columnDef, depth, parent)
 
@@ -292,7 +293,7 @@ export function createTable<TData extends RowData>(
         return flatColumns.reduce((acc, column) => {
           acc[column.id] = column
           return acc
-        }, {} as Record<string, Column<TData>>)
+        }, {} as Record<string, Column<TData, unknown>>)
       },
       {
         key: process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById',

package/src/features/ColumnSizing.ts

@@ -115,8 +115,8 @@ export const ColumnSizing: TableFeature = {
     }
   },
 
-  createColumn: <TData extends RowData>(
-    column: Column<TData>,
+  createColumn: <TData extends RowData, TValue>(
+    column: Column<TData, TValue>,
     table: Table<TData>
   ): ColumnSizingColumn => {
     return {
@@ -167,15 +167,15 @@ export const ColumnSizing: TableFeature = {
     }
   },
 
-  createHeader: <TData extends RowData>(
-    header: Header<TData>,
+  createHeader: <TData extends RowData, TValue>(
+    header: Header<TData, TValue>,
     table: Table<TData>
   ): ColumnSizingHeader => {
     return {
       getSize: () => {
         let sum = 0
 
-        const recurse = (header: Header<TData>) => {
+        const recurse = (header: Header<TData, TValue>) => {
           if (header.subHeaders.length) {
             header.subHeaders.forEach(recurse)
           } else {

package/src/features/Filters.ts

@@ -9,14 +9,9 @@ import {
   Row,
   Updater,
   RowData,
+  FilterMeta,
 } from '../types'
-import {
-  functionalUpdate,
-  isFunction,
-  makeStateUpdater,
-  memo,
-  Overwrite,
-} from '../utils'
+import { functionalUpdate, isFunction, makeStateUpdater } from '../utils'
 
 export type FiltersTableState = {
   columnFilters: ColumnFiltersState
@@ -41,7 +36,7 @@ export type FilterFn<TData extends RowData> = {
     row: Row<TData>,
     columnId: string,
     filterValue: any,
-    addMeta: (meta: any) => void
+    addMeta: (meta: FilterMeta) => void
   ): boolean
 
   resolveFilterValue?: TransformFilterValueFn<TData>
@@ -50,12 +45,12 @@ export type FilterFn<TData extends RowData> = {
 
 export type TransformFilterValueFn<TData extends RowData> = (
   value: any,
-  column?: Column<TData>
+  column?: Column<TData, unknown>
 ) => unknown
 
 export type ColumnFilterAutoRemoveTestFn<TData extends RowData> = (
   value: any,
-  column?: Column<TData>
+  column?: Column<TData, unknown>
 ) => boolean
 
 export type CustomFilterFns<TData extends RowData> = Record<
@@ -93,7 +88,7 @@ export type FiltersColumn<TData extends RowData> = {
 
 export type FiltersRow<TData extends RowData> = {
   columnFilters: Record<string, boolean>
-  columnFiltersMeta: Record<string, any>
+  columnFiltersMeta: Record<string, FilterMeta>
 }
 
 export type FiltersOptions<TData extends RowData> = {
@@ -110,7 +105,7 @@ export type FiltersOptions<TData extends RowData> = {
   globalFilterFn?: FilterFnOption<TData>
   onGlobalFilterChange?: OnChangeFn<any>
   enableGlobalFilter?: boolean
-  getColumnCanGlobalFilter?: (column: Column<TData>) => boolean
+  getColumnCanGlobalFilter?: (column: Column<TData, unknown>) => boolean
 
   // Faceting
   getFacetedRowModel?: (
@@ -189,7 +184,7 @@ export const Filters: TableFeature = {
   },
 
   createColumn: <TData extends RowData>(
-    column: Column<TData>,
+    column: Column<TData, unknown>,
     table: Table<TData>
   ): FiltersColumn<TData> => {
     return {
@@ -451,7 +446,7 @@ export const Filters: TableFeature = {
 export function shouldAutoRemoveFilter<TData extends RowData>(
   filterFn?: FilterFn<TData>,
   value?: any,
-  column?: Column<TData>
+  column?: Column<TData, unknown>
 ) {
   return (
     (filterFn && filterFn.autoRemove