@tanstack/table-core 8.0.0-alpha.55 → 8.0.0-alpha.57

package/src/features/Rows.ts

@@ -0,0 +1,151 @@
+import {
+  Cell,
+  TableGenerics,
+  TableInstance,
+  Row,
+  Column,
+  CoreCell,
+  Getter,
+  CellProps,
+  PropGetterValue,
+  RowProps,
+  RowModel,
+  RowValues,
+  PropGetter,
+} from '../types'
+import { flattenBy, memo, propGetter } from '../utils'
+
+export type CoreRow<TGenerics extends TableGenerics> = {
+  id: string
+  index: number
+  original?: TGenerics['Row']
+  depth: number
+  values: RowValues
+  subRows: Row<TGenerics>[]
+  getLeafRows: () => Row<TGenerics>[]
+  getRowProps: PropGetter<RowProps>
+  originalSubRows?: TGenerics['Row'][]
+}
+
+export type RowsOptions<TGenerics extends TableGenerics> = {
+  getCoreRowModel: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
+  getSubRows?: (
+    originalRow: TGenerics['Row'],
+    index: number
+  ) => TGenerics['Row'][]
+  getRowId?: (
+    originalRow: TGenerics['Row'],
+    index: number,
+    parent?: Row<TGenerics>
+  ) => string
+}
+
+export type RowsInstance<TGenerics extends TableGenerics> = {
+  getRowId: (
+    _: TGenerics['Row'],
+    index: number,
+    parent?: Row<TGenerics>
+  ) => string
+  createRow: (
+    id: string,
+    original: TGenerics['Row'] | undefined,
+    rowIndex: number,
+    depth: number,
+    values: Record<string, any>
+  ) => Row<TGenerics>
+  getCoreRowModel: () => RowModel<TGenerics>
+  _getCoreRowModel?: () => RowModel<TGenerics>
+  getRowModel: () => RowModel<TGenerics>
+  getRow: (id: string) => Row<TGenerics>
+  getRowProps: <TGetter extends Getter<RowProps>>(
+    rowId: string,
+    userProps?: TGetter
+  ) => undefined | PropGetterValue<RowProps, TGetter>
+}
+
+//
+
+export const Rows = {
+  // createRow: <TGenerics extends TableGenerics>(
+  //   row: Row<TGenerics>,
+  //   instance: TableInstance<TGenerics>
+  // ): CellsRow<TGenerics> => {
+  //   return {}
+  // },
+
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): RowsInstance<TGenerics> => {
+    return {
+      getRowId: (
+        row: TGenerics['Row'],
+        index: number,
+        parent?: Row<TGenerics>
+      ) =>
+        instance.options.getRowId?.(row, index, parent) ??
+        `${parent ? [parent.id, index].join('.') : index}`,
+      createRow: (id, original, rowIndex, depth, values) => {
+        let row: CoreRow<TGenerics> = {
+          id,
+          index: rowIndex,
+          original,
+          depth,
+          values,
+          subRows: [],
+          getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
+          getRowProps: userProps => instance.getRowProps(row.id, userProps)!,
+        }
+
+        for (let i = 0; i < instance._features.length; i++) {
+          const feature = instance._features[i]
+          Object.assign(row, feature.createRow?.(row, instance))
+        }
+
+        return row as Row<TGenerics>
+      },
+
+      getCoreRowModel: () => {
+        if (!instance._getCoreRowModel) {
+          instance._getCoreRowModel = instance.options.getCoreRowModel(instance)
+        }
+
+        return instance._getCoreRowModel()
+      },
+
+      // The final calls start at the bottom of the model,
+      // expanded rows, which then work their way up
+
+      getRowModel: () => {
+        return instance.getPaginationRowModel()
+      },
+      getRow: (id: string) => {
+        const row = instance.getRowModel().rowsById[id]
+
+        if (!row) {
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error(`getRow expected an ID, but got ${id}`)
+          }
+          throw new Error()
+        }
+
+        return row
+      },
+      getRowProps: (rowId, userProps) => {
+        const row = instance.getRow(rowId)
+        if (!row) {
+          return
+        }
+
+        return propGetter(
+          {
+            key: row.id,
+            role: 'row',
+          },
+          userProps
+        )
+      },
+    }
+  },
+}

package/src/features/Sorting.ts

@@ -172,7 +172,7 @@ export const Sorting = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): SortingInstance<TGenerics> => {
     let registered = false

package/src/features/Visibility.ts

@@ -7,6 +7,7 @@ import {
   PropGetterValue,
   TableInstance,
   Updater,
+  Row,
 } from '../types'
 import { makeStateUpdater, memo, propGetter } from '../utils'
 
@@ -28,6 +29,9 @@ export type VisibilityTableState = {
 export type VisibilityInstance<TGenerics extends TableGenerics> = {
   getVisibleFlatColumns: () => Column<TGenerics>[]
   getVisibleLeafColumns: () => Column<TGenerics>[]
+  getLeftVisibleLeafColumns: () => Column<TGenerics>[]
+  getRightVisibleLeafColumns: () => Column<TGenerics>[]
+  getCenterVisibleLeafColumns: () => Column<TGenerics>[]
   setColumnVisibility: (updater: Updater<VisibilityState>) => void
   toggleColumnVisibility: (columnId: string, value?: boolean) => void
   toggleAllColumnsVisible: (value?: boolean) => void
@@ -52,6 +56,7 @@ export type VisibilityColumnDef = {
 }
 
 export type VisibilityRow<TGenerics extends TableGenerics> = {
+  _getAllVisibleCells: () => Cell<TGenerics>[]
   getVisibleCells: () => Cell<TGenerics>[]
 }
 
@@ -113,46 +118,88 @@ export const Visibility = {
     }
   },
 
-  getInstance: <TGenerics extends TableGenerics>(
+  createRow: <TGenerics extends TableGenerics>(
+    row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
-  ): VisibilityInstance<TGenerics> => {
+  ): VisibilityRow<TGenerics> => {
     return {
-      getVisibleFlatColumns: memo(
+      _getAllVisibleCells: memo(
         () => [
-          instance.getAllFlatColumns(),
-          instance
-            .getAllFlatColumns()
-            .filter(d => d.getIsVisible?.())
+          row
+            .getAllCells()
+            .filter(cell => cell.column.getIsVisible())
             .map(d => d.id)
             .join('_'),
         ],
-        allFlatColumns => {
-          return allFlatColumns.filter(d => d.getIsVisible?.())
+        _ => {
+          return row.getAllCells().filter(cell => cell.column.getIsVisible())
         },
         {
-          key: 'getVisibleFlatColumns',
-          debug: () =>
-            instance.options.debugAll ?? instance.options.debugColumns,
+          key: 'row._getAllVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getVisibleCells: memo(
+        () => [
+          row.getLeftVisibleCells(),
+          row.getCenterVisibleCells(),
+          row.getRightVisibleCells(),
+        ],
+        (left, center, right) => [...left, ...center, ...right],
+        {
+          key: 'row.getVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
         }
       ),
+    }
+  },
 
-      getVisibleLeafColumns: memo(
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): VisibilityInstance<TGenerics> => {
+    const makeVisibleColumnsMethod = (
+      key: string,
+      getColumns: () => Column<TGenerics>[]
+    ): (() => Column<TGenerics>[]) => {
+      return memo(
         () => [
-          instance.getAllLeafColumns(),
-          instance
-            .getAllLeafColumns()
-            .filter(d => d.getIsVisible?.())
+          getColumns(),
+          getColumns()
+            .filter(d => d.getIsVisible())
             .map(d => d.id)
             .join('_'),
         ],
-        allFlatColumns => {
-          return allFlatColumns.filter(d => d.getIsVisible?.())
+        columns => {
+          return columns.filter(d => d.getIsVisible?.())
         },
         {
-          key: 'getVisibleLeafColumns',
+          key,
           debug: () =>
             instance.options.debugAll ?? instance.options.debugColumns,
         }
+      )
+    }
+
+    return {
+      getVisibleFlatColumns: makeVisibleColumnsMethod(
+        'getVisibleFlatColumns',
+        () => instance.getAllFlatColumns()
+      ),
+      getVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getVisibleLeafColumns',
+        () => instance.getAllLeafColumns()
+      ),
+      getLeftVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getLeftVisibleLeafColumns',
+        () => instance.getLeftLeafColumns()
+      ),
+      getRightVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getRightVisibleLeafColumns',
+        () => instance.getRightLeafColumns()
+      ),
+      getCenterVisibleLeafColumns: makeVisibleColumnsMethod(
+        'getCenterVisibleLeafColumns',
+        () => instance.getCenterLeafColumns()
       ),
 
       setColumnVisibility: updater =>

package/src/types.ts

@@ -1,11 +1,5 @@
-import {
-  CoreColumn,
-  CoreColumnDef,
-  CoreOptions,
-  CoreRow,
-  CoreTableState,
-  TableCore,
-} from './core'
+import { CoreOptions, CoreTableState, TableCore } from './core'
+import { ColumnsOptions, CoreColumn, CoreColumnDef } from './features/Columns'
 import {
   VisibilityInstance,
   VisibilityTableState,
@@ -24,9 +18,11 @@ import {
   ColumnPinningColumnDef,
   ColumnPinningInstance,
   ColumnPinningOptions,
+  ColumnPinningPosition,
+  ColumnPinningRow,
   ColumnPinningTableState,
 } from './features/Pinning'
-import { HeadersInstance, HeadersRow } from './features/Headers'
+import { HeadersInstance } from './features/Headers'
 import {
   FiltersColumn,
   FiltersColumnDef,
@@ -56,7 +52,7 @@ import {
   ExpandedTableState,
   ExpandedRow,
 } from './features/Expanding'
-import { Overwrite, PartialKeys } from './utils'
+import { Overwrite } from './utils'
 import {
   ColumnSizingColumn,
   ColumnSizingColumnDef,
@@ -76,6 +72,12 @@ import {
   RowSelectionRow,
   RowSelectionTableState,
 } from './features/RowSelection'
+import { ColumnsInstance } from './features/Columns'
+import { CellsInstance, CellsRow } from './features/Cells'
+import { CoreRow, RowsInstance, RowsOptions } from './features/Rows'
+
+export type Updater<T> = T | ((old: T) => T)
+export type OnChangeFn<T> = (updaterOrValue: Updater<T>) => void
 
 export type TableGenerics = {
   Row?: any
@@ -96,15 +98,19 @@ export type UseRenderer<TGenerics extends TableGenerics> =
 export type TableFeature = {
   getDefaultOptions?: (instance: any) => any
   getInitialState?: () => any
-  getInstance?: (instance: any) => any
+  createInstance?: (instance: any) => any
   getDefaultColumn?: () => any
   createColumn?: (column: any, instance: any) => any
+  createHeader?: (column: any, instance: any) => any
   createCell?: (cell: any, column: any, row: any, instance: any) => any
   createRow?: (row: any, instance: any) => any
 }
 
 export type TableInstance<TGenerics extends TableGenerics> =
   TableCore<TGenerics> &
+    ColumnsInstance<TGenerics> &
+    RowsInstance<TGenerics> &
+    CellsInstance<TGenerics> &
     VisibilityInstance<TGenerics> &
     ColumnOrderInstance<TGenerics> &
     ColumnPinningInstance<TGenerics> &
@@ -117,9 +123,9 @@ export type TableInstance<TGenerics extends TableGenerics> =
     PaginationInstance<TGenerics> &
     RowSelectionInstance<TGenerics>
 
-//
-
 export type Options<TGenerics extends TableGenerics> = CoreOptions<TGenerics> &
+  ColumnsOptions<TGenerics> &
+  RowsOptions<TGenerics> &
   VisibilityOptions &
   ColumnOrderOptions &
   ColumnPinningOptions &
@@ -131,9 +137,6 @@ export type Options<TGenerics extends TableGenerics> = CoreOptions<TGenerics> &
   PaginationOptions<TGenerics> &
   RowSelectionOptions<TGenerics>
 
-export type Updater<T> = T | ((old: T) => T)
-export type OnChangeFn<T> = (updaterOrValue: Updater<T>) => void
-
 export type TableState = CoreTableState &
   VisibilityTableState &
   ColumnOrderTableState &
@@ -147,8 +150,9 @@ export type TableState = CoreTableState &
   RowSelectionTableState
 
 export type Row<TGenerics extends TableGenerics> = CoreRow<TGenerics> &
+  CellsRow<TGenerics> &
   VisibilityRow<TGenerics> &
-  HeadersRow<TGenerics> &
+  ColumnPinningRow<TGenerics> &
   GroupingRow &
   RowSelectionRow &
   ExpandedRow
@@ -165,25 +169,6 @@ export type RowModel<TGenerics extends TableGenerics> = {
 
 export type AccessorFn<TData> = (originalRow: TData, index: number) => any
 
-// export type UserColumnDef<TGenerics extends TableGenerics> = Overwrite<
-//   ColumnDef<TGenerics>,
-//   GeneratedProperties<false>
-// >
-
-// type _GeneratedProperties = {
-//   ['Column definitions should be generated with the table.createColumn() (and related) utilities']: false
-// }
-
-// export type GeneratedProperties<T> = T extends true
-//   ? {
-//       [TKey in keyof _GeneratedProperties]: true
-//     }
-//   : T extends false
-//   ? {
-//       [TKey in keyof _GeneratedProperties]?: false
-//     }
-// : never
-
 export type Renderable<TGenerics extends TableGenerics, TProps> =
   | string
   | ((props: TProps) => ReturnType<UseRenderer<TGenerics>>)
@@ -225,9 +210,12 @@ export type Header<TGenerics extends TableGenerics> = CoreHeader<TGenerics> &
 
 export type CoreHeader<TGenerics extends TableGenerics> = {
   id: string
+  index: number
   depth: number
   column: Column<TGenerics>
-  getWidth: () => number
+  getStart: () => number
+  getSize: () => number
+  headerGroup: HeaderGroup<TGenerics>
   subHeaders: Header<TGenerics>[]
   colSpan?: number
   rowSpan?: number

package/src/utils.ts

@@ -21,11 +21,9 @@ export type IfDefined<T, N> = 0 extends 1 & T ? N : T extends {} ? T : N
 //   DefinedGenericKeys<T>
 // >
 
-export type DataUpdateFunction<T> = (input: T) => T
-
 export function functionalUpdate<T>(updater: Updater<T>, input: T): T {
   return typeof updater === 'function'
-    ? (updater as DataUpdateFunction<T>)(input)
+    ? (updater as (input: T) => T)(input)
     : updater
 }