@tanstack/react-table 8.0.0-alpha.2 → 8.0.0-alpha.3

package/src/createTable.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react'
 import { Cell, Column, Row } from '.'
 import { createTableInstance } from './core'
-import { ReactTable, ColumnDef, AccessorFn, Options } from './types'
+import {
+  ReactTable,
+  ColumnDef,
+  AccessorFn,
+  Options,
+  Renderable,
+  Header,
+} from './types'
 import { Overwrite } from './utils'
 
 type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
@@ -36,13 +43,57 @@ type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
   ) => ColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[]
 
   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>
 
-  createColumn: <TAccessor extends AccessorFn<TData> | keyof TData>(
+  createDataColumn: <TAccessor extends AccessorFn<TData> | keyof TData>(
     accessor: TAccessor,
     column: TAccessor extends (...args: any[]) => any
       ? // Accessor Fn
@@ -71,7 +122,12 @@ type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
             TSortingFns,
             TAggregationFns
           >,
-          { __generated?: never; accessorFn?: never; accessorKey?: never }
+          {
+            __generated?: never
+            accessorFn?: never
+            accessorKey?: never
+            id?: string
+          }
         >
       : never
   ) => ColumnDef<
@@ -124,7 +180,15 @@ export function createTable<
     SortingFns: () => createTable(),
     AggregationFns: () => createTable(),
     createColumns: columns => columns,
-    createColumn: (accessor, column) => {
+    createDisplayColumn: column => ({
+      ...column,
+      __generated: true,
+    }),
+    createGroup: column => ({
+      ...column,
+      __generated: true,
+    }),
+    createDataColumn: (accessor, column) => {
       column = {
         ...column,
         id: column.id,
@@ -149,10 +213,6 @@ export function createTable<
 
       throw new Error('Invalid accessor')
     },
-    createGroup: column => ({
-      ...column,
-      __generated: true,
-    }),
     useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
       options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {

package/src/features/ColumnSizing.ts

@@ -49,7 +49,7 @@ export type ColumnSizingDefaultOptions = {
   onColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState>
 }
 
-export type HeaderResizerProps = {
+export type ColumnResizerProps = {
   title?: string
   onMouseDown?: (e: ReactMouseEvent) => void
   onTouchStart?: (e: ReactTouchEvent) => void
@@ -72,10 +72,10 @@ export type ColumnSizingInstance<
   resetHeaderSizeInfo: () => void
   getColumnCanResize: (columnId: string) => boolean
   getHeaderCanResize: (headerId: string) => boolean
-  getHeaderResizerProps: <TGetter extends Getter<HeaderResizerProps>>(
+  getColumnResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
     columnId: string,
     userProps?: TGetter
-  ) => undefined | PropGetterValue<HeaderResizerProps, TGetter>
+  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
   getColumnIsResizing: (columnId: string) => boolean
   getHeaderIsResizing: (headerId: string) => boolean
 }
@@ -94,21 +94,9 @@ export type ColumnSizingColumn<
 > = {
   getCanResize: () => boolean
   getIsResizing: () => boolean
-  resetSize: () => void
-}
-
-export type ColumnSizingHeader<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
-> = {
-  getCanResize: () => boolean
-  getIsResizing: () => boolean
-  getResizerProps: <TGetter extends Getter<HeaderResizerProps>>(
+  getResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
     userProps?: TGetter
-  ) => undefined | PropGetterValue<HeaderResizerProps, TGetter>
+  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
   resetSize: () => void
 }
 
@@ -237,7 +225,7 @@ export function getInstance<
 
       return instance.getColumnIsResizing(header.column.id)
     },
-    getHeaderResizerProps: (headerId, userProps) => {
+    getColumnResizerProps: (headerId, userProps) => {
       const header = instance.getHeader(headerId)
 
       if (!header) {
@@ -394,7 +382,7 @@ export function getInstance<
         }))
       }
 
-      const initialProps: HeaderResizerProps = canResize
+      const initialProps: ColumnResizerProps = canResize
         ? {
             title: 'Toggle Grouping',
             draggable: false,
@@ -429,25 +417,8 @@ export function createColumn<
     getIsResizing: () => instance.getColumnIsResizing(column.id),
     getCanResize: () => instance.getColumnCanResize(column.id),
     resetSize: () => instance.resetColumnSize(column.id),
-  }
-}
-
-export function createHeader<
-  TData,
-  TValue,
-  TFilterFns,
-  TSortingFns,
-  TAggregationFns
->(
-  header: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-): ColumnSizingHeader<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
-  return {
-    getIsResizing: () => instance.getHeaderIsResizing(header.id),
-    getCanResize: () => instance.getHeaderCanResize(header.id),
     getResizerProps: userProps =>
-      instance.getHeaderResizerProps(header.id, userProps),
-    resetSize: () => instance.resetHeaderSize(header.id),
+      instance.getColumnResizerProps(column.id, userProps),
   }
 }
 

package/src/features/Expanding.ts

@@ -43,14 +43,7 @@ export type ExpandedOptions<
       TSortingFns,
       TAggregationFns
     >,
-    expandedState: ExpandedState,
-    groupedRowModel: RowModel<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >
+    rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   ) => RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   expandSubRows?: boolean
   defaultCanExpand?: boolean
@@ -75,6 +68,7 @@ export type ExpandedInstance<
   TSortingFns,
   TAggregationFns
 > = {
+  _notifyExpandedReset: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
   toggleRowExpanded: (rowId: string, expanded?: boolean) => void
   toggleAllRowsExpanded: (expanded?: boolean) => void
@@ -170,7 +164,26 @@ export function getInstance<
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 ): ExpandedInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  let registered = false
+
   return {
+    _notifyExpandedReset: () => {
+      if (!registered) {
+        registered = true
+        return
+      }
+
+      if (instance.options.autoResetAll === false) {
+        return
+      }
+
+      if (
+        instance.options.autoResetAll === true ||
+        instance.options.autoResetExpanded
+      ) {
+        instance.resetExpanded()
+      }
+    },
     setExpanded: updater =>
       instance.options.onExpandedChange?.(
         updater,
@@ -344,10 +357,13 @@ export function getInstance<
         if (process.env.NODE_ENV !== 'production' && instance.options.debug)
           console.info('Expanding...')
 
-        return expandRowsFn(instance, expanded, rowModel)
+        return expandRowsFn(instance, rowModel)
       },
-      'getExpandedRowModel',
-      instance.options.debug
+      {
+        key: 'getExpandedRowModel',
+        debug: instance.options.debug,
+        onChange: () => instance._notifyPageIndexReset(),
+      }
     ),
 
     getPreExpandedRows: () => instance.getGroupedRowModel().rows,

package/src/features/Filters.ts

@@ -1,6 +1,13 @@
 import { RowModel } from '..'
 import { BuiltInFilterType, filterTypes } from '../filterTypes'
-import { Column, OnChangeFn, ReactTable, Row, Updater } from '../types'
+import {
+  Column,
+  Listener,
+  OnChangeFn,
+  ReactTable,
+  Row,
+  Updater,
+} from '../types'
 import { functionalUpdate, isFunction, makeStateUpdater, memo } from '../utils'
 
 export type ColumnFilter = {
@@ -106,7 +113,6 @@ export type FiltersOptions<
   enableColumnFilters?: boolean
   columnFilterRowsFn?: (
     instance: ReactTable<any, any, any, any, any>,
-    columnFilters: ColumnFiltersState,
     coreRowModel: RowModel<any, any, any, any, any>
   ) => RowModel<any, any, any, any, any>
   // Global
@@ -117,14 +123,7 @@ export type FiltersOptions<
   enableGlobalFilter?: boolean
   globalFilterRowsFn?: (
     instance: ReactTable<any, any, any, any, any>,
-    globalFilter: any,
-    columnFilteredRowModel: RowModel<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >
+    rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   ) => RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   getColumnCanGlobalFilterFn?: (
     column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
@@ -138,6 +137,7 @@ export type FiltersInstance<
   TSortingFns,
   TAggregationFns
 > = {
+  _notifyFiltersReset: () => void
   getColumnAutoFilterFn: (
     columnId: string
   ) => FilterFn<any, any, any, any, any> | undefined
@@ -164,6 +164,31 @@ export type FiltersInstance<
     TSortingFns,
     TAggregationFns
   >
+  getPreFilteredRowModel: () => RowModel<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >
+  getPreFilteredRows: () => Row<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  getPreFilteredFlatRows: () => Row<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  getPreFilteredRowsById: () => Record<
+    string,
+    Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+  >
   getPreColumnFilteredRows: () => Row<
     TData,
     TValue,
@@ -337,8 +362,7 @@ export function createColumn<
         preFilteredMinMaxValues,
       }
     },
-    'column.getFacetInfo',
-    instance.options.debug
+    { key: 'column.getFacetInfo', debug: instance.options.debug }
   )
 
   return {
@@ -364,7 +388,30 @@ export function getInstance<
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 ): FiltersInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  let registered = false
+
   return {
+    _notifyFiltersReset: () => {
+      if (!registered) {
+        registered = true
+        return
+      }
+
+      if (instance.options.autoResetAll === false) {
+        return
+      }
+
+      if (instance.options.autoResetAll === true) {
+        instance.resetSorting()
+      } else {
+        if (instance.options.autoResetColumnFilters) {
+          instance.resetColumnFilters()
+        }
+        if (instance.options.autoResetGlobalFilter) {
+          instance.resetGlobalFilter()
+        }
+      }
+    },
     getColumnAutoFilterFn: columnId => {
       const firstRow = instance.getCoreFlatRows()[0]
 
@@ -601,7 +648,7 @@ export function getInstance<
           if (process.env.NODE_ENV !== 'production' && instance.options.debug)
             console.info('Column Filtering...')
 
-          return columnFiltersFn(instance as any, columnFilters, rowModel)
+          return columnFiltersFn(instance as any, rowModel)
         })()
 
         // Now that each filtered column has it's partially filtered rows,
@@ -622,19 +669,25 @@ export function getInstance<
 
         return columnFilteredRowModel
       },
-      'getColumnFilteredRowModel',
-      instance.options.debug
+      { key: 'getColumnFilteredRowModel', debug: instance.options.debug }
     ),
 
+    // These might be easier to remember than "column" filtered rows
+    getPreFilteredRowModel: () => instance.getCoreRowModel(),
+    getPreFilteredRows: () => instance.getCoreRowModel().rows,
+    getPreFilteredFlatRows: () => instance.getCoreRowModel().flatRows,
+    getPreFilteredRowsById: () => instance.getCoreRowModel().rowsById,
+
+    // Pre Column Filter
     getPreColumnFilteredRows: () => instance.getCoreRowModel().rows,
     getPreColumnFilteredFlatRows: () => instance.getCoreRowModel().flatRows,
     getPreColumnFilteredRowsById: () => instance.getCoreRowModel().rowsById,
     getColumnFilteredRows: () => instance.getColumnFilteredRowModel().rows,
+
     getColumnFilteredFlatRows: () =>
       instance.getColumnFilteredRowModel().flatRows,
     getColumnFilteredRowsById: () =>
       instance.getColumnFilteredRowModel().rowsById,
-
     getGlobalFilteredRowModel: memo(
       () => [
         instance.getState().globalFilter,
@@ -652,7 +705,6 @@ export function getInstance<
 
           return globalFiltersFn(
             instance as ReactTable<any, any, any, any, any>,
-            globalFilterValue,
             columnFilteredRowModel
           )
         })()
@@ -675,8 +727,11 @@ export function getInstance<
 
         return globalFilteredRowModel
       },
-      'getGlobalFilteredRowModel',
-      instance.options.debug
+      {
+        key: 'getGlobalFilteredRowModel',
+        debug: instance.options.debug,
+        onChange: () => instance._notifySortingReset(),
+      }
     ),
 
     getPreGlobalFilteredRows: () => instance.getColumnFilteredRowModel().rows,

package/src/features/Grouping.ts

@@ -39,7 +39,6 @@ export type GroupingColumnDef<TAggregationFns> = {
   renderAggregatedCell?: () => React.ReactNode
   enableGrouping?: boolean
   defaultCanGroup?: boolean
-  getCanGroup?: unknown
 }
 
 export type GroupingColumn<
@@ -98,14 +97,7 @@ export type GroupingOptions<
       TSortingFns,
       TAggregationFns
     >,
-    groupingState: GroupingState,
-    sortedRowsModel: RowModel<
-      TData,
-      TValue,
-      TFilterFns,
-      TSortingFns,
-      TAggregationFns
-    >
+    rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
   ) => RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 
   groupedColumnMode?: false | 'reorder' | 'remove'
@@ -125,6 +117,7 @@ export type GroupingInstance<
   TSortingFns,
   TAggregationFns
 > = {
+  _notifyGroupingReset: () => void
   getColumnAutoAggregationFn: (columnId: string) => AggregationFn | undefined
   getColumnAggregationFn: (columnId: string) => AggregationFn | undefined
   setGrouping: (updater: Updater<GroupingState>) => void
@@ -243,7 +236,26 @@ export function getInstance<
 >(
   instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 ): GroupingInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  let registered = false
+
   return {
+    _notifyGroupingReset: () => {
+      if (!registered) {
+        registered = true
+        return
+      }
+
+      if (instance.options.autoResetAll === false) {
+        return
+      }
+
+      if (
+        instance.options.autoResetAll === true ||
+        instance.options.autoResetGrouping
+      ) {
+        instance.resetGrouping()
+      }
+    },
     getColumnAutoAggregationFn: columnId => {
       const firstRow = instance.getCoreFlatRows()[0]
 
@@ -360,10 +372,13 @@ export function getInstance<
         if (process.env.NODE_ENV !== 'production' && instance.options.debug)
           console.info('Grouping...')
 
-        return groupRowsFn(instance, grouping, rowModel)
+        return groupRowsFn(instance, rowModel)
       },
-      'getGroupedRowModel',
-      instance.options.debug
+      {
+        key: 'getGroupedRowModel',
+        debug: instance.options.debug,
+        onChange: () => instance._notifyExpandedReset(),
+      }
     ),
 
     getPreGroupedRows: () => instance.getSortedRowModel().rows,