@tanstack/table-core 8.0.0-alpha.83 → 8.0.0-alpha.86

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.83",
+  "version": "8.0.0-alpha.86",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",

package/src/aggregationFns.ts

@@ -1,64 +1,53 @@
-export const aggregationFns = {
-  sum,
-  min,
-  max,
-  extent,
-  mean,
-  median,
-  unique,
-  uniqueCount,
-  count,
-}
+import { AggregationFn } from './features/Grouping'
 
-export type BuiltInAggregationFn = keyof typeof aggregationFns
-
-function sum(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
+const sum: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   // It's faster to just add the aggregations together instead of
   // process leaf nodes individually
-  return getChildValues().reduce(
+  return childRows.reduce(
     (sum: number, next: unknown) => sum + (typeof next === 'number' ? next : 0),
     0
   )
 }
 
-function min(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
+const min: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let min: number | undefined
 
-  for (const value of getChildValues() as number[]) {
+  childRows.forEach(row => {
+    const value = row.getValue(columnId)
+
     if (
       value != null &&
       (min! > value || (min === undefined && value >= value))
     ) {
       min = value
     }
-  }
+  })
 
   return min
 }
 
-function max(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
+const max: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let max: number | undefined
 
-  for (const value of getChildValues() as number[]) {
+  childRows.forEach(row => {
+    const value = row.getValue(columnId)
     if (
       value != null &&
       (max! < value || (max === undefined && value >= value))
     ) {
       max = value
     }
-  }
+  })
 
   return max
 }
 
-function extent(
-  _getLeafValues: () => unknown[],
-  getChildValues: () => unknown[]
-) {
+const extent: AggregationFn<any> = (columnId, _leafRows, childRows) => {
   let min: number | undefined
   let max: number | undefined
 
-  for (const value of getChildValues() as number[]) {
+  childRows.forEach(row => {
+    const value = row.getValue(columnId)
     if (value != null) {
       if (min === undefined) {
         if (value >= value) min = max = value
@@ -67,36 +56,37 @@ function extent(
         if (max! < value) max = value
       }
     }
-  }
+  })
 
   return [min, max]
 }
 
-export function mean(getLeafValues: () => unknown[]) {
+const mean: AggregationFn<any> = (columnId, leafRows) => {
   let count = 0
   let sum = 0
 
-  for (let value of getLeafValues() as number[]) {
+  leafRows.forEach(row => {
+    let value = row.getValue(columnId)
     if (value != null && (value = +value) >= value) {
       ++count, (sum += value)
     }
-  }
+  })
 
   if (count) return sum / count
 
   return
 }
 
-function median(getLeafValues: () => unknown[]) {
-  const leafValues = getLeafValues()
-  if (!leafValues.length) {
+const median: AggregationFn<any> = (columnId, leafRows) => {
+  if (!leafRows.length) {
     return
   }
 
   let min = 0
   let max = 0
 
-  leafValues.forEach(value => {
+  leafRows.forEach(row => {
+    let value = row.getValue(columnId)
     if (typeof value === 'number') {
       min = Math.min(min, value)
       max = Math.max(max, value)
@@ -106,14 +96,28 @@ function median(getLeafValues: () => unknown[]) {
   return (min + max) / 2
 }
 
-function unique<T>(getLeafValues: () => T[]) {
-  return Array.from(new Set(getLeafValues()).values())
+const unique: AggregationFn<any> = (columnId, leafRows) => {
+  return Array.from(new Set(leafRows.map(d => d.getValue(columnId))).values())
 }
 
-function uniqueCount(getLeafValues: () => unknown[]) {
-  return new Set(getLeafValues()).size
+const uniqueCount: AggregationFn<any> = (columnId, leafRows) => {
+  return new Set(leafRows.map(d => d.getValue(columnId))).size
 }
 
-function count(getLeafValues: () => unknown[]) {
-  return getLeafValues().length
+const count: AggregationFn<any> = (_columnId, leafRows) => {
+  return leafRows.length
+}
+
+export const aggregationFns = {
+  sum,
+  min,
+  max,
+  extent,
+  mean,
+  median,
+  unique,
+  uniqueCount,
+  count,
 }
+
+export type BuiltInAggregationFn = keyof typeof aggregationFns

package/src/core/cell.ts

@@ -0,0 +1,47 @@
+import { Cell, Column, Row, TableGenerics, TableInstance } from '../types'
+
+export type CoreCell<TGenerics extends TableGenerics> = {
+  id: string
+  getValue: () => TGenerics['Value']
+  row: Row<TGenerics>
+  column: Column<TGenerics>
+  renderCell: () => string | null | TGenerics['Rendered']
+}
+
+export function createCell<TGenerics extends TableGenerics>(
+  instance: TableInstance<TGenerics>,
+  row: Row<TGenerics>,
+  column: Column<TGenerics>,
+  columnId: string
+) {
+  const cell: CoreCell<TGenerics> = {
+    id: `${row.id}_${column.id}`,
+    row,
+    column,
+    getValue: () => row.getValue(columnId),
+    renderCell: () =>
+      column.columnDef.cell
+        ? instance._render(column.columnDef.cell, {
+            instance,
+            column,
+            row,
+            cell: cell as Cell<TGenerics>,
+            getValue: cell.getValue,
+          })
+        : null,
+  }
+
+  instance._features.forEach(feature => {
+    Object.assign(
+      cell,
+      feature.createCell?.(
+        cell as Cell<TGenerics>,
+        column,
+        row as Row<TGenerics>,
+        instance
+      )
+    )
+  }, {})
+
+  return cell as Cell<TGenerics>
+}

package/src/core/column.ts

@@ -0,0 +1,148 @@
+import {
+  Cell,
+  Column,
+  Header,
+  TableGenerics,
+  TableInstance,
+  Row,
+  AccessorFn,
+  ColumnDef,
+  Renderable,
+} from '../types'
+import { memo } from '../utils'
+
+export type CoreColumnDefType = 'data' | 'display' | 'group'
+
+export type CoreColumnDef<TGenerics extends TableGenerics> = {
+  id: string
+  accessorKey?: string & keyof TGenerics['Row']
+  accessorFn?: AccessorFn<TGenerics['Row']>
+  columns?: ColumnDef<TGenerics>[]
+  header?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      header: Header<TGenerics>
+      column: Column<TGenerics>
+    }
+  >
+  footer?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      header: Header<TGenerics>
+      column: Column<TGenerics>
+    }
+  >
+  cell?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      row: Row<TGenerics>
+      column: Column<TGenerics>
+      cell: Cell<TGenerics>
+      getValue: () => TGenerics['Value']
+    }
+  >
+  meta?: TGenerics['ColumnMeta']
+}
+
+export type CoreColumn<TGenerics extends TableGenerics> = {
+  id: string
+  depth: number
+  accessorFn?: AccessorFn<TGenerics['Row']>
+  columnDef: ColumnDef<TGenerics>
+  columnDefType: CoreColumnDefType
+  columns: Column<TGenerics>[]
+  parent?: Column<TGenerics>
+  getFlatColumns: () => Column<TGenerics>[]
+  getLeafColumns: () => Column<TGenerics>[]
+}
+
+export function createColumn<TGenerics extends TableGenerics>(
+  instance: TableInstance<TGenerics>,
+  columnDef: ColumnDef<TGenerics> & { columnDefType?: CoreColumnDefType },
+  depth: number,
+  parent?: Column<TGenerics>
+) {
+  const defaultColumn = instance._getDefaultColumnDef()
+
+  columnDef = {
+    ...defaultColumn,
+    ...columnDef,
+  }
+
+  let id =
+    columnDef.id ??
+    columnDef.accessorKey ??
+    (typeof columnDef.header === 'string' ? columnDef.header : undefined)
+
+  let accessorFn: AccessorFn<TGenerics['Row']> | undefined
+
+  if (columnDef.accessorFn) {
+    accessorFn = columnDef.accessorFn
+  } else if (columnDef.accessorKey) {
+    accessorFn = (originalRow?: TGenerics['Row']) =>
+      (originalRow as any)[columnDef.accessorKey]
+  }
+
+  if (!id) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        columnDef.accessorFn
+          ? `Columns require an id when using an accessorFn`
+          : `Columns require an id when using a non-string header`
+      )
+    }
+    throw new Error()
+  }
+
+  let column: CoreColumn<TGenerics> = {
+    ...columnDef,
+    id: `${id}`,
+    accessorFn,
+    parent: parent as any,
+    depth,
+    columnDef,
+    columnDefType: columnDef.columnDefType as CoreColumnDefType,
+    columns: [],
+    getFlatColumns: memo(
+      () => [true],
+      () => {
+        return [
+          column as Column<TGenerics>,
+          ...column.columns?.flatMap(d => d.getFlatColumns()),
+        ]
+      },
+      {
+        key: process.env.NODE_ENV === 'production' && 'column.getFlatColumns',
+        debug: () => instance.options.debugAll ?? instance.options.debugColumns,
+      }
+    ),
+    getLeafColumns: memo(
+      () => [instance._getOrderColumnsFn()],
+      orderColumns => {
+        if (column.columns?.length) {
+          let leafColumns = column.columns.flatMap(column =>
+            column.getLeafColumns()
+          )
+
+          return orderColumns(leafColumns)
+        }
+
+        return [column as Column<TGenerics>]
+      },
+      {
+        key: process.env.NODE_ENV === 'production' && 'column.getLeafColumns',
+        debug: () => instance.options.debugAll ?? instance.options.debugColumns,
+      }
+    ),
+  }
+
+  column = instance._features.reduce((obj, feature) => {
+    return Object.assign(obj, feature.createColumn?.(column, instance))
+  }, column)
+
+  // Yes, we have to convert instance to uknown, because we know more than the compiler here.
+  return column as Column<TGenerics>
+}

package/src/{features/Headers.ts → core/headers.ts}

@@ -1,24 +1,40 @@
 import {
   Column,
-  CoreHeader,
   Header,
   HeaderGroup,
   TableGenerics,
   TableInstance,
 } from '../types'
 import { memo } from '../utils'
+import { TableFeature } from './instance'
+
+export type CoreHeaderGroup<TGenerics extends TableGenerics> = {
+  id: string
+  depth: number
+  headers: Header<TGenerics>[]
+}
+
+export type CoreHeader<TGenerics extends TableGenerics> = {
+  id: string
+  index: number
+  depth: number
+  column: Column<TGenerics>
+  headerGroup: HeaderGroup<TGenerics>
+  subHeaders: Header<TGenerics>[]
+  colSpan: number
+  rowSpan: number
+  getLeafHeaders: () => Header<TGenerics>[]
+  isPlaceholder: boolean
+  placeholderId?: string
+  renderHeader: (options?: {
+    renderPlaceholder?: boolean
+  }) => string | null | TGenerics['Rendered']
+  renderFooter: (options?: {
+    renderPlaceholder?: boolean
+  }) => string | null | TGenerics['Rendered']
+}
 
 export type HeadersInstance<TGenerics extends TableGenerics> = {
-  createHeader: (
-    column: Column<TGenerics>,
-    options: {
-      id?: string
-      isPlaceholder?: boolean
-      placeholderId?: string
-      index: number
-      depth: number
-    }
-  ) => Header<TGenerics>
   getHeaderGroups: () => HeaderGroup<TGenerics>[]
   getLeftHeaderGroups: () => HeaderGroup<TGenerics>[]
   getCenterHeaderGroups: () => HeaderGroup<TGenerics>[]
@@ -38,79 +54,78 @@ export type HeadersInstance<TGenerics extends TableGenerics> = {
   getLeftLeafHeaders: () => Header<TGenerics>[]
   getCenterLeafHeaders: () => Header<TGenerics>[]
   getRightLeafHeaders: () => Header<TGenerics>[]
-
-  getHeader: (id: string) => Header<TGenerics>
 }
 
 //
 
-export const Headers = {
-  createInstance: <TGenerics extends TableGenerics>(
-    instance: TableInstance<TGenerics>
-  ): HeadersInstance<TGenerics> => {
-    return {
-      createHeader: (
-        column: Column<TGenerics>,
-        options: {
-          id?: string
-          isPlaceholder?: boolean
-          placeholderId?: string
-          index: number
-          depth: number
-        }
-      ) => {
-        const id = options.id ?? column.id
-
-        let header: CoreHeader<TGenerics> = {
-          id,
-          column,
-          index: options.index,
-          isPlaceholder: options.isPlaceholder,
-          placeholderId: options.placeholderId,
-          depth: options.depth,
-          subHeaders: [],
-          colSpan: 0,
-          rowSpan: 0,
-          headerGroup: null!,
-          getLeafHeaders: (): Header<TGenerics>[] => {
-            const leafHeaders: CoreHeader<TGenerics>[] = []
-
-            const recurseHeader = (h: CoreHeader<TGenerics>) => {
-              if (h.subHeaders && h.subHeaders.length) {
-                h.subHeaders.map(recurseHeader)
-              }
-              leafHeaders.push(h)
-            }
-
-            recurseHeader(header)
-
-            return leafHeaders as Header<TGenerics>[]
-          },
-          renderHeader: () =>
-            column.columnDef.header
-              ? instance._render(column.columnDef.header, {
-                  instance,
-                  header: header as Header<TGenerics>,
-                  column,
-                })
-              : null,
-          renderFooter: () =>
-            column.columnDef.footer
-              ? instance._render(column.columnDef.footer, {
-                  instance,
-                  header: header as Header<TGenerics>,
-                  column,
-                })
-              : null,
+function createHeader<TGenerics extends TableGenerics>(
+  instance: TableInstance<TGenerics>,
+  column: Column<TGenerics>,
+  options: {
+    id?: string
+    isPlaceholder?: boolean
+    placeholderId?: string
+    index: number
+    depth: number
+  }
+) {
+  const id = options.id ?? column.id
+
+  let header: CoreHeader<TGenerics> = {
+    id,
+    column,
+    index: options.index,
+    isPlaceholder: !!options.isPlaceholder,
+    placeholderId: options.placeholderId,
+    depth: options.depth,
+    subHeaders: [],
+    colSpan: 0,
+    rowSpan: 0,
+    headerGroup: null!,
+    getLeafHeaders: (): Header<TGenerics>[] => {
+      const leafHeaders: CoreHeader<TGenerics>[] = []
+
+      const recurseHeader = (h: CoreHeader<TGenerics>) => {
+        if (h.subHeaders && h.subHeaders.length) {
+          h.subHeaders.map(recurseHeader)
         }
+        leafHeaders.push(h)
+      }
 
-        instance._features.forEach(feature => {
-          Object.assign(header, feature.createHeader?.(header, instance))
-        })
+      recurseHeader(header)
+
+      return leafHeaders as Header<TGenerics>[]
+    },
+    renderHeader: () =>
+      column.columnDef.header
+        ? instance._render(column.columnDef.header, {
+            instance,
+            header: header as Header<TGenerics>,
+            column,
+          })
+        : null,
+    renderFooter: () =>
+      column.columnDef.footer
+        ? instance._render(column.columnDef.footer, {
+            instance,
+            header: header as Header<TGenerics>,
+            column,
+          })
+        : null,
+  }
 
-        return header as Header<TGenerics>
-      },
+  instance._features.forEach(feature => {
+    Object.assign(header, feature.createHeader?.(header, instance))
+  })
+
+  return header as Header<TGenerics>
+}
 
+export const Headers: TableFeature = {
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): HeadersInstance<TGenerics> => {
+    return {
       // Header Groups
 
       getHeaderGroups: memo(
@@ -401,24 +416,6 @@ export const Headers = {
             instance.options.debugAll ?? instance.options.debugHeaders,
         }
       ),
-
-      getHeader: (id: string) => {
-        const header = [
-          ...instance.getFlatHeaders(),
-          ...instance.getCenterFlatHeaders(),
-          ...instance.getLeftFlatHeaders(),
-          ...instance.getRightFlatHeaders(),
-        ].find(d => d.id === id)
-
-        if (!header) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(`Could not find header with id: ${id}`)
-          }
-          throw new Error()
-        }
-
-        return header
-      },
     }
   },
 }
@@ -492,7 +489,7 @@ export function buildHeaderGroups<TGenerics extends TableGenerics>(
         latestPendingParentHeader.subHeaders.push(headerToGroup)
       } else {
         // This is a new header. Let's create it
-        const header = instance.createHeader(column, {
+        const header = createHeader(instance, column, {
           id: [headerFamily, depth, column.id, headerToGroup?.id]
             .filter(Boolean)
             .join('_'),
@@ -523,7 +520,7 @@ export function buildHeaderGroups<TGenerics extends TableGenerics>(
   }
 
   const bottomHeaders = columnsToGroup.map((column, index) =>
-    instance.createHeader(column, {
+    createHeader(instance, column, {
       depth: maxDepth,
       index,
     })
@@ -537,7 +534,9 @@ export function buildHeaderGroups<TGenerics extends TableGenerics>(
   //   return !headerGroup.headers.every(header => header.isPlaceholder)
   // })
 
-  const recurseHeadersForSpans = (headers: Header<TGenerics>[]) => {
+  const recurseHeadersForSpans = (
+    headers: Header<TGenerics>[]
+  ): { colSpan: number; rowSpan: number }[] => {
     const filteredHeaders = headers.filter(header =>
       header.column.getIsVisible()
     )
@@ -563,8 +562,8 @@ export function buildHeaderGroups<TGenerics extends TableGenerics>(
       const minChildRowSpan = Math.min(...childRowSpans)
       rowSpan = rowSpan + minChildRowSpan
 
-      header.colSpan = colSpan > 0 ? colSpan : undefined
-      header.rowSpan = rowSpan > 0 ? rowSpan : undefined
+      header.colSpan = colSpan
+      header.rowSpan = rowSpan
 
       return { colSpan, rowSpan }
     })