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

package/src/sortingFns.ts

@@ -19,8 +19,8 @@ function alphanumeric<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareAlphanumeric(
-    toString(rowA.values[columnId]).toLowerCase(),
-    toString(rowB.values[columnId]).toLowerCase()
+    toString(rowA.getValue(columnId)).toLowerCase(),
+    toString(rowB.getValue(columnId)).toLowerCase()
   )
 }
 
@@ -30,8 +30,8 @@ function alphanumericCaseSensitive<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareAlphanumeric(
-    toString(rowA.values[columnId]),
-    toString(rowB.values[columnId])
+    toString(rowA.getValue(columnId)),
+    toString(rowB.getValue(columnId))
   )
 }
 
@@ -90,8 +90,8 @@ function text<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareBasic(
-    toString(rowA.values[columnId]).toLowerCase(),
-    toString(rowB.values[columnId]).toLowerCase()
+    toString(rowA.getValue(columnId)).toLowerCase(),
+    toString(rowB.getValue(columnId)).toLowerCase()
   )
 }
 
@@ -103,8 +103,8 @@ function textCaseSensitive<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareBasic(
-    toString(rowA.values[columnId]),
-    toString(rowB.values[columnId])
+    toString(rowA.getValue(columnId)),
+    toString(rowB.getValue(columnId))
   )
 }
 
@@ -114,8 +114,8 @@ function datetime<TGenerics extends TableGenerics>(
   columnId: string
 ) {
   return compareBasic(
-    (rowA.values[columnId] as Date).getTime(),
-    (rowB.values[columnId] as Date).getTime()
+    (rowA.getValue(columnId) as Date).getTime(),
+    (rowB.getValue(columnId) as Date).getTime()
   )
 }
 
@@ -124,7 +124,7 @@ function basic<TGenerics extends TableGenerics>(
   rowB: Row<TGenerics>,
   columnId: string
 ) {
-  return compareBasic(rowA.values[columnId], rowB.values[columnId])
+  return compareBasic(rowA.getValue(columnId), rowB.getValue(columnId))
 }
 
 // Utils

package/src/types.ts

@@ -1,4 +1,4 @@
-import { CoreOptions, CoreTableState, TableCore } from './core'
+import { CoreOptions, CoreTableState, CoreInstance } from './core'
 import { ColumnsOptions, CoreColumn, CoreColumnDef } from './features/Columns'
 import {
   VisibilityInstance,
@@ -107,7 +107,7 @@ export type TableFeature = {
 }
 
 export type TableInstance<TGenerics extends TableGenerics> =
-  TableCore<TGenerics> &
+  CoreInstance<TGenerics> &
     ColumnsInstance<TGenerics> &
     RowsInstance<TGenerics> &
     CellsInstance<TGenerics> &
@@ -214,7 +214,7 @@ export type CoreCell<TGenerics extends TableGenerics> = {
   id: string
   rowId: string
   columnId: string
-  value: TGenerics['Value']
+  getValue: () => TGenerics['Value']
   row: Row<TGenerics>
   column: Column<TGenerics>
   renderCell: () => string | null | TGenerics['Rendered']
@@ -249,17 +249,4 @@ export type HeaderGroup<TGenerics extends TableGenerics> = {
   headers: Header<TGenerics>[]
 }
 
-export type HeaderRenderProps<THeader> = {
-  header: THeader
-}
-
-export type FooterRenderProps<THeader> = {
-  header: THeader
-}
-
-export type CellRenderProps<TCell, TRow> = {
-  cell: TCell
-  row: TRow
-}
-
 export type NoInfer<A extends any> = [A][A extends any ? 0 : never]

package/src/utils/filterRowsUtils.ts

@@ -2,21 +2,9 @@ import { TableGenerics, Row, RowModel, TableInstance } from '../types'
 
 export function filterRows<TGenerics extends TableGenerics>(
   rows: Row<TGenerics>[],
-  columnIds: string[],
+  filterRowImpl: (row: Row<TGenerics>) => any,
   instance: TableInstance<TGenerics>
 ) {
-  const filterRowImpl = (rowsToFilter: Row<TGenerics>[]) => {
-    // Horizontally filter rows through each column
-    return rowsToFilter.filter(row => {
-      for (let i = 0; i < columnIds.length; i++) {
-        if (row.columnFilterMap[columnIds[i]] === false) {
-          return false
-        }
-      }
-      return true
-    })
-  }
-
   if (instance.options.filterFromLeafRows) {
     return filterRowModelFromLeafs(rows, filterRowImpl, instance)
   }
@@ -26,51 +14,40 @@ export function filterRows<TGenerics extends TableGenerics>(
 
 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 {
@@ -82,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
+      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
+        }
 
-      if (!row.subRows?.length) {
-        rowsToFilter.splice(i, 1)
-        i--
-        continue
+        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)

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/{getFilteredRowModelSync.ts → getFilteredRowModel.ts}

@@ -1,13 +1,9 @@
-import {
-  ColumnFilter,
-  FilterFn,
-  ResolvedColumnFilter,
-} from '../features/Filters'
+import { ResolvedColumnFilter } from '../features/Filters'
 import { TableInstance, RowModel, TableGenerics, Row } from '../types'
 import { memo } from '../utils'
 import { filterRows } from './filterRowsUtils'
 
-export function getFilteredRowModelSync<TGenerics extends TableGenerics>(): (
+export function getFilteredRowModel<TGenerics extends TableGenerics>(): (
   instance: TableInstance<TGenerics>
 ) => () => RowModel<TGenerics> {
   return instance =>
@@ -83,34 +79,38 @@ export function getFilteredRowModelSync<TGenerics extends TableGenerics>(): (
           })
         }
 
+        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]
+          const row = rowModel.flatRows[j]!
 
           row.columnFilterMap = {}
 
           if (resolvedColumnFilters.length) {
             for (let i = 0; i < resolvedColumnFilters.length; i++) {
-              const columnFilter = resolvedColumnFilters[i]
+              currentColumnFilter = resolvedColumnFilters[i]!
 
               // Tag the row with the column filter state
-              row.columnFilterMap[columnFilter.id] = columnFilter.filterFn(
-                row,
-                columnFilter.id,
-                columnFilter.resolvedValue
-              )
+              row.columnFilterMap[currentColumnFilter.id] =
+                currentColumnFilter.filterFn(
+                  row,
+                  currentColumnFilter.id,
+                  currentColumnFilter.resolvedValue
+                )
             }
           }
 
           if (resolvedGlobalFilters.length) {
             for (let i = 0; i < resolvedGlobalFilters.length; i++) {
-              const globalFilter = resolvedGlobalFilters[i]
+              currentGlobalFilter = resolvedGlobalFilters[i]!
               // Tag the row with the first truthy global filter state
               if (
-                globalFilter.filterFn(
+                currentGlobalFilter.filterFn(
                   row,
-                  globalFilter.id,
-                  globalFilter.resolvedValue
+                  currentGlobalFilter.id,
+                  currentGlobalFilter.resolvedValue
                 )
               ) {
                 row.columnFilterMap.__global__ = true
@@ -124,12 +124,21 @@ export function getFilteredRowModelSync<TGenerics extends TableGenerics>(): (
           }
         }
 
+        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, filterableIds, instance)
+        return filterRows(rowModel.rows, filterRowsImpl, instance)
       },
       {
-        key:
-          process.env.NODE_ENV === 'development' && 'getFilteredRowModelSync',
+        key: process.env.NODE_ENV === 'development' && 'getFilteredRowModel',
         debug: () => instance.options.debugAll ?? instance.options.debugTable,
         onChange: () => {
           instance.queue(() => {

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 => {
@@ -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/{getSortedRowModelSync.ts → getSortedRowModel.ts}

@@ -2,7 +2,7 @@ import { TableInstance, Row, RowModel, TableGenerics } from '../types'
 import { SortingFn } from '../features/Sorting'
 import { memo } from '../utils'
 
-export function getSortedRowModelSync<TGenerics extends TableGenerics>(): (
+export function getSortedRowModel<TGenerics extends TableGenerics>(): (
   instance: TableInstance<TGenerics>
 ) => () => RowModel<TGenerics> {
   return instance =>
@@ -53,8 +53,8 @@ export function getSortedRowModelSync<TGenerics extends TableGenerics>(): (
               const isDesc = sortEntry?.desc ?? false
 
               if (columnInfo.sortUndefined) {
-                const aValue = rowA.values[sortEntry.id]
-                const bValue = rowB.values[sortEntry.id]
+                const aValue = rowA.getValue(sortEntry.id)
+                const bValue = rowB.getValue(sortEntry.id)
 
                 const aUndefined = typeof aValue === 'undefined'
                 const bUndefined = typeof bValue === 'undefined'