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

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]
 
@@ -438,7 +485,7 @@ export function getInstance<
     setColumnFilters: (updater: Updater<ColumnFiltersState>) => {
       const leafColumns = instance.getAllLeafColumns()
 
-      const updateFn = (old?: ColumnFiltersState) => {
+      const updateFn = (old: ColumnFiltersState) => {
         return functionalUpdate(updater, old)?.filter(filter => {
           const column = leafColumns.find(d => d.id === filter.id)
 
@@ -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,

package/src/features/Headers.ts

@@ -1,6 +1,7 @@
 import {
   Cell,
   Column,
+  CoreHeader,
   FooterGroupProps,
   FooterProps,
   Getter,
@@ -14,6 +15,9 @@ import {
 } from '../types'
 import { propGetter, memo, flexRender } from '../utils'
 
+import * as ColumnSizing from './ColumnSizing'
+import * as Sorting from './Sorting'
+
 export type HeadersRow<
   TData,
   TValue,
@@ -237,8 +241,7 @@ export function createRow<
       _ => {
         return row.getAllCells().filter(cell => cell.column.getIsVisible())
       },
-      'row._getAllVisibleCells',
-      instance.options.debug
+      { key: 'row._getAllVisibleCells', debug: instance.options.debug }
     ),
     getVisibleCells: memo(
       () => [
@@ -247,8 +250,7 @@ export function createRow<
         row.getRightVisibleCells(),
       ],
       (left, center, right) => [...left, ...center, ...right],
-      'row.getVisibleCells',
-      instance.options.debug
+      { key: 'row.getVisibleCells', debug: instance.options.debug }
     ),
     getCenterVisibleCells: memo(
       () => [
@@ -261,8 +263,7 @@ export function createRow<
 
         return allCells.filter(d => !leftAndRight.includes(d.columnId))
       },
-      'row.getCenterVisibleCells',
-      instance.options.debug
+      { key: 'row.getCenterVisibleCells', debug: instance.options.debug }
     ),
     getLeftVisibleCells: memo(
       () => [
@@ -277,8 +278,7 @@ export function createRow<
 
         return cells
       },
-      'row.getLeftVisibleCells',
-      instance.options.debug
+      { key: 'row.getLeftVisibleCells', debug: instance.options.debug }
     ),
     getRightVisibleCells: memo(
       () => [
@@ -292,8 +292,7 @@ export function createRow<
 
         return cells
       },
-      'row.getRightVisibleCells',
-      instance.options.debug
+      { key: 'row.getRightVisibleCells', debug: instance.options.debug }
     ),
   }
 }
@@ -319,7 +318,7 @@ export function getInstance<
     ) => {
       const id = options.id ?? column.id
 
-      let header: Header<
+      let header: CoreHeader<
         TData,
         TValue,
         TFilterFns,
@@ -338,7 +337,7 @@ export function getInstance<
           let sum = 0
 
           const recurse = (
-            header: Header<
+            header: CoreHeader<
               TData,
               TValue,
               TFilterFns,
@@ -364,7 +363,7 @@ export function getInstance<
           TSortingFns,
           TAggregationFns
         >[] => {
-          const leafHeaders: Header<
+          const leafHeaders: CoreHeader<
             TData,
             TValue,
             TFilterFns,
@@ -373,7 +372,13 @@ export function getInstance<
           >[] = []
 
           const recurseHeader = (
-            h: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+            h: CoreHeader<
+              TData,
+              TValue,
+              TFilterFns,
+              TSortingFns,
+              TAggregationFns
+            >
           ) => {
             if (h.subHeaders && h.subHeaders.length) {
               h.subHeaders.map(recurseHeader)
@@ -382,17 +387,33 @@ export function getInstance<
           }
 
           recurseHeader(header)
-          return leafHeaders
+
+          return leafHeaders as Header<
+            TData,
+            TValue,
+            TFilterFns,
+            TSortingFns,
+            TAggregationFns
+          >[]
         },
         getHeaderProps: userProps =>
           instance.getHeaderProps(header.id, userProps)!,
         getFooterProps: userProps =>
           instance.getFooterProps(header.id, userProps)!,
-        renderHeader: () => flexRender(column.header, { header, column }),
-        renderFooter: () => flexRender(column.footer, { header, column }),
+        renderHeader: () =>
+          flexRender(column.header, { instance, header, column }),
+        renderFooter: () =>
+          flexRender(column.footer, { instance, header, column }),
       }
 
-      return header
+      // Yes, we have to convert instance to uknown, because we know more than the compiler here.
+      return header as Header<
+        TData,
+        TValue,
+        TFilterFns,
+        TSortingFns,
+        TAggregationFns
+      >
     },
 
     // Header Groups
@@ -422,8 +443,7 @@ export function getInstance<
 
         return headerGroups
       },
-      'getHeaderGroups',
-      instance.options.debug
+      { key: 'getHeaderGroups', debug: instance.options.debug }
     ),
 
     getCenterHeaderGroups: memo(
@@ -439,8 +459,7 @@ export function getInstance<
         )
         return buildHeaderGroups(allColumns, leafColumns, instance, 'center')
       },
-      'getCenterHeaderGroups',
-      instance.options.debug
+      { key: 'getCenterHeaderGroups', debug: instance.options.debug }
     ),
 
     getLeftHeaderGroups: memo(
@@ -453,8 +472,7 @@ export function getInstance<
         leafColumns = leafColumns.filter(column => left?.includes(column.id))
         return buildHeaderGroups(allColumns, leafColumns, instance, 'left')
       },
-      'getLeftHeaderGroups',
-      instance.options.debug
+      { key: 'getLeftHeaderGroups', debug: instance.options.debug }
     ),
 
     getRightHeaderGroups: memo(
@@ -467,8 +485,7 @@ export function getInstance<
         leafColumns = leafColumns.filter(column => right?.includes(column.id))
         return buildHeaderGroups(allColumns, leafColumns, instance, 'right')
       },
-      'getRightHeaderGroups',
-      instance.options.debug
+      { key: 'getRightHeaderGroups', debug: instance.options.debug }
     ),
 
     // Footer Groups
@@ -478,8 +495,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getFooterGroups',
-      instance.options.debug
+      { key: 'getFooterGroups', debug: instance.options.debug }
     ),
 
     getLeftFooterGroups: memo(
@@ -487,8 +503,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getLeftFooterGroups',
-      instance.options.debug
+      { key: 'getLeftFooterGroups', debug: instance.options.debug }
     ),
 
     getCenterFooterGroups: memo(
@@ -496,8 +511,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getCenterFooterGroups',
-      instance.options.debug
+      { key: 'getCenterFooterGroups', debug: instance.options.debug }
     ),
 
     getRightFooterGroups: memo(
@@ -505,8 +519,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getRightFooterGroups',
-      instance.options.debug
+      { key: 'getRightFooterGroups', debug: instance.options.debug }
     ),
 
     // Flat Headers
@@ -520,8 +533,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getFlatHeaders',
-      instance.options.debug
+      { key: 'getFlatHeaders', debug: instance.options.debug }
     ),
 
     getLeftFlatHeaders: memo(
@@ -533,8 +545,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getLeftFlatHeaders',
-      instance.options.debug
+      { key: 'getLeftFlatHeaders', debug: instance.options.debug }
     ),
 
     getCenterFlatHeaders: memo(
@@ -546,8 +557,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getCenterFlatHeaders',
-      instance.options.debug
+      { key: 'getCenterFlatHeaders', debug: instance.options.debug }
     ),
 
     getRightFlatHeaders: memo(
@@ -559,8 +569,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getRightFlatHeaders',
-      instance.options.debug
+      { key: 'getRightFlatHeaders', debug: instance.options.debug }
     ),
 
     // Leaf Headers
@@ -570,8 +579,7 @@ export function getInstance<
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      'getCenterLeafHeaders',
-      instance.options.debug
+      { key: 'getCenterLeafHeaders', debug: instance.options.debug }
     ),
 
     getLeftLeafHeaders: memo(
@@ -579,8 +587,7 @@ export function getInstance<
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      'getLeftLeafHeaders',
-      instance.options.debug
+      { key: 'getLeftLeafHeaders', debug: instance.options.debug }
     ),
 
     getRightLeafHeaders: memo(
@@ -588,8 +595,7 @@ export function getInstance<
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      'getRightLeafHeaders',
-      instance.options.debug
+      { key: 'getRightLeafHeaders', debug: instance.options.debug }
     ),
 
     getLeafHeaders: memo(
@@ -609,8 +615,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getLeafHeaders',
-      instance.options.debug
+      { key: 'getLeafHeaders', debug: instance.options.debug }
     ),
 
     getHeader: (id: string) => {

package/src/features/Ordering.ts

@@ -7,7 +7,7 @@ import * as Grouping from './Grouping'
 export type ColumnOrderState = string[]
 
 export type ColumnOrderTableState = {
-  columnOrder: string[]
+  columnOrder: ColumnOrderState
 }
 
 export type ColumnOrderOptions = {
@@ -127,8 +127,7 @@ export function getInstance<
           groupedColumnMode
         )
       },
-      'getOrderColumnsFn',
-      instance.options.debug
+      { key: 'getOrderColumnsFn', debug: instance.options.debug }
     ),
   }
 }