@tanstack/table-core 8.0.0-alpha.13 → 8.0.0-alpha.14

package/package.json

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

package/src/core.tsx

@@ -3,7 +3,6 @@ import {
   functionalUpdate,
   propGetter,
   memo,
-  flexRender,
   RequiredKeys,
 } from './utils'
 
@@ -27,9 +26,11 @@ import {
   CellProps,
   TableInstance,
   RowValues,
-  Renderable,
   Please_use_the_create_table_column_utilities_to_define_columns,
   PartialGenerics,
+  CoreCell,
+  Renderable,
+  UseRenderer,
 } from './types'
 
 import { Visibility } from './features/Visibility'
@@ -38,7 +39,7 @@ import { Pinning } from './features/Pinning'
 import { Headers } from './features/Headers'
 import { Filters } from './features/Filters'
 import { Sorting } from './features/Sorting'
-import { Grouping, GroupingCell } from './features/Grouping'
+import { Grouping } from './features/Grouping'
 import { Expanding } from './features/Expanding'
 import { ColumnSizing, defaultColumnSizing } from './features/ColumnSizing'
 import { Pagination } from './features/Pagination'
@@ -64,6 +65,7 @@ export type CoreOptions<TGenerics extends PartialGenerics> = {
   columns: ColumnDef<TGenerics>[]
   state: Partial<TableState>
   onStateChange: (updater: Updater<TableState>) => void
+  render: TGenerics['Render']
   debugAll?: boolean
   debugTable?: boolean
   debugHeaders?: boolean
@@ -140,6 +142,10 @@ export type TableCore<TGenerics extends PartialGenerics> = {
   getLeftTableWidth: () => number
   getCenterTableWidth: () => number
   getRightTableWidth: () => number
+  render: <TProps>(
+    template: Renderable<TGenerics, TProps>,
+    props: TProps
+  ) => string | null | ReturnType<UseRenderer<TGenerics>>
 }
 
 export type CoreRow<TGenerics extends PartialGenerics> = {
@@ -160,30 +166,37 @@ export type CoreColumnDef<TGenerics extends PartialGenerics> = {
   id: string
   accessorKey?: string & keyof TGenerics['Row']
   accessorFn?: AccessorFn<TGenerics['Row']>
-  header?:
-    | string
-    | Renderable<{
-        instance: TableInstance<TGenerics>
-        header: Header<TGenerics>
-        column: Column<TGenerics>
-      }>
   width?: number
   minWidth?: number
   maxWidth?: number
   columns?: ColumnDef<TGenerics>[]
-  footer?: Renderable<{
-    instance: TableInstance<TGenerics>
-    header: Header<TGenerics>
-    column: Column<TGenerics>
-  }>
-  cell?: Renderable<{
-    instance: TableInstance<TGenerics>
-    row: Row<TGenerics>
-    column: Column<TGenerics>
-    cell: Cell<TGenerics>
-    value: TGenerics['Value']
-  }>
-  defaultIsVisible?: boolean
+  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>
+      value: TGenerics['Value']
+    }
+  >
+  meta?: TGenerics['ColumnMeta']
   [Please_use_the_create_table_column_utilities_to_define_columns]: true
 }
 
@@ -203,13 +216,11 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
   options: Options<TGenerics>
 ): TableInstance<TGenerics> {
   if (options.debugAll || options.debugTable) {
-    console.info('Creating React Table Instance...')
+    console.info('Creating Table Instance...')
   }
 
   let instance = {} as TableInstance<TGenerics>
 
-  let listeners: (() => void)[] = []
-
   const defaultOptions = features.reduce((obj, feature) => {
     return Object.assign(obj, (feature as any).getDefaultOptions?.(instance))
   }, {})
@@ -242,6 +253,17 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         functionalUpdate(updater, instance.options)
       )
     },
+    render: (template, props) => {
+      if (typeof instance.options.render === 'function') {
+        return instance.options.render(template, props)
+      }
+
+      if (typeof template === 'function') {
+        return (template as Function)(props)
+      }
+
+      return template
+    },
 
     getRowId: (_: TGenerics['Row'], index: number, parent?: Row<TGenerics>) =>
       `${parent ? [parent.id, index].join('.') : index}`,
@@ -436,9 +458,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
 
       if (!column) {
         if (process.env.NODE_ENV !== 'production') {
-          console.warn(
-            `[React Table] Column with id ${columnId} does not exist.`
-          )
+          console.warn(`[Table] Column with id ${columnId} does not exist.`)
         }
         throw new Error()
       }
@@ -465,7 +485,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
     },
 
     createCell: (row, column, value) => {
-      const cell: Cell<TGenerics> = {
+      const cell: CoreCell<TGenerics> = {
         id: `${row.id}_${column.id}`,
         rowId: row.id,
         columnId: column.id,
@@ -475,14 +495,22 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         getCellProps: userProps =>
           instance.getCellProps(row.id, column.id, userProps)!,
         renderCell: () =>
-          flexRender(column.cell, { instance, column, row, cell, value }),
+          column.cell
+            ? instance.render(column.cell, {
+                instance,
+                column,
+                row,
+                cell: cell as Cell<TGenerics>,
+                value,
+              })
+            : null,
       }
 
       features.forEach(feature => {
         Object.assign(
           cell,
           (feature as any).createCell?.(
-            cell as Cell<TGenerics> & GroupingCell,
+            cell as Cell<TGenerics>,
             column,
             row as Row<TGenerics>,
             instance
@@ -490,7 +518,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         )
       }, {})
 
-      return cell
+      return cell as Cell<TGenerics>
     },
 
     createRow: (id, original, rowIndex, depth, values) => {
@@ -671,7 +699,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
 
       if (!row) {
         if (process.env.NODE_ENV !== 'production') {
-          throw new Error(`[React Table] could not find row with id ${rowId}`)
+          throw new Error(`[Table] could not find row with id ${rowId}`)
         }
         throw new Error()
       }
@@ -681,7 +709,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
       if (!cell) {
         if (process.env.NODE_ENV !== 'production') {
           throw new Error(
-            `[React Table] could not find cell ${columnId} in row ${rowId}`
+            `[Table] could not find cell ${columnId} in row ${rowId}`
           )
         }
         throw new Error()

package/src/createTable.tsx

@@ -4,47 +4,38 @@ import { CustomSortingTypes } from './features/Sorting'
 import {
   ColumnDef,
   AccessorFn,
-  DefaultGenerics,
   PartialGenerics,
   _NonGenerated,
+  AnyRender,
 } from './types'
 import { Overwrite, PartialKeys } from './utils'
 
-export type CreatTableFactory<TGenerics extends Partial<DefaultGenerics>> = <
-  TRow
->() => TableFactory<Overwrite<TGenerics, { Row: TRow }>>
+export type CreateTableFactory<TGenerics extends PartialGenerics> = <
+  TSubGenerics extends {
+    Row: any
+    ColumnMeta?: object
+  }
+>() => Table<
+  Overwrite<
+    TGenerics,
+    { Row: TSubGenerics['Row']; ColumnMeta: TSubGenerics['ColumnMeta'] }
+  >
+>
 
 export type CreateTableFactoryOptions<
+  TRender extends AnyRender,
   TFilterFns extends CustomFilterTypes<any>,
   TSortingFns extends CustomSortingTypes<any>,
   TAggregationFns extends CustomAggregationTypes<any>
 > = {
+  render: TRender
   filterFns?: TFilterFns
   sortingFns?: TSortingFns
   aggregationFns?: TAggregationFns
 }
 
-export function createTableFactory<
-  TFilterFns extends CustomFilterTypes<any>,
-  TSortingFns extends CustomSortingTypes<any>,
-  TAggregationFns extends CustomAggregationTypes<any>
->(
-  opts: CreateTableFactoryOptions<TFilterFns, TSortingFns, TAggregationFns>
-): CreatTableFactory<
-  Overwrite<
-    PartialGenerics,
-    {
-      FilterFns: TFilterFns
-      SortingFns: TSortingFns
-      AggregationFns: TAggregationFns
-    }
-  >
-> {
-  return () => _createTable(undefined, undefined, opts)
-}
-
-export type TableFactory<TGenerics extends Partial<DefaultGenerics>> = {
-  __options: CreateTableFactoryOptions<any, any, any>
+export type Table<TGenerics extends PartialGenerics> = {
+  __options: CreateTableFactoryOptions<any, any, any, any>
   createColumns: (columns: ColumnDef<TGenerics>[]) => ColumnDef<TGenerics>[]
   createGroup: (
     column: Overwrite<
@@ -62,7 +53,13 @@ export type TableFactory<TGenerics extends Partial<DefaultGenerics>> = {
             header?: string | ColumnDef<TGenerics>['header']
           }
         >,
-      { accessorFn?: never; accessorKey?: never }
+      {
+        accessorFn?: never
+        accessorKey?: never
+        // This is sketchy, but allows the column helper pattern we want.
+        // Someone smarter than me could probably do this better.
+        columns?: ColumnDef<any>[]
+      }
     >
   ) => ColumnDef<TGenerics>
   createDisplayColumn: (
@@ -113,17 +110,38 @@ export type TableFactory<TGenerics extends Partial<DefaultGenerics>> = {
   >
 }
 
-export function createTable<TRow>() {
-  return _createTable<Overwrite<PartialGenerics, { Row: TRow }>>()
+type InitTable<TRender extends AnyRender> = {
+  createTableFactory: <TGenerics extends PartialGenerics>(
+    options?: CreateTableFactoryOptions<TRender, any, any, any>
+  ) => CreateTableFactory<Overwrite<TGenerics, { Render: TRender }>>
+  createTable: CreateTableFactory<
+    Overwrite<PartialGenerics, { Render: TRender }>
+  >
+}
+
+//
+
+export function init<TRender extends AnyRender>(opts: {
+  render: TRender
+}): InitTable<TRender> {
+  return {
+    createTableFactory: options => () =>
+      _createTable(undefined, undefined, { ...options, ...opts }),
+    createTable: () => _createTable(undefined, undefined, opts),
+  }
 }
 
 function _createTable<TGenerics extends PartialGenerics>(
   _?: undefined,
   __?: undefined,
-  __options?: CreateTableFactoryOptions<any, any, any>
-): TableFactory<TGenerics> {
+  __options?: CreateTableFactoryOptions<any, any, any, any>
+): Table<TGenerics> {
   return {
-    __options: __options || {},
+    __options: __options ?? {
+      render: () => {
+        throw new Error()
+      },
+    },
     createColumns: columns => columns,
     createDisplayColumn: column => column as any,
     createGroup: column => column as any,

package/src/features/ColumnSizing.ts

@@ -1,7 +1,3 @@
-import {
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-} from 'react'
 import {
   Column,
   Getter,
@@ -49,8 +45,8 @@ export type ColumnSizingDefaultOptions = {
 
 export type ColumnResizerProps = {
   title?: string
-  onMouseDown?: (e: ReactMouseEvent) => void
-  onTouchStart?: (e: ReactTouchEvent) => void
+  onMouseDown?: (e: MouseEvent) => void
+  onTouchStart?: (e: TouchEvent) => void
   draggable?: boolean
   role?: string
 }
@@ -207,7 +203,7 @@ export const ColumnSizing = {
 
         const canResize = column.getCanResize()
 
-        const onResizeStart = (e: ReactMouseEvent | ReactTouchEvent) => {
+        const onResizeStart = (e: MouseEvent | TouchEvent) => {
           if (isTouchStartEvent(e)) {
             // lets not respond to multiple touches (e.g. 2 or 3 fingers)
             if (e.touches && e.touches.length > 1) {
@@ -360,12 +356,12 @@ export const ColumnSizing = {
               title: 'Toggle Grouping',
               draggable: false,
               role: 'separator',
-              onMouseDown: (e: ReactMouseEvent) => {
-                e.persist()
+              onMouseDown: (e: MouseEvent & { persist?: () => void }) => {
+                e.persist?.()
                 onResizeStart(e)
               },
-              onTouchStart: (e: ReactTouchEvent) => {
-                e.persist()
+              onTouchStart: (e: TouchEvent & { persist?: () => void }) => {
+                e.persist?.()
                 onResizeStart(e)
               },
             }
@@ -425,8 +421,6 @@ export function passiveEventSupported() {
   return passiveSupported
 }
 
-function isTouchStartEvent(
-  e: ReactTouchEvent | ReactMouseEvent
-): e is ReactTouchEvent {
+function isTouchStartEvent(e: TouchEvent | MouseEvent): e is TouchEvent {
   return e.type === 'touchstart'
 }

package/src/features/Expanding.ts

@@ -165,7 +165,7 @@ export const Expanding = {
         if (!row) {
           if (process.env.NODE_ENV !== 'production') {
             console.warn(
-              `[ReactTable] getIsRowExpanded: no row found with id ${rowId}`
+              `[Table] getIsRowExpanded: no row found with id ${rowId}`
             )
           }
           throw new Error()
@@ -184,7 +184,7 @@ export const Expanding = {
         if (!row) {
           if (process.env.NODE_ENV !== 'production') {
             console.warn(
-              `[ReactTable] getRowCanExpand: no row found with id ${rowId}`
+              `[Table] getRowCanExpand: no row found with id ${rowId}`
             )
           }
           throw new Error()

package/src/features/Filters.ts

@@ -409,7 +409,7 @@ export const Filters = {
           if (!column) {
             if (process.env.NODE_ENV !== 'production') {
               console.warn(
-                `React-Table: Could not find a column with id: ${columnId}`
+                `Table: Could not find a column with id: ${columnId}`
               )
             }
             throw new Error()

package/src/features/Grouping.ts

@@ -1,4 +1,3 @@
-import React, { MouseEvent, TouchEvent } from 'react'
 import { RowModel } from '..'
 import { BuiltInAggregationType, aggregationTypes } from '../aggregationTypes'
 import {
@@ -11,6 +10,8 @@ import {
   Row,
   Updater,
   PartialGenerics,
+  Renderable,
+  UseRenderer,
 } from '../types'
 import {
   functionalUpdate,
@@ -46,7 +47,16 @@ export type GroupingTableState = {
 export type GroupingColumnDef<TGenerics extends PartialGenerics> = {
   aggregationType?: AggregationType<Overwrite<TGenerics, { Value: any }>>
   aggregateValue?: (columnValue: unknown) => any
-  renderAggregatedCell?: () => React.ReactNode
+  aggregatedCell?: Renderable<
+    TGenerics,
+    {
+      instance: TableInstance<TGenerics>
+      row: Row<TGenerics>
+      column: Column<TGenerics>
+      cell: Cell<TGenerics>
+      value: TGenerics['Value']
+    }
+  >
   enableGrouping?: boolean
   defaultCanGroup?: boolean
 }
@@ -68,10 +78,11 @@ export type GroupingRow = {
   getIsGrouped: () => boolean
 }
 
-export type GroupingCell = {
+export type GroupingCell<TGenerics extends PartialGenerics> = {
   getIsGrouped: () => boolean
   getIsPlaceholder: () => boolean
   getIsAggregated: () => boolean
+  renderAggregatedCell: () => string | null | ReturnType<UseRenderer<TGenerics>>
 }
 
 export type ColumnDefaultOptions = {
@@ -277,7 +288,6 @@ export const Grouping = {
           title: canGroup ? 'Toggle Grouping' : undefined,
           onClick: canGroup
             ? (e: MouseEvent | TouchEvent) => {
-                e.persist()
                 column.toggleGrouping?.()
               }
             : undefined,
@@ -321,11 +331,11 @@ export const Grouping = {
   },
 
   createCell: <TGenerics extends PartialGenerics>(
-    cell: Cell<TGenerics> & GroupingCell,
+    cell: Cell<TGenerics>,
     column: Column<TGenerics>,
     row: Row<TGenerics>,
-    _instance: TableInstance<TGenerics>
-  ): GroupingCell => {
+    instance: TableInstance<TGenerics>
+  ): GroupingCell<TGenerics> => {
     return {
       getIsGrouped: () =>
         column.getIsGrouped() && column.id === row.groupingColumnId,
@@ -334,6 +344,19 @@ export const Grouping = {
         !cell.getIsGrouped() &&
         !cell.getIsPlaceholder() &&
         row.subRows?.length > 1,
+      renderAggregatedCell: () => {
+        const template = column.aggregatedCell ?? column.cell
+
+        return template
+          ? instance.render(template, {
+              instance,
+              column,
+              row,
+              cell,
+              value: cell.value,
+            })
+          : null
+      },
     }
   },
 

package/src/features/Headers.ts

@@ -14,7 +14,7 @@ import {
   TableInstance,
   Row,
 } from '../types'
-import { propGetter, memo, flexRender } from '../utils'
+import { propGetter, memo } from '../utils'
 import { ColumnSizing } from './ColumnSizing'
 
 export type HeadersRow<TGenerics extends PartialGenerics> = {
@@ -224,9 +224,21 @@ export const Headers = {
           getFooterProps: userProps =>
             instance.getFooterProps(header.id, userProps)!,
           renderHeader: () =>
-            flexRender(column.header, { instance, header, column }),
+            column.header
+              ? instance.render(column.header, {
+                  instance,
+                  header: header as Header<TGenerics>,
+                  column,
+                })
+              : null,
           renderFooter: () =>
-            flexRender(column.footer, { instance, header, column }),
+            column.footer
+              ? instance.render(column.footer, {
+                  instance,
+                  header: header as Header<TGenerics>,
+                  column,
+                })
+              : null,
         }
 
         // Yes, we have to convert instance to unknown, because we know more than the compiler here.

package/src/features/RowSelection.ts

@@ -1,4 +1,3 @@
-import React, { MouseEvent, TouchEvent } from 'react'
 import {
   Getter,
   OnChangeFn,
@@ -8,6 +7,7 @@ import {
   Row,
   RowModel,
   Updater,
+  AnyGenerics,
 } from '../types'
 import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
 
@@ -581,7 +581,7 @@ const mutateRowIsSelected = <TGenerics extends PartialGenerics>(
   }
 }
 
-export function selectRowsFn<TGenerics extends PartialGenerics>(
+export function selectRowsFn<TGenerics extends AnyGenerics>(
   instance: TableInstance<TGenerics>,
   rowModel: RowModel<TGenerics>
 ): RowModel<TGenerics> {

package/src/features/Visibility.ts

@@ -48,6 +48,7 @@ type ToggleAllColumnsVisibilityProps = {}
 export type VisibilityColumnDef = {
   enableHiding?: boolean
   defaultCanHide?: boolean
+  defaultIsVisible?: boolean
 }
 
 export type VisibilityRow<TGenerics extends PartialGenerics> = {

package/src/types.ts

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   CoreColumn,
   CoreColumnDef,
@@ -42,6 +41,7 @@ import {
   SortingTableState,
 } from './features/Sorting'
 import {
+  GroupingCell,
   GroupingColumn,
   GroupingColumnDef,
   GroupingInstance,
@@ -55,7 +55,7 @@ import {
   ExpandedTableState,
   ExpandedRow,
 } from './features/Expanding'
-import { Overwrite } from './utils'
+import { Overwrite, PartialKeys } from './utils'
 import {
   ColumnSizingColumn,
   ColumnSizingColumnDef,
@@ -76,20 +76,27 @@ import {
   RowSelectionTableState,
 } from './features/RowSelection'
 
-// declare global {
-//   const process.env.NODE_ENV !== 'production': boolean
-// }
-
 export type DefaultGenerics = {
   Row: unknown
   Value: unknown
   FilterFns: object
   SortingFns: object
   AggregationFns: object
+  Render: unknown
+  ColumnMeta: object
 }
 
+export type AnyRender = (Comp: any, props: any) => any
+
+export type UseRenderer<TGenerics extends PartialGenerics> =
+  TGenerics['Render'] extends (...args: any) => any ? TGenerics['Render'] : any
+
 export type PartialGenerics = Partial<DefaultGenerics>
 
+export type AnyGenerics = {
+  [TKey in keyof PartialGenerics]: any
+}
+
 export type TableInstance<TGenerics extends PartialGenerics> =
   TableCore<TGenerics> &
     VisibilityInstance<TGenerics> &
@@ -104,11 +111,6 @@ 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> =
@@ -167,6 +169,10 @@ export type _NonGenerated<T> = Overwrite<
   }
 >
 
+export type Renderable<TGenerics extends PartialGenerics, TProps> =
+  | string
+  | ((props: TProps) => ReturnType<UseRenderer<TGenerics>>)
+
 export type ColumnDef<TGenerics extends PartialGenerics> =
   CoreColumnDef<TGenerics> &
     VisibilityColumnDef &
@@ -185,7 +191,10 @@ export type Column<TGenerics extends PartialGenerics> = ColumnDef<TGenerics> &
   GroupingColumn<TGenerics> &
   ColumnSizingColumn<TGenerics>
 
-export type Cell<TGenerics extends PartialGenerics> = {
+export type Cell<TGenerics extends PartialGenerics> = CoreCell<TGenerics> &
+  GroupingCell<TGenerics>
+
+export type CoreCell<TGenerics extends PartialGenerics> = {
   id: string
   rowId: string
   columnId: string
@@ -193,7 +202,7 @@ export type Cell<TGenerics extends PartialGenerics> = {
   row: Row<TGenerics>
   column: Column<TGenerics>
   getCellProps: PropGetter<CellProps>
-  renderCell: () => React.ReactNode
+  renderCell: () => string | null | ReturnType<UseRenderer<TGenerics>>
 }
 
 export type Header<TGenerics extends PartialGenerics> = CoreHeader<TGenerics> &
@@ -212,8 +221,12 @@ export type CoreHeader<TGenerics extends PartialGenerics> = {
   getLeafHeaders: () => Header<TGenerics>[]
   isPlaceholder?: boolean
   placeholderId?: string
-  renderHeader: (options?: { renderPlaceholder?: boolean }) => React.ReactNode
-  renderFooter: (options?: { renderPlaceholder?: boolean }) => React.ReactNode
+  renderHeader: (options?: {
+    renderPlaceholder?: boolean
+  }) => string | null | ReturnType<UseRenderer<TGenerics>>
+  renderFooter: (options?: {
+    renderPlaceholder?: boolean
+  }) => string | null | ReturnType<UseRenderer<TGenerics>>
 }
 
 export type HeaderGroup<TGenerics extends PartialGenerics> = {