@tanstack/react-table 8.0.0-alpha.8 → 8.0.0-alpha.9

package/src/createTable.tsx

@@ -1,201 +1,124 @@
 import * as React from 'react'
-import { useSyncExternalStore } from 'use-sync-external-store/shim'
-import { Cell, Column, Row } from '.'
 import { createTableInstance } from './core'
+import { CustomFilterTypes } from './features/Filters'
+import { CustomAggregationTypes } from './features/Grouping'
+import { CustomSortingTypes } from './features/Sorting'
 import {
-  ReactTable,
+  TableInstance,
   ColumnDef,
   AccessorFn,
   Options,
-  Renderable,
-  Header,
+  DefaultGenerics,
+  PartialGenerics,
+  _NonGenerated,
 } from './types'
-import { Overwrite } from './utils'
+import { Overwrite, PartialKeys } from './utils'
 
-export type TableHelper<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
-> = {
-  RowType<TTData>(): TableHelper<
-    TTData,
-    TValue,
-    TFilterFns,
-    TSortingFns,
-    TAggregationFns
-  >
-
-  FilterFns: <TTFilterFns>(
-    filterFns: TTFilterFns
-  ) => TableHelper<TData, TValue, TTFilterFns, TSortingFns, TAggregationFns>
+export type CreatTableFactory<TGenerics extends Partial<DefaultGenerics>> = <
+  TRow
+>() => CreateTable<Overwrite<TGenerics, { Row: TRow }>>
 
-  SortingFns: <TTSortingFns>(
-    sortingFns: TTSortingFns
-  ) => TableHelper<TData, TValue, TFilterFns, TTSortingFns, TAggregationFns>
-
-  AggregationFns: <TTAggregationFns>(
-    aggregationFns: TTAggregationFns
-  ) => TableHelper<TData, TValue, TFilterFns, TSortingFns, TTAggregationFns>
+export type CreateTableOptions<
+  TFilterFns extends CustomFilterTypes<any>,
+  TSortingFns extends CustomSortingTypes<any>,
+  TAggregationFns extends CustomAggregationTypes<any>
+> = {
+  filterFns?: TFilterFns
+  sortingFns?: TSortingFns
+  aggregationFns?: TAggregationFns
+}
 
-  createColumns: (
-    columns: ColumnDef<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >[]
-  ) => ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[]
+export function createTableFactory<
+  TFilterFns extends CustomFilterTypes<any>,
+  TSortingFns extends CustomSortingTypes<any>,
+  TAggregationFns extends CustomAggregationTypes<any>
+>(
+  opts: CreateTableOptions<TFilterFns, TSortingFns, TAggregationFns>
+): CreatTableFactory<
+  Overwrite<
+    PartialGenerics,
+    {
+      FilterFns: TFilterFns
+      SortingFns: TSortingFns
+      AggregationFns: TAggregationFns
+    }
+  >
+> {
+  return () => _createTable(undefined, undefined, opts)
+}
 
+export type CreateTable<TGenerics extends Partial<DefaultGenerics>> = {
+  createColumns: (columns: ColumnDef<TGenerics>[]) => ColumnDef<TGenerics>[]
   createGroup: (
     column: Overwrite<
-      ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>,
-      | {
-          __generated?: never
-          accessorFn?: never
-          accessorKey?: never
-          header: string
-          id?: string
-        }
-      | {
-          __generated?: never
-          accessorFn?: never
-          accessorKey?: never
-          id: string
-          header?:
-            | string
-            | Renderable<{
-                instance: ReactTable<
-                  TData,
-                  TValue,
-                  TFilterFns,
-                  TSortingFns,
-                  TAggregationFns
-                >
-                header: Header<
-                  TData,
-                  TValue,
-                  TFilterFns,
-                  TSortingFns,
-                  TAggregationFns
-                >
-                column: Column<
-                  TData,
-                  TValue,
-                  TFilterFns,
-                  TSortingFns,
-                  TAggregationFns
-                >
-              }>
-        }
-    >
-  ) => ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>
-
-  createDisplayColumn: (
-    column: Overwrite<
-      ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>,
-      { __generated?: never; accessorFn?: never; accessorKey?: never }
-    >
-  ) => ColumnDef<TData, unknown, TFilterFns, TSortingFns, TAggregationFns>
-
-  createDataColumn: <TAccessor extends AccessorFn<TData> | keyof TData>(
-    accessor: TAccessor,
-    column: TAccessor extends (...args: any[]) => any
-      ? // Accessor Fn
-        Overwrite<
-          ColumnDef<
-            TData,
-            ReturnType<TAccessor>,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
+      | Overwrite<
+          _NonGenerated<ColumnDef<TGenerics>>,
           {
-            __generated?: never
-            accessorFn?: never
-            accessorKey?: never
-            id: string
+            header: string
+            id?: string
           }
         >
-      : TAccessor extends keyof TData
-      ? // Accessor Key
-        Overwrite<
-          ColumnDef<
-            TData,
-            TData[TAccessor],
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
+      | Overwrite<
+          _NonGenerated<ColumnDef<TGenerics>>,
           {
-            __generated?: never
-            accessorFn?: never
-            accessorKey?: never
-            id?: string
+            id: string
+            header?: string | ColumnDef<TGenerics>['header']
           }
-        >
-      : never
-  ) => ColumnDef<
-    TData,
-    TAccessor extends (...args: any[]) => any
-      ? ReturnType<TAccessor>
-      : TAccessor extends keyof TData
-      ? TData[TAccessor]
-      : never,
-    TFilterFns,
-    TSortingFns,
-    TAggregationFns
-  >
-
-  useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
-    options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-  ) => ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-
-  types: {
-    instance: ReactTable<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
+        >,
+      { accessorFn?: never; accessorKey?: never }
     >
-    columnDef: ColumnDef<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
+  ) => ColumnDef<TGenerics>
+  createDisplayColumn: (
+    column: PartialKeys<
+      _NonGenerated<ColumnDef<TGenerics>>,
+      'accessorFn' | 'accessorKey'
     >
-    column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-    row: Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-    cell: Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-  }
+  ) => ColumnDef<TGenerics>
+  createDataColumn: <
+    TAccessor extends AccessorFn<TGenerics['Row']> | keyof TGenerics['Row']
+  >(
+    accessor: TAccessor,
+    column: Overwrite<
+      TAccessor extends (...args: any[]) => any
+        ? // Accessor Fn
+          _NonGenerated<ColumnDef<TGenerics>>
+        : TAccessor extends keyof TGenerics['Row']
+        ? // Accessor Key
+          Overwrite<
+            _NonGenerated<ColumnDef<TGenerics>>,
+            {
+              id?: string
+            }
+          >
+        : never,
+      {
+        accessorFn?: never
+        accessorKey?: never
+      }
+    >
+  ) => ColumnDef<TGenerics>
+  useTable: (
+    options: PartialKeys<
+      Omit<Options<TGenerics>, keyof CreateTableOptions<any, any, any>>,
+      'state' | 'onStateChange'
+    >
+  ) => TableInstance<TGenerics>
+}
+
+export function createTable<TRow>() {
+  return _createTable<Overwrite<PartialGenerics, { Row: TRow }>>()
 }
 
-export function createTable<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
->(): TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+function _createTable<TGenerics extends PartialGenerics>(
+  _?: undefined,
+  __?: undefined,
+  opts?: CreateTableOptions<any, any, any>
+): CreateTable<TGenerics> {
   return {
-    RowType: () => createTable(),
-    FilterFns: () => createTable(),
-    SortingFns: () => createTable(),
-    AggregationFns: () => createTable(),
     createColumns: columns => columns,
-    createDisplayColumn: column => ({
-      ...column,
-      __generated: true,
-    }),
-    createGroup: column => ({
-      ...column,
-      __generated: true,
-    }),
-    createDataColumn: (accessor, column) => {
+    createDisplayColumn: column => column as any,
+    createGroup: column => column as any,
+    createDataColumn: (accessor, column): any => {
       column = {
         ...column,
         id: column.id,
@@ -206,7 +129,6 @@ export function createTable<
           ...column,
           id: column.id ?? accessor,
           accessorKey: accessor,
-          __generated: true,
         }
       }
 
@@ -214,31 +136,51 @@ export function createTable<
         return {
           ...column,
           accessorFn: accessor,
-          __generated: true,
         }
       }
 
       throw new Error('Invalid accessor')
     },
-    useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
-      options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-    ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
+    useTable: (
+      options: PartialKeys<
+        Omit<Options<TGenerics>, keyof CreateTableOptions<any, any, any>>,
+        'state' | 'onStateChange'
+      >
+    ): TableInstance<TGenerics> => {
+      // Compose in the generic options to the user options
+      const resolvedOptions = {
+        ...(opts ?? {}),
+        state: {}, // Dummy state
+        onStateChange: () => {}, // noop
+        ...options,
+      }
+
+      // Create a new table instance and store it in state
       const [instance] = React.useState(() =>
-        createTableInstance<
-          TData,
-          TValue,
-          TFilterFns,
-          TSortingFns,
-          TAggregationFns
-        >(options)
+        createTableInstance<TGenerics>(resolvedOptions)
       )
 
-      useSyncExternalStore(instance.subscribe, () => instance.internalState)
-
-      instance.updateOptions(options)
+      // By default, manage table state here using the instance's initial state
+      const [state, setState] = React.useState(() => instance.initialState)
+
+      // Compose the default state above with any user state. This will allow the user
+      // to only control a subset of the state if desired.
+      instance.setOptions(prev => ({
+        ...prev,
+        ...options,
+        state: {
+          ...state,
+          ...options.state,
+        },
+        // Similarly, we'll maintain both our internal state and any user-provided
+        // state.
+        onStateChange: updater => {
+          setState(updater)
+          options.onStateChange?.(updater)
+        },
+      }))
 
       return instance
     },
-    types: undefined as any,
-  } as TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+  }
 }

package/src/features/ColumnSizing.ts

@@ -1,8 +1,5 @@
-import React, {
-  ComponentProps,
+import {
   MouseEvent as ReactMouseEvent,
-  PropsWithoutRef,
-  PropsWithRef,
   TouchEvent as ReactTouchEvent,
 } from 'react'
 import {
@@ -10,8 +7,9 @@ import {
   Getter,
   Header,
   OnChangeFn,
+  PartialGenerics,
   PropGetterValue,
-  ReactTable,
+  TableInstance,
   Updater,
 } from '../types'
 import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
@@ -57,13 +55,7 @@ export type ColumnResizerProps = {
   role?: string
 }
 
-export type ColumnSizingInstance<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
-> = {
+export type ColumnSizingInstance<TGenerics extends PartialGenerics> = {
   setColumnSizing: (updater: Updater<ColumnSizing>) => void
   setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
   resetColumnSizing: () => void
@@ -72,8 +64,8 @@ export type ColumnSizingInstance<
   resetHeaderSizeInfo: () => void
   getColumnCanResize: (columnId: string) => boolean
   getHeaderCanResize: (headerId: string) => boolean
-  getColumnResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
-    columnId: string,
+  getHeaderResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
+    headerId: string,
     userProps?: TGetter
   ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
   getColumnIsResizing: (columnId: string) => boolean
@@ -85,13 +77,13 @@ export type ColumnSizingColumnDef = {
   defaultCanResize?: boolean
 }
 
-export type ColumnSizingColumn<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
-> = {
+export type ColumnSizingColumn<TGenerics extends PartialGenerics> = {
+  getCanResize: () => boolean
+  getIsResizing: () => boolean
+  resetSize: () => void
+}
+
+export type ColumnSizingHeader<TGenerics extends PartialGenerics> = {
   getCanResize: () => boolean
   getIsResizing: () => boolean
   getResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
@@ -122,14 +114,8 @@ export function getInitialState(): ColumnSizingTableState {
   }
 }
 
-export function getDefaultOptions<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
->(
-  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+export function getDefaultOptions<TGenerics extends PartialGenerics>(
+  instance: TableInstance<TGenerics>
 ): ColumnSizingDefaultOptions {
   return {
     columnResizeMode: 'onEnd',
@@ -138,21 +124,9 @@ export function getDefaultOptions<
   }
 }
 
-export function getInstance<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
->(
-  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-): ColumnSizingInstance<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
-> {
+export function getInstance<TGenerics extends PartialGenerics>(
+  instance: TableInstance<TGenerics>
+): ColumnSizingInstance<TGenerics> {
   return {
     setColumnSizing: updater =>
       instance.options.onColumnSizingChange?.(
@@ -178,10 +152,6 @@ export function getInstance<
     resetHeaderSize: headerId => {
       const header = instance.getHeader(headerId)
 
-      if (!header) {
-        return
-      }
-
       return instance.resetColumnSize(header.column.id)
     },
     getHeaderCanResize: headerId => {
@@ -225,19 +195,11 @@ export function getInstance<
 
       return instance.getColumnIsResizing(header.column.id)
     },
-    getColumnResizerProps: (headerId, userProps) => {
-      const header = instance.getHeader(headerId)
-
-      if (!header) {
-        return
-      }
 
+    getHeaderResizerProps: (headerId, userProps) => {
+      const header = instance.getHeader(headerId)
       const column = instance.getColumn(header.column.id)
 
-      if (!column) {
-        return
-      }
-
       const canResize = column.getCanResize()
 
       const onResizeStart = (e: ReactMouseEvent | ReactTouchEvent) => {
@@ -248,9 +210,13 @@ export function getInstance<
           }
         }
 
+        const header = headerId ? instance.getHeader(headerId) : undefined
+
+        const startSize = header ? header.getWidth() : column.getWidth()
+
         const columnSizingStart: [string, number][] = header
-          .getLeafHeaders()
-          .map(d => [d.column.id, d.getWidth()])
+          ? header.getLeafHeaders().map(d => [d.column.id, d.getWidth()])
+          : [[column.id, column.getWidth()]]
 
         const clientX = isTouchStartEvent(e)
           ? Math.round(e.touches[0].clientX)
@@ -274,10 +240,10 @@ export function getInstance<
             )
 
             old.columnSizingStart.forEach(([columnId, headerWidth]) => {
-              newColumnSizing[columnId] = Math.max(
-                headerWidth + headerWidth * deltaPercentage,
-                0
-              )
+              newColumnSizing[columnId] =
+                Math.round(
+                  Math.max(headerWidth + headerWidth * deltaPercentage, 0) * 100
+                ) / 100
             })
 
             return {
@@ -374,11 +340,11 @@ export function getInstance<
         instance.setColumnSizingInfo(old => ({
           ...old,
           startOffset: clientX,
-          startSize: header.getWidth(),
+          startSize,
           deltaOffset: 0,
           deltaPercentage: 0,
           columnSizingStart,
-          isResizingColumn: header.column.id,
+          isResizingColumn: column.id,
         }))
       }
 
@@ -403,22 +369,27 @@ export function getInstance<
   }
 }
 
-export function createColumn<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
->(
-  column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-): ColumnSizingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+export function createColumn<TGenerics extends PartialGenerics>(
+  column: Column<TGenerics>,
+  instance: TableInstance<TGenerics>
+): ColumnSizingColumn<TGenerics> {
   return {
     getIsResizing: () => instance.getColumnIsResizing(column.id),
     getCanResize: () => instance.getColumnCanResize(column.id),
     resetSize: () => instance.resetColumnSize(column.id),
+  }
+}
+
+export function createHeader<TGenerics extends PartialGenerics>(
+  header: Header<TGenerics>,
+  instance: TableInstance<TGenerics>
+): ColumnSizingHeader<TGenerics> {
+  return {
+    getIsResizing: () => instance.getColumnIsResizing(header.column.id),
+    getCanResize: () => instance.getColumnCanResize(header.column.id),
+    resetSize: () => instance.resetColumnSize(header.column.id),
     getResizerProps: userProps =>
-      instance.getColumnResizerProps(column.id, userProps),
+      instance.getHeaderResizerProps(header.id, userProps),
   }
 }