@tanstack/react-table 8.0.0-alpha.1 → 8.0.0-alpha.4

package/src/features/Sorting.ts

@@ -1,10 +1,11 @@
 import { MouseEvent, TouchEvent } from 'react'
 import { RowModel } from '..'
-import { BuiltInSortType, sortTypes } from '../sortTypes'
+import { BuiltInSortType, reSplitAlphaNumeric, sortTypes } from '../sortTypes'
 
 import {
   Column,
   Getter,
+  Header,
   OnChangeFn,
   PropGetterValue,
   ReactTable,
@@ -20,6 +21,8 @@ import {
   propGetter,
 } from '../utils'
 
+export type SortDirection = 'asc' | 'desc'
+
 export type ColumnSort = {
   id: string
   desc: boolean
@@ -67,7 +70,7 @@ export type SortingColumn<
   getCanSort: () => boolean
   getCanMultiSort: () => boolean
   getSortIndex: () => number
-  getIsSorted: () => false | 'asc' | 'desc'
+  getIsSorted: () => false | SortDirection
   toggleSorting: (desc?: boolean, isMulti?: boolean) => void
   getToggleSortingProps: <TGetter extends Getter<ToggleSortingProps>>(
     userProps?: TGetter
@@ -97,14 +100,7 @@ export type SortingOptions<
       TSortingFns,
       TAggregationFns
     >,
-    sortingState: SortingState,
-    globalFilteredRowModel: RowModel<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >
+    rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   ) => RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   maxMultiSortColCount?: number
   isMultiSortEvent?: (e: MouseEvent | TouchEvent) => boolean
@@ -122,9 +118,11 @@ export type SortingInstance<
   TSortingFns,
   TAggregationFns
 > = {
+  _notifySortingReset: () => void
   getColumnAutoSortingFn: (
     columnId: string
   ) => SortingFn<any, any, any, any, any> | undefined
+  getColumnAutoSortDir: (columnId: string) => SortDirection
 
   getColumnSortingFn: (
     columnId: string
@@ -216,6 +214,9 @@ export function getDefaultOptions<
   return {
     onSortingChange: makeStateUpdater('sorting', instance),
     autoResetSorting: true,
+    isMultiSortEvent: (e: MouseEvent | TouchEvent) => {
+      return e.shiftKey
+    },
   }
 }
 
@@ -251,22 +252,64 @@ export function getInstance<
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 ): SortingInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  let registered = false
+
   return {
+    _notifySortingReset: () => {
+      if (!registered) {
+        registered = true
+        return
+      }
+
+      if (instance.options.autoResetAll === false) {
+        return
+      }
+
+      if (
+        instance.options.autoResetAll === true ||
+        instance.options.autoResetSorting
+      ) {
+        instance.resetSorting()
+      }
+    },
     getColumnAutoSortingFn: columnId => {
-      const firstRow = instance.getGlobalFilteredRowModel().flatRows[0]
+      const firstRows = instance.getGlobalFilteredRowModel().flatRows.slice(100)
 
-      const value = firstRow?.values[columnId]
+      let isString = false
 
-      if (typeof value === 'string') {
-        return sortTypes.alphanumeric
+      for (const row of firstRows) {
+        const value = row?.values[columnId]
+
+        if (Object.prototype.toString.call(value) === '[object Date]') {
+          return sortTypes.datetime
+        }
+
+        if (typeof value === 'string') {
+          isString = true
+
+          if (value.split(reSplitAlphaNumeric).length > 1) {
+            return sortTypes.alphanumeric
+          }
+        }
       }
 
-      if (Object.prototype.toString.call(value) === '[object Date]') {
-        return sortTypes.datetime
+      if (isString) {
+        return sortTypes.text
       }
 
       return sortTypes.basic
     },
+    getColumnAutoSortDir: columnId => {
+      const firstRow = instance.getGlobalFilteredRowModel().flatRows[0]
+
+      const value = firstRow?.values[columnId]
+
+      if (typeof value === 'string') {
+        return 'asc'
+      }
+
+      return 'desc'
+    },
     getColumnSortingFn: columnId => {
       const column = instance.getColumn(columnId)
       const userSortTypes = instance.options.sortTypes
@@ -278,7 +321,7 @@ export function getInstance<
       return isFunction(column.sortType)
         ? column.sortType
         : column.sortType === 'auto'
-        ? instance.getColumnAutoFilterFn(columnId)
+        ? instance.getColumnAutoSortingFn(columnId)
         : (userSortTypes as Record<string, any>)?.[column.sortType as string] ??
           (sortTypes[column.sortType as BuiltInSortType] as SortingFn<
             TData,
@@ -302,6 +345,15 @@ export function getInstance<
         throw new Error()
       }
 
+      // if (column.columns.length) {
+      //   column.columns.forEach((c, i) => {
+      //     if (c.id) {
+      //       instance.toggleColumnSorting(c.id, undefined, multi || !!i)
+      //     }
+      //   })
+      //   return
+      // }
+
       instance.setSorting(old => {
         // Find any existing sorting for this column
         const existingSorting = old?.find(d => d.id === columnId)
@@ -313,7 +365,7 @@ export function getInstance<
         // What should we do with this sort action?
         let sortAction
 
-        if (!column.getCanMultiSort() && multi) {
+        if (column.getCanMultiSort() && multi) {
           if (existingSorting) {
             sortAction = 'toggle'
           } else {
@@ -331,7 +383,9 @@ export function getInstance<
         }
 
         const sortDescFirst =
-          column.sortDescFirst ?? instance.options.sortDescFirst
+          column.sortDescFirst ??
+          instance.options.sortDescFirst ??
+          instance.getColumnAutoSortDir(columnId) === 'desc'
 
         // Handle toggle states that will remove the sorting
         if (
@@ -398,6 +452,9 @@ export function getInstance<
         instance.options.enableSorting ??
         column.defaultCanSort ??
         !!column.accessorFn
+        // (!!column.accessorFn ||
+        //   column.columns?.some(c => c.id && instance.getColumnCanSort(c.id))) ??
+        // false
       )
     },
 
@@ -471,10 +528,13 @@ export function getInstance<
         if (process.env.NODE_ENV !== 'production' && instance.options.debug)
           console.info('Sorting...')
 
-        return sortingFn(instance, sorting, rowModel)
+        return sortingFn(instance, rowModel)
       },
-      'getSortedRowModel',
-      instance.options.debug
+      {
+        key: 'getSortedRowModel',
+        debug: instance.options.debug,
+        onChange: () => instance._notifyGroupingReset(),
+      }
     ),
 
     getPreSortedRows: () => instance.getGlobalFilteredRowModel().rows,

package/src/features/Visibility.ts

@@ -172,8 +172,7 @@ export function getInstance<
       allFlatColumns => {
         return allFlatColumns.filter(d => d.getIsVisible?.())
       },
-      'getVisibleFlatColumns',
-      instance.options.debug
+      { key: 'getVisibleFlatColumns', debug: instance.options.debug }
     ),
 
     getVisibleLeafColumns: memo(
@@ -188,8 +187,7 @@ export function getInstance<
       allFlatColumns => {
         return allFlatColumns.filter(d => d.getIsVisible?.())
       },
-      'getVisibleLeafColumns',
-      instance.options.debug
+      { key: 'getVisibleLeafColumns', debug: instance.options.debug }
     ),
 
     setColumnVisibility: updater =>

package/src/index.tsx

@@ -4,4 +4,5 @@ export * from './utils/globalFilterRowsFn'
 export * from './utils/sortRowsFn'
 export * from './utils/groupRowsFn'
 export * from './utils/expandRowsFn'
+export * from './utils/paginateRowsFn'
 export { createTable } from './createTable'

package/src/sortTypes.ts

@@ -1,6 +1,6 @@
 import { Row } from './types'
 
-const reSplitAlphaNumeric = /([0-9]+)/gm
+export const reSplitAlphaNumeric = /([0-9]+)/gm
 
 export const sortTypes = {
   alphanumeric,

package/src/types.ts

@@ -1,5 +1,4 @@
 import React from 'react'
-// import * as TS from 'ts-toolbelt'
 import {
   CoreColumn,
   CoreColumnDef,
@@ -56,6 +55,24 @@ import {
   ExpandedTableState,
 } from './features/Expanding'
 import { Overwrite } from './utils'
+import {
+  ColumnSizingColumn,
+  ColumnSizingColumnDef,
+  ColumnSizingInstance,
+  ColumnSizingOptions,
+  ColumnSizingTableState,
+} from './features/ColumnSizing'
+import {
+  PaginationInstance,
+  PaginationOptions,
+  PaginationTableState,
+} from './features/Pagination'
+import {
+  RowSelectionInstance,
+  RowSelectionOptions,
+  RowSelectionRow,
+  RowSelectionTableState,
+} from './features/RowSelection'
 
 // declare global {
 //   const process.env.NODE_ENV !== 'production': boolean
@@ -81,7 +98,16 @@ export type ReactTable<
   FiltersInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
   SortingInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
   GroupingInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
-  ExpandedInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+  ColumnSizingInstance<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  > &
+  ExpandedInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+  PaginationInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+  RowSelectionInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 
 export type Renderable<TProps> =
   | React.ReactNode
@@ -98,9 +124,12 @@ export type Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
     FiltersOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     SortingOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     GroupingOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
-    ExpandedOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+    ExpandedOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+    ColumnSizingOptions &
+    PaginationOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+    RowSelectionOptions<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 
-export type Updater<T> = T | ((old?: T) => T)
+export type Updater<T> = T | ((old: T) => T)
 export type OnChangeFn<T> = (updaterOrValue: Updater<T>, value: T) => void
 
 export type TableState = VisibilityTableState &
@@ -109,13 +138,17 @@ export type TableState = VisibilityTableState &
   FiltersTableState &
   SortingTableState &
   ExpandedTableState &
-  GroupingTableState
+  GroupingTableState &
+  ColumnSizingTableState &
+  PaginationTableState &
+  RowSelectionTableState
 
 export type Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
   CoreRow<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     VisibilityRow<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     HeadersRow<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
-    GroupingRow
+    GroupingRow &
+    RowSelectionRow
 
 export type RowValues = {
   [key: string]: any
@@ -139,7 +172,8 @@ export type ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
     ColumnPinningColumnDef &
     FiltersColumnDef<TFilterFns> &
     SortingColumnDef<TSortingFns> &
-    GroupingColumnDef<TAggregationFns>
+    GroupingColumnDef<TAggregationFns> &
+    ColumnSizingColumnDef
 
 export type Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
   ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
@@ -148,7 +182,8 @@ export type Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
     ColumnPinningColumn &
     FiltersColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
     SortingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
-    GroupingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+    GroupingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> &
+    ColumnSizingColumn<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 
 export type Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
   id: string
@@ -161,7 +196,16 @@ export type Cell<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
   renderCell: () => React.ReactNode
 }
 
-export type Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
+export type Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
+  CoreHeader<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+
+export type CoreHeader<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
   id: string
   depth: number
   column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
@@ -263,6 +307,8 @@ export type CellProps = {
   role: string
 }
 
+export type Listener<TArgs extends [...any]> = (...args: [...TArgs]) => void
+
 //
 
 export type PropGetter<TBase> = <TGetter extends Getter<TBase>>(

package/src/utils/columnFilterRowsFn.ts

@@ -1,14 +1,6 @@
 import { ReactTable, Row, RowModel } from '../types'
-import { ColumnFiltersState } from '../features/Filters'
-import { Options } from '..'
-
-export const columnFilterRowsFn: Options<
-  any,
-  any,
-  {},
-  {},
-  {}
->['columnFilterRowsFn'] = <
+
+export function columnFilterRowsFn<
   TData,
   TValue,
   TFilterFns,
@@ -16,9 +8,10 @@ export const columnFilterRowsFn: Options<
   TAggregationFns
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  columnFilters: ColumnFiltersState,
   rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
+): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  const columnFilters = instance.getState().columnFilters
+
   const newFilteredFlatRows: Row<
     TData,
     TValue,

package/src/utils/expandRowsFn.ts

@@ -1,8 +1,6 @@
 import { ReactTable, Row, RowModel } from '../types'
-import { Options } from '../types'
-import { ExpandedState } from '../features/Expanding'
 
-export const expandRowsFn: Options<any, any, {}, {}, {}>['expandRowsFn'] = <
+export function expandRowsFn<
   TData,
   TValue,
   TFilterFns,
@@ -10,7 +8,6 @@ export const expandRowsFn: Options<any, any, {}, {}, {}>['expandRowsFn'] = <
   TAggregationFns
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  _expandedState: ExpandedState,
   sortedRowModel: RowModel<
     TData,
     TValue,
@@ -18,7 +15,7 @@ export const expandRowsFn: Options<any, any, {}, {}, {}>['expandRowsFn'] = <
     TSortingFns,
     TAggregationFns
   >
-): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
+): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
   const expandedRows: Row<
     TData,
     TValue,

package/src/utils/globalFilterRowsFn.ts

@@ -1,13 +1,6 @@
-import { Options } from '..'
 import { ReactTable, Row, RowModel } from '../types'
 
-export const globalFilterRowsFn: Options<
-  any,
-  any,
-  {},
-  {},
-  {}
->['globalFilterRowsFn'] = <
+export function globalFilterRowsFn<
   TData,
   TValue,
   TFilterFns,
@@ -15,9 +8,9 @@ export const globalFilterRowsFn: Options<
   TAggregationFns
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  globalFilter: any,
   rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
+): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  const globalFilter = instance.getState().globalFilter
   const newFilteredFlatRows: Row<
     TData,
     TValue,

package/src/utils/groupRowsFn.ts

@@ -1,9 +1,7 @@
 import { ReactTable, Row, RowModel } from '../types'
-import { Options } from '../types'
-import { GroupingState } from '../features/Grouping'
 import { flattenBy } from '../utils'
 
-export const groupRowsFn: Options<any, any, {}, {}, {}>['groupRowsFn'] = <
+export function groupRowsFn<
   TData,
   TValue,
   TFilterFns,
@@ -11,7 +9,6 @@ export const groupRowsFn: Options<any, any, {}, {}, {}>['groupRowsFn'] = <
   TAggregationFns
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  groupingState: GroupingState,
   sortedRowModel: RowModel<
     TData,
     TValue,
@@ -19,7 +16,8 @@ export const groupRowsFn: Options<any, any, {}, {}, {}>['groupRowsFn'] = <
     TSortingFns,
     TAggregationFns
   >
-): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
+): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  const groupingState = instance.getState().grouping
   // Filter the grouping list down to columns that exist
   const existingGrouping = groupingState.filter(columnId =>
     instance.getColumn(columnId)

package/src/utils/paginateRowsFn.ts

@@ -0,0 +1,34 @@
+import { ReactTable, RowModel } from '../types'
+import { expandRowsFn } from './expandRowsFn'
+
+export function paginateRowsFn<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
+  rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  const { pageSize, pageIndex } = instance.getState().pagination
+  let { rows, flatRows, rowsById } = rowModel
+  const pageStart = pageSize * pageIndex
+  const pageEnd = pageStart + pageSize
+
+  rows = rows.slice(pageStart, pageEnd)
+
+  if (!instance.options.paginateExpandedRows) {
+    return expandRowsFn(instance, {
+      rows,
+      flatRows,
+      rowsById,
+    })
+  }
+
+  return {
+    rows,
+    flatRows,
+    rowsById,
+  }
+}

package/src/utils/sortRowsFn.ts

@@ -1,8 +1,7 @@
 import { ReactTable, Row, RowModel } from '../types'
-import { SortingFn, SortingState } from '../features/Sorting'
-import { Options } from '../types'
+import { SortingFn } from '../features/Sorting'
 
-export const sortRowsFn: Options<any, any, {}, {}, {}>['sortRowsFn'] = <
+export function sortRowsFn<
   TData,
   TValue,
   TFilterFns,
@@ -10,9 +9,10 @@ export const sortRowsFn: Options<any, any, {}, {}, {}>['sortRowsFn'] = <
   TAggregationFns
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  sortingState: SortingState,
   rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
+): RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  const sortingState = instance.getState().sorting
+
   const sortedFlatRows: Row<
     TData,
     TValue,

package/src/utils.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Getter, NoInfer, PropGetterValue, Renderable } from './types'
+import {
+  Getter,
+  NoInfer,
+  PropGetterValue,
+  Renderable,
+  TableState,
+} from './types'
 
 export type IsAny<T> = 0 extends 1 & T ? true : false
 export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
@@ -26,7 +32,7 @@ export function noop() {
   //
 }
 
-export function makeStateUpdater(key: string, instance: unknown) {
+export function makeStateUpdater(key: keyof TableState, instance: unknown) {
   return (updater: Updater<any, any>) => {
     ;(instance as any).setState(<TTableState,>(old: TTableState) => {
       return {
@@ -107,8 +113,11 @@ export const propGetter: PropGetterImpl = (initial, getter) => {
 export function memo<TDeps extends readonly any[], TResult>(
   getDeps: () => [...TDeps],
   fn: (...args: NoInfer<[...TDeps]>) => TResult,
-  key?: string,
-  debug?: boolean
+  opts: {
+    key: string
+    debug?: boolean
+    onChange?: (result: TResult, previousResult?: TResult) => void
+  }
 ): () => TResult {
   let deps: any[] = []
   let result: TResult | undefined
@@ -125,8 +134,8 @@ export function memo<TDeps extends readonly any[], TResult>(
       )
 
     if (depsChanged) {
-      if (debug) {
-        console.info(key, {
+      if (opts?.debug) {
+        console.info(opts?.key, {
           length: `${oldSerializedDeps.length} -> ${newSerializedDeps.length}`,
           ...newSerializedDeps
             .map((_, index) => {
@@ -151,8 +160,13 @@ export function memo<TDeps extends readonly any[], TResult>(
           parent,
         })
       }
+
+      let oldResult = result
       result = fn(...newDeps)
       deps = newSerializedDeps
+      opts?.onChange?.(result, oldResult)
+
+      oldResult = undefined
     }
 
     return result!