@tanstack/table-core 8.0.0-alpha.9 → 8.0.0-beta.0

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,159 @@
+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)
+        ) {
+          for (let i = 0; i < rowModel.flatRows.length; i++) {
+            rowModel.flatRows[i]!.columnFilters = {}
+            rowModel.flatRows[i]!.columnFiltersMeta = {}
+          }
+          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.columnFilters = {}
+
+          if (resolvedColumnFilters.length) {
+            for (let i = 0; i < resolvedColumnFilters.length; i++) {
+              currentColumnFilter = resolvedColumnFilters[i]!
+              const id = currentColumnFilter.id
+
+              // Tag the row with the column filter state
+              row.columnFilters[id] = currentColumnFilter.filterFn(
+                row,
+                id,
+                currentColumnFilter.resolvedValue,
+                filterMeta => {
+                  row.columnFiltersMeta[id] = filterMeta
+                }
+              )
+            }
+          }
+
+          if (resolvedGlobalFilters.length) {
+            for (let i = 0; i < resolvedGlobalFilters.length; i++) {
+              currentGlobalFilter = resolvedGlobalFilters[i]!
+              const id = currentGlobalFilter.id
+              // Tag the row with the first truthy global filter state
+              if (
+                currentGlobalFilter.filterFn(
+                  row,
+                  id,
+                  currentGlobalFilter.resolvedValue,
+                  filterMeta => {
+                    row.columnFiltersMeta[id] = filterMeta
+                  }
+                )
+              ) {
+                row.columnFilters.__global__ = true
+                break
+              }
+            }
+
+            if (row.columnFilters.__global__ !== true) {
+              row.columnFilters.__global__ = false
+            }
+          }
+        }
+
+        const filterRowsImpl = (row: Row<TGenerics>) => {
+          // Horizontally filter rows through each column
+          for (let i = 0; i < filterableIds.length; i++) {
+            if (row.columnFilters[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._autoResetPageIndex()
+        },
+      }
+    )
+}

package/src/utils/getGroupedRowModel.ts

@@ -0,0 +1,175 @@
+import { createRow } from '../core/row'
+import { TableInstance, Row, RowModel, TableGenerics } from '../types'
+import { flattenBy, memo } from '../utils'
+
+export function getGroupedRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.getState().grouping, instance.getPreGroupedRowModel()],
+      (grouping, rowModel) => {
+        if (!rowModel.rows.length || !grouping.length) {
+          return rowModel
+        }
+
+        // Filter the grouping list down to columns that exist
+        const existingGrouping = grouping.filter(columnId =>
+          instance.getColumn(columnId)
+        )
+
+        const groupedFlatRows: Row<TGenerics>[] = []
+        const groupedRowsById: Record<string, Row<TGenerics>> = {}
+        // const onlyGroupedFlatRows: Row[] = [];
+        // const onlyGroupedRowsById: Record<RowId, Row> = {};
+        // const nonGroupedFlatRows: Row[] = [];
+        // const nonGroupedRowsById: Record<RowId, Row> = {};
+
+        // Recursively group the data
+        const groupUpRecursively = (
+          rows: Row<TGenerics>[],
+          depth = 0,
+          parentId: string
+        ) => {
+          // This is the last level, just return the rows
+          if (depth === existingGrouping.length) {
+            return rows
+          }
+
+          const columnId = existingGrouping[depth]!
+
+          // Group the rows together for this level
+          const rowGroupsMap = groupBy(rows, columnId)
+
+          // Peform aggregations for each group
+          const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map(
+            ([groupingValue, groupedRows], index) => {
+              let id = `${columnId}:${groupingValue}`
+              id = parentId ? `${parentId}>${id}` : id
+
+              // First, Recurse to group sub rows before aggregation
+              const subRows = groupUpRecursively(groupedRows, depth + 1, id)
+
+              // Flatten the leaf rows of the rows in this group
+              const leafRows = depth
+                ? flattenBy(groupedRows, row => row.subRows)
+                : groupedRows
+
+              const row = createRow(instance, 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.getAggregationFn()
+
+                  if (aggregateFn) {
+                    row._groupingValuesCache[columnId] = aggregateFn(
+                      columnId,
+                      leafRows,
+                      groupedRows
+                    )
+
+                    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 => {
+                groupedFlatRows.push(subRow)
+                groupedRowsById[subRow.id] = subRow
+                // if (subRow.getIsGrouped?.()) {
+                //   onlyGroupedFlatRows.push(subRow);
+                //   onlyGroupedRowsById[subRow.id] = subRow;
+                // } else {
+                //   nonGroupedFlatRows.push(subRow);
+                //   nonGroupedRowsById[subRow.id] = subRow;
+                // }
+              })
+
+              return row
+            }
+          )
+
+          return aggregatedGroupedRows
+        }
+
+        const groupedRows = groupUpRecursively(rowModel.rows, 0, '')
+
+        groupedRows.forEach(subRow => {
+          groupedFlatRows.push(subRow)
+          groupedRowsById[subRow.id] = subRow
+          // if (subRow.getIsGrouped?.()) {
+          //   onlyGroupedFlatRows.push(subRow);
+          //   onlyGroupedRowsById[subRow.id] = subRow;
+          // } else {
+          //   nonGroupedFlatRows.push(subRow);
+          //   nonGroupedRowsById[subRow.id] = subRow;
+          // }
+        })
+
+        return {
+          rows: groupedRows,
+          flatRows: groupedFlatRows,
+          rowsById: groupedRowsById,
+        }
+      },
+      {
+        key: process.env.NODE_ENV === 'development' && 'getGroupedRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance._queue(() => {
+            instance._autoResetExpanded()
+            instance._autoResetPageIndex()
+          })
+        },
+      }
+    )
+}
+
+function groupBy<TGenerics extends TableGenerics>(
+  rows: Row<TGenerics>[],
+  columnId: string
+) {
+  const groupMap = new Map<any, Row<TGenerics>[]>()
+
+  return rows.reduce((map, row) => {
+    const resKey = `${row.getValue(columnId)}`
+    const previous = map.get(resKey)
+    if (!previous) {
+      map.set(resKey, [row])
+    } else {
+      map.set(resKey, [...previous, row])
+    }
+    return map
+  }, groupMap)
+}

package/src/utils/getPaginationRowModel.ts

@@ -0,0 +1,48 @@
+import { TableInstance, RowModel, TableGenerics } from '../types'
+import { memo } from '../utils'
+import { expandRows } from './getExpandedRowModel'
+
+export function getPaginationRowModel<TGenerics extends TableGenerics>(opts?: {
+  initialSync: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [
+        instance.getState().pagination,
+        instance.getPrePaginationRowModel(),
+      ],
+      (pagination, rowModel) => {
+        if (!rowModel.rows.length) {
+          return rowModel
+        }
+
+        const { pageSize, pageIndex } = pagination
+        let { rows, flatRows, rowsById } = rowModel
+        const pageStart = pageSize * pageIndex
+        const pageEnd = pageStart + pageSize
+
+        rows = rows.slice(pageStart, pageEnd)
+
+        if (!instance.options.paginateExpandedRows) {
+          return expandRows(
+            {
+              rows,
+              flatRows,
+              rowsById,
+            },
+            instance
+          )
+        }
+
+        return {
+          rows,
+          flatRows,
+          rowsById,
+        }
+      },
+      {
+        key: process.env.NODE_ENV === 'development' && 'getPaginationRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+      }
+    )
+}

package/src/utils/getSortedRowModel.ts

@@ -0,0 +1,116 @@
+import { TableInstance, Row, RowModel, TableGenerics } from '../types'
+import { SortingFn } from '../features/Sorting'
+import { memo } from '../utils'
+
+export function getSortedRowModel<TGenerics extends TableGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.getState().sorting, instance.getPreSortedRowModel()],
+      (sorting, rowModel) => {
+        if (!rowModel.rows.length || !sorting?.length) {
+          return rowModel
+        }
+
+        const sortingState = instance.getState().sorting
+
+        const sortedFlatRows: Row<TGenerics>[] = []
+
+        // Filter out sortings that correspond to non existing columns
+        const availableSorting = sortingState.filter(sort =>
+          instance.getColumn(sort.id).getCanSort()
+        )
+
+        const columnInfoById: Record<
+          string,
+          {
+            sortUndefined?: false | -1 | 1
+            invertSorting?: boolean
+            sortingFn: SortingFn<TGenerics>
+          }
+        > = {}
+
+        availableSorting.forEach(sortEntry => {
+          const column = instance.getColumn(sortEntry.id)
+
+          columnInfoById[sortEntry.id] = {
+            sortUndefined: column.columnDef.sortUndefined,
+            invertSorting: column.columnDef.invertSorting,
+            sortingFn: column.getSortingFn(),
+          }
+        })
+
+        const sortData = (rows: Row<TGenerics>[]) => {
+          // This will also perform a stable sorting using the row index
+          // if needed.
+          const sortedData = rows.slice()
+
+          sortedData.sort((rowA, rowB) => {
+            for (let i = 0; i < availableSorting.length; i += 1) {
+              const sortEntry = availableSorting[i]!
+              const columnInfo = columnInfoById[sortEntry.id]!
+              const isDesc = sortEntry?.desc ?? false
+
+              if (columnInfo.sortUndefined) {
+                const aValue = rowA.getValue(sortEntry.id)
+                const bValue = rowB.getValue(sortEntry.id)
+
+                const aUndefined = typeof aValue === 'undefined'
+                const bUndefined = typeof bValue === 'undefined'
+
+                if (aUndefined || bUndefined) {
+                  return aUndefined && bUndefined
+                    ? 0
+                    : aUndefined
+                    ? columnInfo.sortUndefined
+                    : -columnInfo.sortUndefined
+                }
+              }
+
+              // This function should always return in ascending order
+              let sortInt = columnInfo.sortingFn(rowA, rowB, sortEntry.id)
+
+              if (sortInt !== 0) {
+                if (isDesc) {
+                  sortInt *= -1
+                }
+
+                if (columnInfo.invertSorting) {
+                  sortInt *= -1
+                }
+
+                return sortInt
+              }
+            }
+
+            return rowA.index - rowB.index
+          })
+
+          // If there are sub-rows, sort them
+          sortedData.forEach(row => {
+            sortedFlatRows.push(row)
+            if (!row.subRows || row.subRows.length <= 1) {
+              return
+            }
+            row.subRows = sortData(row.subRows)
+          })
+
+          return sortedData
+        }
+
+        return {
+          rows: sortData(rowModel.rows),
+          flatRows: sortedFlatRows,
+          rowsById: rowModel.rowsById,
+        }
+      },
+      {
+        key: process.env.NODE_ENV === 'development' && 'getSortedRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance._autoResetPageIndex()
+        },
+      }
+    )
+}

package/src/utils.ts

@@ -0,0 +1,126 @@
+import { NoInfer, TableState, Updater } from './types'
+
+export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+export type RequiredKeys<T, K extends keyof T> = Omit<T, K> &
+  Required<Pick<T, K>>
+export type Overwrite<T, U extends { [TKey in keyof T]?: any }> = Omit<
+  T,
+  keyof U
+> &
+  U
+
+export type IfDefined<T, N> = 0 extends 1 & T ? N : T extends {} ? T : N
+
+export function functionalUpdate<T>(updater: Updater<T>, input: T): T {
+  return typeof updater === 'function'
+    ? (updater as (input: T) => T)(input)
+    : updater
+}
+
+export function noop() {
+  //
+}
+
+export function makeStateUpdater(key: keyof TableState, instance: unknown) {
+  return (updater: Updater<any>) => {
+    ;(instance as any).setState(<TTableState>(old: TTableState) => {
+      return {
+        ...old,
+        [key]: functionalUpdate(updater, (old as any)[key]),
+      }
+    })
+  }
+}
+
+type AnyFunction = (...args: any) => any
+
+export function isFunction<T extends AnyFunction>(d: any): d is T {
+  return d instanceof Function
+}
+
+export function flattenBy<TNode>(
+  arr: TNode[],
+  getChildren: (item: TNode) => TNode[]
+) {
+  const flat: TNode[] = []
+
+  const recurse = (subArr: TNode[]) => {
+    subArr.forEach(item => {
+      flat.push(item)
+      const children = getChildren(item)
+      if (children?.length) {
+        recurse(children)
+      }
+    })
+  }
+
+  recurse(arr)
+
+  return flat
+}
+
+export function memo<TDeps extends readonly any[], TResult>(
+  getDeps: () => [...TDeps],
+  fn: (...args: NoInfer<[...TDeps]>) => TResult,
+  opts: {
+    key: any
+    debug?: () => any
+    onChange?: (result: TResult) => void
+  }
+): () => TResult {
+  let deps: any[] = []
+  let result: TResult | undefined
+
+  return () => {
+    let depTime: number
+    if (opts.key && opts.debug) depTime = Date.now()
+
+    const newDeps = getDeps()
+
+    const depsChanged =
+      newDeps.length !== deps.length ||
+      newDeps.some((dep: any, index: number) => deps[index] !== dep)
+
+    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
+
+        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`,
+          `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+              0,
+              Math.min(120 - 120 * resultFpsPercentage, 120)
+            )}deg 100% 31%);`,
+          opts?.key
+        )
+      }
+    }
+
+    return result!
+  }
+}