@tanstack/table-core 8.0.0-alpha.64 → 8.0.0-alpha.68

package/src/utils/filterRowsUtils.ts

@@ -1,52 +1,53 @@
 import { TableGenerics, Row, RowModel, TableInstance } from '../types'
 
+export function filterRows<TGenerics extends TableGenerics>(
+  rows: Row<TGenerics>[],
+  filterRowImpl: (row: Row<TGenerics>) => any,
+  instance: TableInstance<TGenerics>
+) {
+  if (instance.options.filterFromLeafRows) {
+    return filterRowModelFromLeafs(rows, filterRowImpl, instance)
+  }
+
+  return filterRowModelFromRoot(rows, filterRowImpl, instance)
+}
+
 export function filterRowModelFromLeafs<TGenerics extends TableGenerics>(
   rowsToFilter: Row<TGenerics>[],
-  filterRows: (
-    rowsToFilter: Row<TGenerics>[],
-    depth: number
-  ) => Row<TGenerics>[],
+  filterRow: (row: Row<TGenerics>) => Row<TGenerics>[],
   instance: TableInstance<TGenerics>
 ): RowModel<TGenerics> {
   const newFilteredFlatRows: Row<TGenerics>[] = []
   const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
 
+  let row
+  let newRow
+
   const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
-    rowsToFilter = rowsToFilter.slice()
+    const rows: Row<TGenerics>[] = []
 
     // Filter from children up first
     for (let i = 0; i < rowsToFilter.length; i++) {
-      const row = rowsToFilter[i]
-
-      if (!row.subRows?.length) {
-        continue
+      row = rowsToFilter[i]!
+
+      if (row.subRows?.length) {
+        newRow = instance.createRow(row.id, row.original, row.index, row.depth)
+        newRow.columnFilterMap = row.columnFilterMap
+        newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+        if (!newRow.subRows.length) {
+          continue
+        }
+        row = newRow
       }
 
-      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--
+      if (filterRow(row)) {
+        rows.push(row)
+        newFilteredRowsById[row.id] = row
+        newFilteredRowsById[i] = row
       }
     }
 
-    rowsToFilter = filterRows(rowsToFilter, depth)
-
-    // Apply the filter to any subRows
-    rowsToFilter.forEach(row => {
-      newFilteredFlatRows.push(row)
-      newFilteredRowsById[row.id] = row
-    })
-
-    return rowsToFilter
+    return rows
   }
 
   return {
@@ -58,45 +59,47 @@ export function filterRowModelFromLeafs<TGenerics extends TableGenerics>(
 
 export function filterRowModelFromRoot<TGenerics extends TableGenerics>(
   rowsToFilter: Row<TGenerics>[],
-  filterRows: (
-    rowsToFilter: Row<TGenerics>[],
-    depth: number
-  ) => Row<TGenerics>[],
+  filterRow: (row: Row<TGenerics>) => any,
   instance: TableInstance<TGenerics>
 ): RowModel<TGenerics> {
   const newFilteredFlatRows: Row<TGenerics>[] = []
   const newFilteredRowsById: Record<string, Row<TGenerics>> = {}
 
+  let rows
+  let row
+  let newRow
+
   // Filters top level and nested rows
   const recurseFilterRows = (rowsToFilter: Row<TGenerics>[], depth = 0) => {
     // Filter from parents downward first
-    rowsToFilter = filterRows(rowsToFilter, depth)
+
+    rows = []
 
     // 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
+      row = rowsToFilter[i]!
+
+      const pass = filterRow(row)
+
+      if (pass) {
+        if (row.subRows?.length) {
+          newRow = instance.createRow(
+            row.id,
+            row.original,
+            row.index,
+            row.depth
+          )
+          newRow.subRows = recurseFilterRows(row.subRows, depth + 1)
+          row = newRow
+        }
+
+        rows.push(row)
+        newFilteredFlatRows.push(row)
+        newFilteredRowsById[row.id] = row
       }
-
-      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
   }
 
   return {

package/src/utils/{getCoreRowModelSync.ts → getCoreRowModel.ts}

@@ -1,7 +1,7 @@
 import { TableInstance, Row, RowModel, TableGenerics } from '../types'
 import { memo } from '../utils'
 
-export function getCoreRowModelSync<TGenerics extends TableGenerics>(): (
+export function getCoreRowModel<TGenerics extends TableGenerics>(): (
   instance: TableInstance<TGenerics>
 ) => () => RowModel<TGenerics> {
   return instance =>
@@ -46,13 +46,7 @@ export function getCoreRowModelSync<TGenerics extends TableGenerics>(): (
           }
 
           // Make the row
-          const row = instance.createRow(
-            id,
-            originalRow,
-            rowIndex,
-            depth,
-            values
-          )
+          const row = instance.createRow(id, originalRow, rowIndex, depth)
 
           // Push instance row into the parentRows array
           parentRows.push(row)
@@ -94,7 +88,7 @@ export function getCoreRowModelSync<TGenerics extends TableGenerics>(): (
         return { rows, flatRows, rowsById }
       },
       {
-        key: 'getRowModel',
+        key: process.env.NODE_ENV === 'development' && 'getRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {

package/src/utils/getExpandedRowModel.ts

@@ -24,7 +24,7 @@ export function getExpandedRowModel<TGenerics extends TableGenerics>(): (
         return expandRows(rowModel, instance)
       },
       {
-        key: 'getExpandedRowModel',
+        key: process.env.NODE_ENV === 'development' && 'getExpandedRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
       }
     )
@@ -42,7 +42,7 @@ export function expandRows<TGenerics extends TableGenerics>(
     if (
       instance.options.expandSubRows &&
       row.subRows?.length &&
-      instance.getIsRowExpanded(row.id)
+      row.getIsExpanded()
     ) {
       row.subRows.forEach(handleRow)
     }

package/src/utils/getFacetedMinMaxValues.ts

@@ -0,0 +1,37 @@
+import { TableInstance, TableGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getFacetedMinMaxValues<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>,
+  columnId: string
+) => () => [number, number] {
+  return (instance, columnId) =>
+    memo(
+      () => [instance.getColumn(columnId).getFacetedRowModel()],
+      facetedRowModel => {
+        let facetedMinMaxValues: [any, any] = [
+          facetedRowModel.flatRows[0]?.getValue(columnId) ?? null,
+          facetedRowModel.flatRows[0]?.getValue(columnId) ?? null,
+        ]
+
+        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+          const value = facetedRowModel.flatRows[i]?.getValue(columnId)
+
+          if (value < facetedMinMaxValues[0]) {
+            facetedMinMaxValues[0] = value
+          } else if (value > facetedMinMaxValues[1]) {
+            facetedMinMaxValues[1] = value
+          }
+        }
+
+        return facetedMinMaxValues
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' &&
+          'getFacetedMinMaxValues_' + columnId,
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {},
+      }
+    )
+}

package/src/utils/getFacetedRowModel.ts

@@ -0,0 +1,50 @@
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { memo } from '../utils'
+import { filterRows } from './filterRowsUtils'
+
+export function getFacetedRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>,
+  columnId: string
+) => () => RowModel<TGenerics> {
+  return (instance, columnId) =>
+    memo(
+      () => [
+        instance.getPreFilteredRowModel(),
+        instance.getState().columnFilters,
+        instance.getState().globalFilter,
+        instance.getFilteredRowModel(),
+      ],
+      (preRowModel, columnFilters, globalFilter) => {
+        if (
+          !preRowModel.rows.length ||
+          (!columnFilters?.length && !globalFilter)
+        ) {
+          return preRowModel
+        }
+
+        const filterableIds = [
+          ...columnFilters.map(d => d.id).filter(d => d !== columnId),
+          globalFilter ? '__global__' : undefined,
+        ].filter(Boolean) as string[]
+
+        const filterRowsImpl = (row: Row<TGenerics>) => {
+          // Horizontally filter rows through each column
+          for (let i = 0; i < filterableIds.length; i++) {
+            if (row.columnFilterMap[filterableIds[i]!] === false) {
+              return false
+            }
+          }
+          return true
+        }
+
+        return filterRows(preRowModel.rows, filterRowsImpl, instance)
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' &&
+          'getFacetedRowModel_' + columnId,
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {},
+      }
+    )
+}

package/src/utils/getFacetedUniqueValues.ts

@@ -0,0 +1,37 @@
+import { TableInstance, TableGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getFacetedUniqueValues<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>,
+  columnId: string
+) => () => Map<any, number> {
+  return (instance, columnId) =>
+    memo(
+      () => [instance.getColumn(columnId).getFacetedRowModel()],
+      facetedRowModel => {
+        let facetedUniqueValues = new Map<any, number>()
+
+        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+          const value = facetedRowModel.flatRows[i]?.getValue(columnId)
+
+          if (facetedUniqueValues.has(value)) {
+            facetedUniqueValues.set(
+              value,
+              (facetedUniqueValues.get(value) ?? 0) + 1
+            )
+          } else {
+            facetedUniqueValues.set(value, 1)
+          }
+        }
+
+        return facetedUniqueValues
+      },
+      {
+        key:
+          process.env.NODE_ENV === 'development' &&
+          'getFacetedUniqueValues_' + columnId,
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {},
+      }
+    )
+}

package/src/utils/getFilteredRowModel.ts

@@ -0,0 +1,150 @@
+import { ResolvedColumnFilter } from '../features/Filters'
+import { TableInstance, RowModel, TableGenerics, Row } from '../types'
+import { memo } from '../utils'
+import { filterRows } from './filterRowsUtils'
+
+export function getFilteredRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [
+        instance.getPreFilteredRowModel(),
+        instance.getState().columnFilters,
+        instance.getState().globalFilter,
+      ],
+      (rowModel, columnFilters, globalFilter) => {
+        if (
+          !rowModel.rows.length ||
+          (!columnFilters?.length && !globalFilter)
+        ) {
+          return rowModel
+        }
+
+        const resolvedColumnFilters: ResolvedColumnFilter<TGenerics>[] = []
+        const resolvedGlobalFilters: ResolvedColumnFilter<TGenerics>[] = []
+
+        ;(columnFilters ?? []).forEach(d => {
+          const column = instance.getColumn(d.id)
+
+          if (!column) {
+            if (process.env.NODE_ENV !== 'production') {
+              console.warn(
+                `Table: Could not find a column to filter with columnId: ${d.id}`
+              )
+            }
+          }
+
+          const filterFn = column.getFilterFn()
+
+          if (!filterFn) {
+            if (process.env.NODE_ENV !== 'production') {
+              console.warn(
+                `Could not find a valid 'column.filterFn' for column with the ID: ${column.id}.`
+              )
+            }
+            return
+          }
+
+          resolvedColumnFilters.push({
+            id: d.id,
+            filterFn,
+            resolvedValue: filterFn.resolveFilterValue?.(d.value) ?? d.value,
+          })
+        })
+
+        const filterableIds = columnFilters.map(d => d.id)
+
+        const globalFilterFn = instance.getGlobalFilterFn()
+
+        const globallyFilterableColumns = instance
+          .getAllLeafColumns()
+          .filter(column => column.getCanGlobalFilter())
+
+        if (
+          globalFilter &&
+          globalFilterFn &&
+          globallyFilterableColumns.length
+        ) {
+          filterableIds.push('__global__')
+
+          globallyFilterableColumns.forEach(column => {
+            resolvedGlobalFilters.push({
+              id: column.id,
+              filterFn: globalFilterFn,
+              resolvedValue:
+                globalFilterFn.resolveFilterValue?.(globalFilter) ??
+                globalFilter,
+            })
+          })
+        }
+
+        let currentColumnFilter
+        let currentGlobalFilter
+
+        // Flag the prefiltered row model with each filter state
+        for (let j = 0; j < rowModel.flatRows.length; j++) {
+          const row = rowModel.flatRows[j]!
+
+          row.columnFilterMap = {}
+
+          if (resolvedColumnFilters.length) {
+            for (let i = 0; i < resolvedColumnFilters.length; i++) {
+              currentColumnFilter = resolvedColumnFilters[i]!
+
+              // Tag the row with the column filter state
+              row.columnFilterMap[currentColumnFilter.id] =
+                currentColumnFilter.filterFn(
+                  row,
+                  currentColumnFilter.id,
+                  currentColumnFilter.resolvedValue
+                )
+            }
+          }
+
+          if (resolvedGlobalFilters.length) {
+            for (let i = 0; i < resolvedGlobalFilters.length; i++) {
+              currentGlobalFilter = resolvedGlobalFilters[i]!
+              // Tag the row with the first truthy global filter state
+              if (
+                currentGlobalFilter.filterFn(
+                  row,
+                  currentGlobalFilter.id,
+                  currentGlobalFilter.resolvedValue
+                )
+              ) {
+                row.columnFilterMap.__global__ = true
+                break
+              }
+            }
+
+            if (row.columnFilterMap.__global__ !== true) {
+              row.columnFilterMap.__global__ = false
+            }
+          }
+        }
+
+        const filterRowsImpl = (row: Row<TGenerics>) => {
+          // Horizontally filter rows through each column
+          for (let i = 0; i < filterableIds.length; i++) {
+            if (row.columnFilterMap[filterableIds[i]!] === false) {
+              return false
+            }
+          }
+          return true
+        }
+
+        // Filter final rows using all of the active filters
+        return filterRows(rowModel.rows, filterRowsImpl, instance)
+      },
+      {
+        key: process.env.NODE_ENV === 'development' && 'getFilteredRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance.queue(() => {
+            instance._autoResetPageIndex()
+          })
+        },
+      }
+    )
+}

package/src/utils/getGroupedRowModel.ts

@@ -1,7 +1,8 @@
+import { CoreRow } from '../features/Rows'
 import { TableInstance, Row, RowModel, TableGenerics } from '../types'
 import { flattenBy, memo } from '../utils'
 
-export function getGroupedRowModelSync<TGenerics extends TableGenerics>(): (
+export function getGroupedRowModel<TGenerics extends TableGenerics>(): (
   instance: TableInstance<TGenerics>
 ) => () => RowModel<TGenerics> {
   return instance =>
@@ -17,56 +18,6 @@ export function getGroupedRowModelSync<TGenerics extends TableGenerics>(): (
           instance.getColumn(columnId)
         )
 
-        // Find the columns that can or are aggregating
-        // Uses each column to aggregate rows into a single value
-        const aggregateRowsToValues = (
-          leafRows: Row<TGenerics>[],
-          groupedRows: Row<TGenerics>[],
-          depth: number
-        ) => {
-          const values: Record<string, unknown> = {}
-
-          instance.getAllLeafColumns().forEach(column => {
-            // Don't aggregate columns that are in the grouping
-            if (existingGrouping.includes(column.id)) {
-              values[column.id] = groupedRows[0]
-                ? groupedRows[0].values[column.id]
-                : null
-              return
-            }
-
-            // Aggregate the values
-            const aggregateFn = instance.getColumnAggregationFn(column.id)
-
-            if (aggregateFn) {
-              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.aggregationFn) {
-              console.info({ column })
-              throw new Error(
-                process.env.NODE_ENV !== 'production'
-                  ? `Table: Invalid column.aggregateType option for column listed above`
-                  : ''
-              )
-            } else {
-              values[column.id] = null
-            }
-          })
-
-          return values
-        }
-
         const groupedFlatRows: Row<TGenerics>[] = []
         const groupedRowsById: Record<string, Row<TGenerics>> = {}
         // const onlyGroupedFlatRows: Row[] = [];
@@ -104,21 +55,61 @@ export function getGroupedRowModelSync<TGenerics extends TableGenerics>(): (
                 ? flattenBy(groupedRows, row => row.subRows)
                 : groupedRows
 
-              const values = aggregateRowsToValues(leafRows, groupedRows, depth)
-
-              const row = instance.createRow(
-                id,
-                undefined,
-                index,
-                depth,
-                values
-              )
+              const row = instance.createRow(id, undefined, index, depth)
 
               Object.assign(row, {
                 groupingColumnId: columnId,
                 groupingValue,
                 subRows,
                 leafRows,
+                getValue: (columnId: string) => {
+                  // Don't aggregate columns that are in the grouping
+                  if (existingGrouping.includes(columnId)) {
+                    if (row.valuesCache.hasOwnProperty(columnId)) {
+                      return row.valuesCache[columnId]
+                    }
+
+                    if (groupedRows[0]) {
+                      row.valuesCache[columnId] =
+                        groupedRows[0].getValue(columnId) ?? undefined
+                    }
+
+                    return row.valuesCache[columnId]
+                  }
+
+                  if (row.groupingValuesCache.hasOwnProperty(columnId)) {
+                    return row.groupingValuesCache[columnId]
+                  }
+
+                  // Aggregate the values
+                  const column = instance.getColumn(columnId)
+                  const aggregateFn = column.getColumnAggregationFn()
+
+                  if (aggregateFn) {
+                    row.groupingValuesCache[columnId] = aggregateFn(
+                      () =>
+                        leafRows.map(row => {
+                          let columnValue = row.getValue(columnId)
+
+                          if (!depth && column.aggregateValue) {
+                            columnValue = column.aggregateValue(columnValue)
+                          }
+
+                          return columnValue
+                        }),
+                      () => groupedRows.map(row => row.getValue(columnId))
+                    )
+
+                    return row.groupingValuesCache[columnId]
+                  } else if (column.aggregationFn) {
+                    console.info({ column })
+                    throw new Error(
+                      process.env.NODE_ENV !== 'production'
+                        ? `Table: Invalid column.aggregateType option for column listed above`
+                        : ''
+                    )
+                  }
+                },
               })
 
               subRows.forEach(subRow => {
@@ -161,7 +152,7 @@ export function getGroupedRowModelSync<TGenerics extends TableGenerics>(): (
         }
       },
       {
-        key: 'getGroupedRowModel',
+        key: process.env.NODE_ENV === 'development' && 'getGroupedRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {
@@ -180,7 +171,7 @@ function groupBy<TGenerics extends TableGenerics>(
   const groupMap = new Map<any, Row<TGenerics>[]>()
 
   return rows.reduce((map, row) => {
-    const resKey = `${row.values[columnId]}`
+    const resKey = `${row.getValue(columnId)}`
     const previous = map.get(resKey)
     if (!previous) {
       map.set(resKey, [row])

package/src/utils/getPaginationRowModel.ts

@@ -41,7 +41,7 @@ export function getPaginationRowModel<TGenerics extends TableGenerics>(opts?: {
         }
       },
       {
-        key: 'getPaginationRowModel',
+        key: process.env.NODE_ENV === 'development' && 'getPaginationRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
       }
     )