@tanstack/table-core 8.0.0-alpha.22 → 8.0.0-alpha.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/table-core",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.22",
+  "version": "8.0.0-alpha.23",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",

package/src/aggregationTypes.ts

@@ -12,19 +12,19 @@ export const aggregationTypes = {
 
 export type BuiltInAggregationType = keyof typeof aggregationTypes
 
-function sum(_leafValues: unknown[], childValues: unknown[]) {
+function sum(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
   // It's faster to just add the aggregations together instead of
   // process leaf nodes individually
-  return childValues.reduce(
+  return getChildValues().reduce(
     (sum: number, next: unknown) => sum + (typeof next === 'number' ? next : 0),
     0
   )
 }
 
-function min(_leafValues: unknown[], childValues: unknown[]) {
+function min(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
   let min: number | undefined
 
-  for (const value of childValues as number[]) {
+  for (const value of getChildValues() as number[]) {
     if (
       value != null &&
       (min! > value || (min === undefined && value >= value))
@@ -36,10 +36,10 @@ function min(_leafValues: unknown[], childValues: unknown[]) {
   return min
 }
 
-function max(_leafValues: unknown[], childValues: unknown[]) {
+function max(_getLeafValues: () => unknown[], getChildValues: () => unknown[]) {
   let max: number | undefined
 
-  for (const value of childValues as number[]) {
+  for (const value of getChildValues() as number[]) {
     if (
       value != null &&
       (max! < value || (max === undefined && value >= value))
@@ -51,11 +51,14 @@ function max(_leafValues: unknown[], childValues: unknown[]) {
   return max
 }
 
-function extent(_leafValues: unknown[], childValues: unknown[]) {
+function extent(
+  _getLeafValues: () => unknown[],
+  getChildValues: () => unknown[]
+) {
   let min: number | undefined
   let max: number | undefined
 
-  for (const value of childValues as number[]) {
+  for (const value of getChildValues() as number[]) {
     if (value != null) {
       if (min === undefined) {
         if (value >= value) min = max = value
@@ -69,11 +72,11 @@ function extent(_leafValues: unknown[], childValues: unknown[]) {
   return [min, max]
 }
 
-function mean(leafValues: unknown[]) {
+function mean(getLeafValues: () => unknown[]) {
   let count = 0
   let sum = 0
 
-  for (let value of leafValues as number[]) {
+  for (let value of getLeafValues() as number[]) {
     if (value != null && (value = +value) >= value) {
       ++count, (sum += value)
     }
@@ -84,15 +87,16 @@ function mean(leafValues: unknown[]) {
   return
 }
 
-function median(values: unknown[]) {
-  if (!values.length) {
+function median(getLeafValues: () => unknown[]) {
+  const leafValues = getLeafValues()
+  if (!leafValues.length) {
     return
   }
 
   let min = 0
   let max = 0
 
-  values.forEach(value => {
+  leafValues.forEach(value => {
     if (typeof value === 'number') {
       min = Math.min(min, value)
       max = Math.max(max, value)
@@ -102,14 +106,14 @@ function median(values: unknown[]) {
   return (min + max) / 2
 }
 
-function unique<T>(values: T[]) {
-  return Array.from(new Set(values).values())
+function unique<T>(getLeafValues: () => T[]) {
+  return Array.from(new Set(getLeafValues()).values())
 }
 
-function uniqueCount(values: unknown[]) {
-  return new Set(values).size
+function uniqueCount(getLeafValues: () => unknown[]) {
+  return new Set(getLeafValues()).size
 }
 
-function count(values: unknown[]) {
-  return values.length
+function count(getLeafValues: () => unknown[]) {
+  return getLeafValues().length
 }

package/src/core.tsx

@@ -153,8 +153,8 @@ export type CoreRow<TGenerics extends PartialGenerics> = {
   original?: TGenerics['Row']
   depth: number
   values: RowValues
-  leafRows: Row<TGenerics>[]
   subRows: Row<TGenerics>[]
+  getLeafRows: () => Row<TGenerics>[]
   getRowProps: PropGetter<RowProps>
   originalSubRows?: TGenerics['Row'][]
   getAllCells: () => Cell<TGenerics>[]
@@ -528,7 +528,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         depth,
         values,
         subRows: [],
-        leafRows: [],
+        getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
         getRowProps: userProps => instance.getRowProps(row.id, userProps)!,
         getAllCells: undefined!,
         getAllCellsByColumnId: undefined!,
@@ -650,9 +650,7 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
                   row
                 )
               }
-              // Keep the new subRows array on the row
               row.subRows = subRows
-              row.leafRows = flattenBy(subRows, d => d.leafRows)
             }
           }
         }
@@ -667,8 +665,8 @@ export function createTableInstance<TGenerics extends PartialGenerics>(
         key: 'getRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
-          instance._notifyRowSelectionReset()
           instance._notifyFiltersReset()
+          instance._notifyRowSelectionReset()
         },
       }
     ),

package/src/features/Expanding.ts

@@ -307,16 +307,8 @@ export const Expanding = {
         void instance.toggleRowExpanded(row.id, expanded),
       getIsExpanded: () => instance.getIsRowExpanded(row.id),
       getCanExpand: () => row.subRows && !!row.subRows.length,
-      getToggleExpandedProps: userProps => {
-        const initialProps: ToggleExpandedProps = {
-          title: 'Toggle Row Expanded',
-          onClick: (e: MouseEvent | TouchEvent) => {
-            e.stopPropagation()
-            instance.toggleRowExpanded(row.id)
-          },
-        }
-        return propGetter(initialProps, userProps)
-      },
+      getToggleExpandedProps: userProps =>
+        instance.getToggleExpandedProps(row.id, userProps),
     }
   },
 }

package/src/features/Filters.ts

@@ -74,7 +74,7 @@ export type FiltersColumn<TGenerics extends PartialGenerics> = {
 }
 
 export type FiltersOptions<TGenerics extends PartialGenerics> = {
-  filterFromChildrenUp?: boolean
+  filterFromLeafRows?: boolean
   filterTypes?: TGenerics['FilterFns']
   enableFilters?: boolean
   // Column
@@ -156,7 +156,7 @@ export const Filters = {
       onColumnFiltersChange: makeStateUpdater('columnFilters', instance),
       onGlobalFilterChange: makeStateUpdater('globalFilter', instance),
       autoResetColumnFilters: true,
-      filterFromChildrenUp: true,
+      filterFromLeafRows: true,
       autoResetGlobalFilter: true,
       globalFilterType: 'auto',
       getColumnCanGlobalFilterFn: column => {

package/src/features/Grouping.ts

@@ -26,8 +26,8 @@ import {
 export type GroupingState = string[]
 
 export type AggregationFn<TGenerics extends PartialGenerics> = (
-  leafValues: TGenerics['Row'][],
-  childValues: TGenerics['Row'][]
+  getLeafValues: () => TGenerics['Row'][],
+  getChildValues: () => TGenerics['Row'][]
 ) => any
 
 export type CustomAggregationTypes<TGenerics extends PartialGenerics> = Record<

package/src/features/RowSelection.ts

@@ -160,9 +160,7 @@ export const RowSelection = {
               ? value
               : !instance.getIsAllRowsSelected()
 
-          // Only remove/add the rows that are visible on the screen
-          //  Leave all the other rows that are selected alone.
-          const rowSelection = Object.assign({}, old)
+          const rowSelection = { ...old }
 
           const preGroupedFlatRows = instance.getPreGroupedRowModel().flatRows
 

package/src/utils/columnFilterRowsFn.ts

@@ -1,24 +1,19 @@
+import { AnyGenerics, TableInstance, Row, RowModel } from '../types'
 import {
-  AnyGenerics,
-  TableInstance,
-  Row,
-  RowModel,
-  PartialGenerics,
-} from '../types'
+  filterRowModelFromLeafs,
+  filterRowModelFromRoot,
+} from './filterRowsUtils'
 
 export function columnFilterRowsFn<TGenerics extends AnyGenerics>(
   instance: TableInstance<TGenerics>,
   rowModel: RowModel<TGenerics>
 ): RowModel<TGenerics> {
   const columnFilters = instance.getState().columnFilters
-
-  const newFilteredFlatRows: Row<TGenerics>[] = []
-  const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
-
-  const filterFromChildrenUp = instance.options.filterFromChildrenUp
+  const filterFromLeafRows = instance.options.filterFromLeafRows
 
   const filterRows = (rowsToFilter: Row<TGenerics>[], depth: number) => {
-    columnFilters.forEach(({ id: columnId, value: filterValue }) => {
+    for (let i = 0; i < columnFilters.length; i++) {
+      const { id: columnId, value: filterValue } = columnFilters[i]
       // Find the columnFilters column
       const column = instance.getColumn(columnId)
 
@@ -42,76 +37,20 @@ export function columnFilterRowsFn<TGenerics extends AnyGenerics>(
             `Could not find a valid 'column.filterType' for column with the ID: ${column.id}.`
           )
         }
-        return
+        continue
       }
 
       // Pass the rows, id, filterValue and column to the filterFn
       // to get the filtered rows back
       rowsToFilter = filterFn(rowsToFilter, [columnId], filterValue)
-    })
-
-    return rowsToFilter
-  }
-
-  if (filterFromChildrenUp) {
-    const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
-      // Filter from children up
-      rowsToFilter = rowsToFilter.filter(row => {
-        if (!row.subRows?.length) {
-          return true
-        }
-
-        row.subRows = recurseFilterRows(row.subRows, depth + 1)
-
-        return row.subRows.length
-      })
-
-      rowsToFilter = filterRows(rowsToFilter, depth)
-
-      // Apply the filter to any subRows
-      rowsToFilter.forEach(row => {
-        newFilteredFlatRows.push(row)
-        newFilteredRowsById[row.id] = row
-      })
-
-      return rowsToFilter
-    }
-
-    return {
-      rows: recurseFilterRows(rowModel.rows),
-      flatRows: newFilteredFlatRows,
-      rowsById: newFilteredRowsById,
     }
-  }
-
-  // Filters top level and nested rows
-  const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
-    // Filter from parents downward
-    rowsToFilter = filterRows(rowsToFilter, depth)
-
-    // Apply the filter to any subRows
-    // We technically could do this recursively in the above loop,
-    // but that would severely hinder the API for the user, since they
-    // would be required to do that recursion in some scenarios
-    rowsToFilter.forEach(row => {
-      newFilteredFlatRows.push(row)
-      newFilteredRowsById[row.id] = row
-
-      if (!filterFromChildrenUp) {
-        if (!row.subRows?.length) {
-          return
-        }
-
-        row.subRows = recurseFilterRows(row.subRows, depth + 1)
-      }
-    })
 
     return rowsToFilter
   }
 
-  return {
-    rows: recurseFilterRows(rowModel.rows),
-    flatRows: newFilteredFlatRows,
-    rowsById: newFilteredRowsById,
+  if (filterFromLeafRows) {
+    return filterRowModelFromLeafs(rowModel.rows, filterRows, instance)
   }
+
+  return filterRowModelFromRoot(rowModel.rows, filterRows, instance)
 }

package/src/utils/filterRowsUtils.ts

@@ -0,0 +1,107 @@
+import { AnyGenerics, Row, RowModel, TableInstance } from '../types'
+
+export function filterRowModelFromLeafs<TGenerics extends AnyGenerics>(
+  rowsToFilter: Row<TGenerics>[],
+  filterRows: (
+    rowsToFilter: Row<TGenerics>[],
+    depth: number
+  ) => Row<TGenerics>[],
+  instance: TableInstance<TGenerics>
+): RowModel<TGenerics> {
+  const newFilteredFlatRows: Row<TGenerics>[] = []
+  const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
+
+  const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
+    rowsToFilter = rowsToFilter.slice()
+
+    // Filter from children up first
+    for (let i = 0; i < rowsToFilter.length; i++) {
+      const row = rowsToFilter[i]
+
+      if (!row.subRows?.length) {
+        continue
+      }
+
+      rowsToFilter[i] = instance.createRow(
+        row.id,
+        row.original,
+        row.index,
+        row.depth,
+        row.values
+      )
+
+      rowsToFilter[i].subRows = recurseFilterRows(row.subRows, depth + 1)
+
+      if (!rowsToFilter[i].subRows.length) {
+        rowsToFilter.splice(i, 1)
+        i--
+      }
+    }
+
+    rowsToFilter = filterRows(rowsToFilter, depth)
+
+    // Apply the filter to any subRows
+    rowsToFilter.forEach(row => {
+      newFilteredFlatRows.push(row)
+      newFilteredRowsById[row.id] = row
+    })
+
+    return rowsToFilter
+  }
+
+  return {
+    rows: recurseFilterRows(rowsToFilter),
+    flatRows: newFilteredFlatRows,
+    rowsById: newFilteredRowsById,
+  }
+}
+
+export function filterRowModelFromRoot<TGenerics extends AnyGenerics>(
+  rowsToFilter: Row<TGenerics>[],
+  filterRows: (
+    rowsToFilter: Row<TGenerics>[],
+    depth: number
+  ) => Row<TGenerics>[],
+  instance: TableInstance<TGenerics>
+): RowModel<TGenerics> {
+  const newFilteredFlatRows: Row<TGenerics>[] = []
+  const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
+
+  // Filters top level and nested rows
+  const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
+    // Filter from parents downward first
+    rowsToFilter = filterRows(rowsToFilter, depth)
+
+    // Apply the filter to any subRows
+    for (let i = 0; i < rowsToFilter.length; i++) {
+      const row = rowsToFilter[i]
+
+      newFilteredFlatRows.push(row)
+      newFilteredRowsById[row.id] = row
+
+      if (!row.subRows?.length) {
+        rowsToFilter.splice(i, 1)
+        i--
+        continue
+      }
+
+      rowsToFilter[i] = instance.createRow(
+        row.id,
+        row.original,
+        row.index,
+        row.depth,
+        row.values
+      )
+
+      rowsToFilter[i].subRows = recurseFilterRows(row.subRows, depth + 1)
+    }
+
+    return rowsToFilter
+  }
+
+  return {
+    rows: recurseFilterRows(rowsToFilter),
+    flatRows: newFilteredFlatRows,
+    rowsById: newFilteredRowsById,
+  }
+}

package/src/utils/globalFilterRowsFn.ts

@@ -1,20 +1,16 @@
+import { TableInstance, Row, RowModel, AnyGenerics } from '../types'
 import {
-  TableInstance,
-  Row,
-  RowModel,
-  AnyGenerics,
-  PartialGenerics,
-} from '../types'
+  filterRowModelFromLeafs,
+  filterRowModelFromRoot,
+} from './filterRowsUtils'
 
 export function globalFilterRowsFn<TGenerics extends AnyGenerics>(
   instance: TableInstance<TGenerics>,
   rowModel: RowModel<TGenerics>
 ): RowModel<TGenerics> {
   const globalFilter = instance.getState().globalFilter
-  const newFilteredFlatRows: Row<TGenerics>[] = []
-  const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
 
-  const filterFromChildrenUp = instance.options.filterFromChildrenUp
+  const filterFromLeafRows = instance.options.filterFromLeafRows
 
   const filterFn = instance.getGlobalFilterFn()
 
@@ -31,65 +27,13 @@ export function globalFilterRowsFn<TGenerics extends AnyGenerics>(
 
   const filterableColumnIds = filterableColumns.map(d => d.id)
 
-  if (filterFromChildrenUp) {
-    const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
-      // Filter from children up
-      rowsToFilter = rowsToFilter.filter(row => {
-        if (!row.subRows?.length) {
-          return true
-        }
-
-        row.subRows = recurseFilterRows(row.subRows, depth + 1)
-
-        return row.subRows.length
-      })
-
-      rowsToFilter = filterFn(rowsToFilter, filterableColumnIds, globalFilter)
-
-      // Apply the filter to any subRows
-      rowsToFilter.forEach(row => {
-        newFilteredFlatRows.push(row)
-        newFilteredRowsById[row.id] = row
-      })
-
-      return rowsToFilter
-    }
-
-    return {
-      rows: recurseFilterRows(rowModel.rows),
-      flatRows: newFilteredFlatRows,
-      rowsById: newFilteredRowsById,
-    }
+  const filterRows = (rows: Row<TGenerics>[]) => {
+    return filterFn(rows, filterableColumnIds, globalFilter)
   }
 
-  // Filters top level and nested rows
-  const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
-    // Filter from parents downward
-    rowsToFilter = filterFn(rowsToFilter, filterableColumnIds, globalFilter)
-
-    // Apply the filter to any subRows
-    // We technically could do this recursively in the above loop,
-    // but that would severely hinder the API for the user, since they
-    // would be required to do that recursion in some scenarios
-    rowsToFilter.forEach(row => {
-      newFilteredFlatRows.push(row)
-      newFilteredRowsById[row.id] = row
-
-      if (!filterFromChildrenUp) {
-        if (!row.subRows?.length) {
-          return
-        }
-
-        row.subRows = recurseFilterRows(row.subRows, depth + 1)
-      }
-    })
-
-    return rowsToFilter
+  if (filterFromLeafRows) {
+    filterRowModelFromLeafs(rowModel.rows, filterRows, instance)
   }
 
-  return {
-    rows: recurseFilterRows(rowModel.rows),
-    flatRows: newFilteredFlatRows,
-    rowsById: newFilteredRowsById,
-  }
+  return filterRowModelFromRoot(rowModel.rows, filterRows, instance)
 }

package/src/utils/groupRowsFn.ts

@@ -39,21 +39,19 @@ export function groupRowsFn<TGenerics extends AnyGenerics>(
       const aggregateFn = instance.getColumnAggregationFn(column.id)
 
       if (aggregateFn) {
-        // Get the columnValues to aggregate
-        const groupedValues = groupedRows.map(row => row.values[column.id])
-
-        // Get the columnValues to aggregate
-        const leafValues = leafRows.map(row => {
-          let columnValue = row.values[column.id]
-
-          if (!depth && column.aggregateValue) {
-            columnValue = column.aggregateValue(columnValue)
-          }
-
-          return columnValue
-        })
-
-        values[column.id] = aggregateFn(leafValues, groupedValues)
+        values[column.id] = aggregateFn(
+          () =>
+            leafRows.map(row => {
+              let columnValue = row.values[column.id]
+
+              if (!depth && column.aggregateValue) {
+                columnValue = column.aggregateValue(columnValue)
+              }
+
+              return columnValue
+            }),
+          () => groupedRows.map(row => row.values[column.id])
+        )
       } else if (column.aggregationType) {
         console.info({ column })
         throw new Error(
@@ -103,7 +101,7 @@ export function groupRowsFn<TGenerics extends AnyGenerics>(
 
         // Flatten the leaf rows of the rows in this group
         const leafRows = depth
-          ? flattenBy(groupedRows, row => row.leafRows)
+          ? flattenBy(groupedRows, row => row.subRows)
           : groupedRows
 
         const values = aggregateRowsToValues(leafRows, groupedRows, depth)

package/src/utils/sortRowsFn.ts

@@ -1,10 +1,4 @@
-import {
-  TableInstance,
-  Row,
-  RowModel,
-  AnyGenerics,
-  PartialGenerics,
-} from '../types'
+import { TableInstance, Row, RowModel, AnyGenerics } from '../types'
 import { SortingFn } from '../features/Sorting'
 
 export function sortRowsFn<TGenerics extends AnyGenerics>(
@@ -58,7 +52,11 @@ export function sortRowsFn<TGenerics extends AnyGenerics>(
           const bUndefined = typeof bValue === 'undefined'
 
           if (aUndefined || bUndefined) {
-            return aUndefined && bUndefined ? 0 : aUndefined ? 1 : -1
+            return aUndefined && bUndefined
+              ? 0
+              : aUndefined
+              ? columnInfo.sortUndefined
+              : -columnInfo.sortUndefined
           }
         }