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

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'

package/src/utils.ts

@@ -21,35 +21,6 @@ export function noop() {
   //
 }
 
-export function getBatchGroups<T>(arr: T[], count: number) {
-  const groups: { start: number; end: number; items: T[] }[] = [
-    {
-      start: 0,
-      end: count - 1,
-      items: [],
-    },
-  ]
-
-  let groupIndex = 0
-  let group = groups[groupIndex]
-
-  for (let i = 0; i < arr.length; i++) {
-    if (i > group.end) {
-      groupIndex++
-      groups[groupIndex] = {
-        start: i,
-        end: i + count - 1,
-        items: [],
-      }
-    }
-    group = groups[groupIndex]
-    const item = arr[i]
-    group.items.push(item)
-  }
-
-  return groups
-}
-
 export function makeStateUpdater(key: keyof TableState, instance: unknown) {
   return (updater: Updater<any>) => {
     ;(instance as any).setState(<TTableState>(old: TTableState) => {
@@ -94,7 +65,7 @@ export function memo<TDeps extends readonly any[], TResult>(
   opts: {
     key: any
     debug?: () => any
-    onChange?: (result: TResult, previousResult?: TResult) => void
+    onChange?: (result: TResult) => void
   }
 ): () => TResult {
   let deps: any[] = []
@@ -110,225 +81,46 @@ export function memo<TDeps extends readonly any[], TResult>(
       newDeps.length !== deps.length ||
       newDeps.some((dep: any, index: number) => deps[index] !== dep)
 
-    if (depsChanged) {
-      let oldResult = result
-      let resultTime: number
-      if (opts.key && opts.debug) resultTime = Date.now()
-      result = fn(...newDeps)
-      deps = newDeps
-      opts?.onChange?.(result, oldResult)
+    if (!depsChanged) {
+      return result!
+    }
+
+    deps = newDeps
+
+    let resultTime: number
+    if (opts.key && opts.debug) resultTime = Date.now()
+
+    result = fn(...newDeps)
+    opts?.onChange?.(result)
 
-      if (opts.key && opts.debug) {
-        if (opts?.debug()) {
-          const depEndTime = Math.round((Date.now() - depTime!) * 100) / 100
-          const resultEndTime =
-            Math.round((Date.now() - resultTime!) * 100) / 100
-          const resultFpsPercentage = resultEndTime / 16
+    if (opts.key && opts.debug) {
+      if (opts?.debug()) {
+        const depEndTime = Math.round((Date.now() - depTime!) * 100) / 100
+        const resultEndTime = Math.round((Date.now() - resultTime!) * 100) / 100
+        const resultFpsPercentage = resultEndTime / 16
 
-          const pad = (str: number | string, num: number) => {
-            str = String(str)
-            while (str.length < num) {
-              str = ' ' + str
-            }
-            return str
+        const pad = (str: number | string, num: number) => {
+          str = String(str)
+          while (str.length < num) {
+            str = ' ' + str
           }
+          return str
+        }
 
-          console.info(
-            `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
-            `
+        console.info(
+          `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
+          `
             font-size: .6rem;
             font-weight: bold;
             color: hsl(${Math.max(
               0,
               Math.min(120 - 120 * resultFpsPercentage, 120)
             )}deg 100% 31%);`,
-            opts?.key,
-            {
-              length: `${deps.length} -> ${newDeps.length}`,
-              ...newDeps
-                .map((_, index) => {
-                  if (deps[index] !== newDeps[index]) {
-                    return [index, deps[index], newDeps[index]]
-                  }
-
-                  return false
-                })
-                .filter(Boolean)
-                .reduce(
-                  (accu, [a, b]: any) => ({
-                    ...accu,
-                    [a]: b,
-                  }),
-                  {}
-                ),
-            }
-          )
-        }
-      }
-
-      oldResult = undefined
-    }
-
-    return result!
-  }
-}
-
-type WorkFn = () => void
-
-export function incrementalMemo<TDeps extends readonly any[], TResult>(
-  getDeps: () => [...TDeps],
-  getInitialValue: (...args: NoInfer<[...TDeps]>) => TResult,
-  schedule: (
-    ...args: NoInfer<[...TDeps]>
-  ) => (resultRef: {
-    current: TResult
-  }) => (scheduler: (workFn: WorkFn) => void) => void,
-  opts: {
-    key: any
-    onProgress: (
-      progress: number,
-      nextResult: TResult,
-      result?: TResult
-    ) => void
-    onChange: (result: TResult, previousResult?: TResult) => void
-    initialSync?: boolean
-    timeout?: number
-    debug?: () => any
-  }
-): () => TResult {
-  let oldDeps: any[]
-  let deps: any[]
-  let result: TResult | undefined
-  let nextResultRef: { current: TResult }
-  let tasks: WorkFn[] = []
-  let totalTaskCount = 0
-  let resultStartTime: number
-  let batchIndex = 0
-  let progress = 0
-  let working = false
-  let callback: ReturnType<typeof requestIdleCallback>
-
-  const timeout = opts.timeout ?? 100
-
-  const onProgress = (latestResult: TResult, previousResult?: TResult) => {
-    progress = 1 - tasks.length / totalTaskCount
-    opts.onProgress(progress, latestResult, previousResult)
-  }
-
-  return () => {
-    const scheduleFn = (workFn: WorkFn) => {
-      totalTaskCount++
-      tasks.push(workFn)
-    }
-
-    const newDeps = getDeps()
-
-    let first = false
-
-    if (!deps) {
-      first = true
-      deps = []
-      result = getInitialValue(...newDeps)
-    }
-
-    const depsChanged =
-      newDeps.length !== deps.length ||
-      newDeps.some((dep: any, index: number) => deps[index] !== dep)
-
-    if (depsChanged) {
-      cancelIdleCallback(callback)
-      oldDeps = deps
-      deps = newDeps
-      totalTaskCount = 0
-      tasks = []
-      nextResultRef = { current: getInitialValue(...newDeps) }
-      resultStartTime = Date.now()
-      schedule(...newDeps)(nextResultRef)(scheduleFn)
-    }
-
-    const commitResult = () => {
-      cancelIdleCallback(callback)
-
-      if (opts.key && opts.debug) {
-        if (opts?.debug()) {
-          const resultEndTime =
-            Math.round((Date.now() - resultStartTime!) * 100) / 100
-          const resultFpsPercentage = resultEndTime / batchIndex / 16
-
-          console.info(
-            `%c⏱ ${resultEndTime} ms / ${batchIndex} tasks = ${Math.round(
-              resultEndTime / batchIndex
-            )} ms/task`,
-            `
-      font-size: .6rem;
-      font-weight: bold;
-      color: hsl(${Math.max(
-        0,
-        Math.min(120 - 120 * resultFpsPercentage, 120)
-      )}deg 100% 31%);`,
-            opts?.key,
-            {
-              length: `${oldDeps.length} -> ${deps.length}`,
-              ...deps
-                .map((_, index) => {
-                  if (oldDeps[index] !== deps[index]) {
-                    return [index, oldDeps[index], deps[index]]
-                  }
-
-                  return false
-                })
-                .filter(Boolean)
-                .reduce(
-                  (accu, [a, b]: any) => ({
-                    ...accu,
-                    [a]: b,
-                  }),
-                  {}
-                ),
-            }
-          )
-        }
-      }
-
-      working = false
-      let previousResult = result
-      result = nextResultRef.current
-      onProgress(result, previousResult)
-      opts.onChange(result, previousResult)
-    }
-
-    if (opts.initialSync && first) {
-      batchIndex = 1
-      first = false
-      for (let i = 0; i < tasks.length; i++) {
-        tasks[i]()
-      }
-      tasks = []
-      commitResult()
-    } else if (!working && tasks.length) {
-      cancelIdleCallback(callback)
-      working = true
-      batchIndex = 0
-
-      const workLoop = (deadline: any) => {
-        while (tasks.length && deadline.timeRemaining() > 0) {
-          tasks.shift()!()
-        }
-
-        if (!tasks.length) {
-          commitResult()
-        } else {
-          ++batchIndex
-          onProgress(nextResultRef.current, result)
-          callback = requestIdleCallback(workLoop, { timeout })
-        }
+          opts?.key
+        )
       }
-
-      callback = requestIdleCallback(workLoop, { timeout })
     }
 
     return result!
   }
 }
-
-// opts?.onChange?.(result, oldResult)