@tanstack/table-core 8.2.4 → 8.3.0

package/package.json

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

package/src/columnHelper.ts

@@ -0,0 +1,74 @@
+import { AccessorFn, ColumnDef, RowData } from './types'
+import { DeepKeys, DeepValue } from './utils'
+
+// type Person = {
+//   firstName: string
+//   lastName: string
+//   age: number
+//   visits: number
+//   status: string
+//   progress: number
+//   nested: {
+//     foo: [
+//       {
+//         bar: 'bar'
+//       }
+//     ]
+//     bar: { subBar: boolean }[]
+//     baz: {
+//       foo: 'foo'
+//       bar: {
+//         baz: 'baz'
+//       }
+//     }
+//   }
+// }
+
+// const test: DeepKeys<Person> = 'nested.foo.0.bar'
+// const test2: DeepKeys<Person> = 'nested.bar'
+
+// const helper = createColumnHelper<Person>()
+
+// helper.accessor('nested.foo', {
+//   cell: info => info.getValue(),
+// })
+
+// helper.accessor('nested.foo.0.bar', {
+//   cell: info => info.getValue(),
+// })
+
+// helper.accessor('nested.bar', {
+//   cell: info => info.getValue(),
+// })
+
+export type ColumnHelper<TData extends RowData> = {
+  accessor: <
+    TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
+    TValue extends TAccessor extends AccessorFn<TData, infer TReturn>
+      ? TReturn
+      : TAccessor extends DeepKeys<TData>
+      ? DeepValue<TData, TAccessor>
+      : never
+  >(
+    accessor: TAccessor,
+    column: Omit<ColumnDef<TData, TValue>, 'accessorKey'>
+  ) => ColumnDef<TData, TValue>
+}
+
+export function createColumnHelper<
+  TData extends RowData
+>(): ColumnHelper<TData> {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === 'function'
+        ? ({
+            ...column,
+            accessorFn: accessor,
+          } as any)
+        : {
+            ...column,
+            accessorKey: accessor,
+          }
+    },
+  }
+}

package/src/core/cell.ts

@@ -1,19 +1,26 @@
 import { RowData, Cell, Column, Row, Table } from '../types'
+import { IsAny, IsKnown } from '../utils'
+
+type NoInfer<T> = [T][T extends any ? 0 : never]
+
+type Getter<TValue> = <TTValue = TValue>() => NoInfer<TTValue>
+
+export type CellContext<TData extends RowData, TValue> = {
+  table: Table<TData>
+  column: Column<TData, TValue>
+  row: Row<TData>
+  cell: Cell<TData, TValue>
+  getValue: Getter<TValue>
+  renderValue: Getter<TValue | null>
+}
 
 export type CoreCell<TData extends RowData, TValue> = {
   id: string
-  getValue: <TTValue = TValue>() => TTValue
-  renderValue: <TTValue = TValue>() => TTValue | null
+  getValue: CellContext<TData, TValue>['getValue']
+  renderValue: CellContext<TData, TValue>['renderValue']
   row: Row<TData>
   column: Column<TData, TValue>
-  getContext: () => {
-    table: Table<TData>
-    column: Column<TData, TValue>
-    row: Row<TData>
-    cell: Cell<TData, TValue>
-    getValue: <TTValue = TValue>() => TTValue
-    renderValue: <TTValue = TValue>() => TTValue | null
-  }
+  getContext: () => CellContext<TData, TValue>
 }
 
 export function createCell<TData extends RowData, TValue>(

package/src/core/column.ts

@@ -7,32 +7,26 @@ import {
   RowData,
   ColumnMeta,
 } from '../types'
-import { memo, UnionToIntersection } from '../utils'
-import { CoreCell } from './cell'
-import { CoreHeader } from './headers'
-
-export type CoreColumnDefType = 'data' | 'display' | 'group'
-
-type CoreColumnDefBase<TData extends RowData, TValue> = {
-  columns?: ColumnDef<TData>[]
-  header?: ColumnDefTemplate<
-    ReturnType<CoreHeader<TData, TValue>['getContext']>
-  >
-  footer?: ColumnDefTemplate<
-    ReturnType<CoreHeader<TData, TValue>['getContext']>
-  >
-  cell?: ColumnDefTemplate<ReturnType<CoreCell<TData, TValue>['getContext']>>
+import { DeepKeys, IsKnown, memo, UnionToIntersection } from '../utils'
+import { CellContext } from './cell'
+import { HeaderContext } from './headers'
+
+export type CoreColumnDefBase<TData extends RowData, TValue> = {
+  columns?: ColumnDef<TData, unknown>[]
+  header?: ColumnDefTemplate<HeaderContext<TData, TValue>>
+  footer?: ColumnDefTemplate<HeaderContext<TData, TValue>>
+  cell?: ColumnDefTemplate<CellContext<TData, TValue>>
   meta?: ColumnMeta
 }
 
-type CoreColumnDefDisplay<TData extends RowData, TValue> = CoreColumnDefBase<
-  TData,
+export type CoreColumnDefDisplay<
+  TData extends RowData,
   TValue
-> & {
+> = CoreColumnDefBase<TData, TValue> & {
   id: string
 }
 
-type CoreColumnDefDisplayWithStringHeader<
+export type CoreColumnDefDisplayWithStringHeader<
   TData extends RowData,
   TValue
 > = CoreColumnDefBase<TData, TValue> & {
@@ -40,40 +34,40 @@ type CoreColumnDefDisplayWithStringHeader<
   id?: string
 }
 
-type CoreColumnDefAccessorFn<
+export type CoreColumnDefAccessorFn<
   TData extends RowData,
-  TValue = unknown
+  TValue
 > = CoreColumnDefBase<TData, TValue> & {
   accessorFn: AccessorFn<TData, TValue>
   id: string
-  // accessorKey?: never
 }
 
-type CoreColumnDefAccessorKey<
+export type CoreColumnDefAccessorKey<
   TData extends RowData,
   TValue
 > = CoreColumnDefBase<TData, TValue> & {
-  accessorKey: keyof TData
+  accessorKey: DeepKeys<TData>
   id?: string
-  // accessorFn?: never
 }
 
 export type CoreColumnDef<TData extends RowData, TValue> =
   | CoreColumnDefDisplay<TData, TValue>
   | CoreColumnDefDisplayWithStringHeader<TData, TValue>
-  | CoreColumnDefAccessorFn<TData>
+  | CoreColumnDefAccessorFn<TData, TValue>
   | CoreColumnDefAccessorKey<TData, TValue>
 
 export type CoreColumnDefResolved<
   TData extends RowData,
   TValue = unknown
-> = Partial<UnionToIntersection<CoreColumnDef<TData, TValue>>>
+> = Partial<UnionToIntersection<CoreColumnDef<TData, TValue>>> & {
+  accessorKey?: string
+}
 
 export type CoreColumn<TData extends RowData, TValue> = {
   id: string
   depth: number
   accessorFn?: AccessorFn<TData, TValue>
-  columnDef: ColumnDef<TData>
+  columnDef: ColumnDef<TData, TValue>
   columns: Column<TData, TValue>[]
   parent?: Column<TData, TValue>
   getFlatColumns: () => Column<TData, TValue>[]
@@ -82,7 +76,7 @@ export type CoreColumn<TData extends RowData, TValue> = {
 
 export function createColumn<TData extends RowData, TValue>(
   table: Table<TData>,
-  columnDef: ColumnDef<TData>,
+  columnDef: ColumnDef<TData, TValue>,
   depth: number,
   parent?: Column<TData, TValue>
 ) {
@@ -93,9 +87,11 @@ export function createColumn<TData extends RowData, TValue>(
     ...columnDef,
   } as CoreColumnDefResolved<TData>
 
+  const accessorKey = resolvedColumnDef.accessorKey
+
   let id =
     resolvedColumnDef.id ??
-    resolvedColumnDef.accessorKey ??
+    (accessorKey ? accessorKey.replace('.', '_') : undefined) ??
     (typeof resolvedColumnDef.header === 'string'
       ? resolvedColumnDef.header
       : undefined)
@@ -104,9 +100,22 @@ export function createColumn<TData extends RowData, TValue>(
 
   if (resolvedColumnDef.accessorFn) {
     accessorFn = resolvedColumnDef.accessorFn
-  } else if (resolvedColumnDef.accessorKey) {
-    accessorFn = (originalRow: TData) =>
-      (originalRow as any)[resolvedColumnDef.accessorKey]
+  } else if (accessorKey) {
+    // Support deep accessor keys
+    if (accessorKey.includes('.')) {
+      accessorFn = (originalRow: TData) => {
+        let result = originalRow as Record<string, any>
+
+        for (const key of accessorKey.split('.')) {
+          result = result[key]
+        }
+
+        return result
+      }
+    } else {
+      accessorFn = (originalRow: TData) =>
+        (originalRow as any)[resolvedColumnDef.accessorKey]
+    }
   }
 
   if (!id) {
@@ -125,7 +134,7 @@ export function createColumn<TData extends RowData, TValue>(
     accessorFn,
     parent: parent as any,
     depth,
-    columnDef: resolvedColumnDef as ColumnDef<TData>,
+    columnDef: resolvedColumnDef as ColumnDef<TData, any>,
     columns: [],
     getFlatColumns: memo(
       () => [true],

package/src/core/headers.ts

@@ -8,6 +8,12 @@ export type CoreHeaderGroup<TData extends RowData> = {
   headers: Header<TData, unknown>[]
 }
 
+export type HeaderContext<TData, TValue> = {
+  table: Table<TData>
+  header: Header<TData, TValue>
+  column: Column<TData, TValue>
+}
+
 export type CoreHeader<TData extends RowData, TValue> = {
   id: string
   index: number
@@ -20,11 +26,7 @@ export type CoreHeader<TData extends RowData, TValue> = {
   getLeafHeaders: () => Header<TData, unknown>[]
   isPlaceholder: boolean
   placeholderId?: string
-  getContext: () => {
-    table: Table<TData>
-    header: Header<TData, TValue>
-    column: Column<TData, TValue>
-  }
+  getContext: () => HeaderContext<TData, TValue>
 }
 
 export type HeadersInstance<TData extends RowData> = {
@@ -78,7 +80,7 @@ function createHeader<TData extends RowData, TValue>(
     getLeafHeaders: (): Header<TData, unknown>[] => {
       const leafHeaders: Header<TData, unknown>[] = []
 
-      const recurseHeader = (h: CoreHeader<TData, unknown>) => {
+      const recurseHeader = (h: CoreHeader<TData, any>) => {
         if (h.subHeaders && h.subHeaders.length) {
           h.subHeaders.map(recurseHeader)
         }

package/src/core/table.ts

@@ -80,8 +80,8 @@ export type CoreOptions<TData extends RowData> = {
   getCoreRowModel: (table: Table<any>) => () => RowModel<any>
   getSubRows?: (originalRow: TData, index: number) => undefined | TData[]
   getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
-  columns: ColumnDef<TData>[]
-  defaultColumn?: Partial<ColumnDef<TData>>
+  columns: ColumnDef<TData, any>[]
+  defaultColumn?: Partial<ColumnDef<TData, unknown>>
   renderFallbackValue: any
 }
 
@@ -99,8 +99,8 @@ export type CoreInstance<TData extends RowData> = {
   _getCoreRowModel?: () => RowModel<TData>
   getRowModel: () => RowModel<TData>
   getRow: (id: string) => Row<TData>
-  _getDefaultColumnDef: () => Partial<ColumnDef<TData>>
-  _getColumnDefs: () => ColumnDef<TData>[]
+  _getDefaultColumnDef: () => Partial<ColumnDef<TData, unknown>>
+  _getColumnDefs: () => ColumnDef<TData, unknown>[]
   _getAllFlatColumnsById: () => Record<string, Column<TData, unknown>>
   getAllColumns: () => Column<TData, unknown>[]
   getAllFlatColumns: () => Column<TData, unknown>[]
@@ -227,7 +227,9 @@ export function createTable<TData extends RowData>(
     _getDefaultColumnDef: memo(
       () => [table.options.defaultColumn],
       defaultColumn => {
-        defaultColumn = (defaultColumn ?? {}) as Partial<ColumnDef<TData>>
+        defaultColumn = (defaultColumn ?? {}) as Partial<
+          ColumnDef<TData, unknown>
+        >
 
         return {
           header: props => props.header.column.id,
@@ -237,7 +239,7 @@ export function createTable<TData extends RowData>(
             return Object.assign(obj, feature.getDefaultColumnDef?.())
           }, {}),
           ...defaultColumn,
-        } as Partial<ColumnDef<TData>>
+        } as Partial<ColumnDef<TData, unknown>>
       },
       {
         debug: () => table.options.debugAll ?? table.options.debugColumns,
@@ -251,7 +253,7 @@ export function createTable<TData extends RowData>(
       () => [table._getColumnDefs()],
       columnDefs => {
         const recurseColumns = (
-          columnDefs: ColumnDef<TData>[],
+          columnDefs: ColumnDef<TData, unknown>[],
           parent?: Column<TData, unknown>,
           depth = 0
         ): Column<TData, unknown>[] => {

package/src/features/Expanding.ts

@@ -218,9 +218,11 @@ export const Expanding: TableFeature = {
       },
       getCanExpand: () => {
         return (
-          (table.options.getRowCanExpand?.(row) ?? true) &&
-          (table.options.enableExpanding ?? true) &&
-          !!row.subRows?.length
+          table.options.getRowCanExpand?.(row) ??
+          (
+            (table.options.enableExpanding ?? true) &&
+            !!row.subRows?.length
+          )
         )
       },
       getToggleExpandedHandler: () => {

package/src/features/Filters.ts

@@ -178,7 +178,7 @@ export const Filters: TableFeature = {
           .flatRows[0]?._getAllCellsByColumnId()
           [column.id]?.getValue()
 
-        return typeof value === 'string'
+        return typeof value === 'string' || typeof value === 'number'
       },
     }
   },

package/src/index.ts

@@ -16,6 +16,7 @@ export * from './features/Visibility'
 export * from './filterFns'
 export * from './sortingFns'
 export * from './aggregationFns'
+export * from './columnHelper'
 export * from './utils'
 export * from './utils/getCoreRowModel'
 export * from './utils/getFilteredRowModel'

package/src/utils.ts

@@ -15,7 +15,57 @@ export type UnionToIntersection<T> = (
   ? R
   : never
 
-export type IfDefined<T, N> = 0 extends 1 & T ? N : T extends {} ? T : N
+export type IsAny<T, Y, N> = 1 extends 0 & T ? Y : N
+export type IsKnown<T, Y, N> = unknown extends T ? N : Y
+
+type ComputeRange<
+  N extends number,
+  Result extends Array<unknown> = []
+> = Result['length'] extends N
+  ? Result
+  : ComputeRange<N, [...Result, Result['length']]>
+type Index100 = ComputeRange<100>[number]
+
+// Is this type a tuple?
+type IsTuple<T> = T extends readonly any[] & { length: infer Length }
+  ? Length extends Index100
+    ? T
+    : never
+  : never
+
+// If this type is a tuple, what indices are allowed?
+type AllowedIndexes<
+  Tuple extends ReadonlyArray<any>,
+  Keys extends number = never
+> = Tuple extends readonly []
+  ? Keys
+  : Tuple extends readonly [infer _, ...infer Tail]
+  ? AllowedIndexes<Tail, Keys | Tail['length']>
+  : Keys
+
+export type DeepKeys<T> = unknown extends T
+  ? keyof T
+  : object extends T
+  ? string
+  : T extends readonly any[] & IsTuple<T>
+  ? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>>
+  : T extends any[]
+  ? never & 'Dynamic length array indexing is not supported'
+  : T extends object
+  ? (keyof T & string) | DeepKeysPrefix<T, keyof T>
+  : never
+
+type DeepKeysPrefix<T, TPrefix> = TPrefix extends keyof T & (number | string)
+  ? `${TPrefix}.${DeepKeys<T[TPrefix]> & string}`
+  : never
+
+export type DeepValue<T, TProp> = T extends Record<string | number, any>
+  ? TProp extends `${infer TBranch}.${infer TDeepProp}`
+    ? DeepValue<T[TBranch], TDeepProp>
+    : T[TProp & string]
+  : never
+
+///
 
 export function functionalUpdate<T>(updater: Updater<T>, input: T): T {
   return typeof updater === 'function'