@tanstack/table-core 8.0.0-alpha.30 → 8.0.0-alpha.36

package/src/utils/getGlobalFilteredRowModelAsync.ts

@@ -0,0 +1,97 @@
+import { TableInstance, RowModel, AnyGenerics, Row } from '../types'
+import { incrementalMemo, memo } from '../utils'
+import {
+  filterRowModelFromLeafs,
+  filterRowModelFromRoot,
+} from './filterRowsUtils'
+
+export function getGlobalFilteredRowModelAsync<
+  TGenerics extends AnyGenerics
+>(opts?: {
+  initialSync?: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    incrementalMemo(
+      () => [instance.getState().globalFilter, instance.getCoreRowModel()],
+      (_globalFilter, rowModel): RowModel<TGenerics> => {
+        return {
+          rows: rowModel.rows.slice(),
+          flatRows: [],
+          rowsById: rowModel.rowsById,
+        }
+      },
+      (globalFilter, rowModel) => rowModelRef => scheduleTask => {
+        // TODO: Figure out how to do scheduled filtering
+        // The trick will be batching those tasks in a way
+        // that makes them fast. JS work loops don't tend to do well with
+        // a high number of tasks that do one thing. Instead, shoot for each
+        // task to have a few thousand opts (or whatever amount is generally
+        // fast for most devices).
+        throw new Error('')
+
+        // const globalFilteredRowModel: RowModel<TGenerics> = (() => {
+        //   if (!rowModel.rows.length || !globalFilter) {
+        //     return rowModel
+        //   }
+
+        //   const filterFromLeafRows = instance.options.filterFromLeafRows
+
+        //   const filterFn = instance.getGlobalFilterFn()
+
+        //   if (!filterFn) {
+        //     if (process.env.NODE_ENV !== 'production') {
+        //       console.warn(`Could not find a valid 'globalFilterType'`)
+        //     }
+        //     return rowModel
+        //   }
+
+        //   const filterableColumns = instance
+        //     .getAllLeafColumns()
+        //     .filter(column => column.getCanGlobalFilter())
+
+        //   const filterableColumnIds = filterableColumns.map(d => d.id)
+
+        //   const filterRows = (rows: Row<TGenerics>[]) => {
+        //     return filterFn(rows, filterableColumnIds, globalFilter)
+        //   }
+
+        //   if (filterFromLeafRows) {
+        //     return filterRowModelFromLeafs(rowModel.rows, filterRows, instance)
+        //   }
+
+        //   return filterRowModelFromRoot(rowModel.rows, filterRows, instance)
+        // })()
+
+        // // Now that each filtered column has it's partially filtered rows,
+        // // lets assign the final filtered rows to all of the other columns
+        // const nonFilteredColumns = instance
+        //   .getAllLeafColumns()
+        //   .filter(
+        //     column =>
+        //       !instance.getState().columnFilters?.find(d => d.id === column.id)
+        //   )
+
+        // // This essentially enables faceted filter options to be built easily
+        // // using every column's preFilteredRows value
+
+        // nonFilteredColumns.forEach(column => {
+        //   column.getPreFilteredRows = () => globalFilteredRowModel.rows
+        // })
+
+        // return globalFilteredRowModel
+      },
+      {
+        key: 'getGlobalFilteredRowModelAsync',
+        initialSync: opts?.initialSync,
+        onProgress: progress => {
+          instance.setState(old => ({ ...old, globalFilterProgress: progress }))
+        },
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance.queue(() => {
+            instance._notifySortingReset()
+          })
+        },
+      }
+    )
+}

package/src/utils/getGlobalFilteredRowModelSync.ts

@@ -0,0 +1,76 @@
+import { TableInstance, RowModel, AnyGenerics, Row } from '../types'
+import { memo } from '../utils'
+import {
+  filterRowModelFromLeafs,
+  filterRowModelFromRoot,
+} from './filterRowsUtils'
+
+export function getGlobalFilteredRowModelSync<
+  TGenerics extends AnyGenerics
+>(): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.getState().globalFilter, instance.getCoreRowModel()],
+      (globalFilter, rowModel) => {
+        const globalFilteredRowModel: RowModel<TGenerics> = (() => {
+          if (!rowModel.rows.length || !globalFilter) {
+            return rowModel
+          }
+
+          const filterFromLeafRows = instance.options.filterFromLeafRows
+
+          const filterFn = instance.getGlobalFilterFn()
+
+          if (!filterFn) {
+            if (process.env.NODE_ENV !== 'production') {
+              console.warn(`Could not find a valid 'globalFilterType'`)
+            }
+            return rowModel
+          }
+
+          const filterableColumns = instance
+            .getAllLeafColumns()
+            .filter(column => column.getCanGlobalFilter())
+
+          const filterableColumnIds = filterableColumns.map(d => d.id)
+
+          const filterRows = (rows: Row<TGenerics>[]) => {
+            return filterFn(rows, filterableColumnIds, globalFilter)
+          }
+
+          if (filterFromLeafRows) {
+            return filterRowModelFromLeafs(rowModel.rows, filterRows, instance)
+          }
+
+          return filterRowModelFromRoot(rowModel.rows, filterRows, instance)
+        })()
+
+        // Now that each filtered column has it's partially filtered rows,
+        // lets assign the final filtered rows to all of the other columns
+        const nonFilteredColumns = instance
+          .getAllLeafColumns()
+          .filter(
+            column =>
+              !instance.getState().columnFilters?.find(d => d.id === column.id)
+          )
+
+        // This essentially enables faceted filter options to be built easily
+        // using every column's preFilteredRows value
+
+        nonFilteredColumns.forEach(column => {
+          column.getPreFilteredRows = () => globalFilteredRowModel.rows
+        })
+
+        return globalFilteredRowModel
+      },
+      {
+        key: 'getGlobalFilteredRowModelSync',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance.queue(() => {
+            instance._notifySortingReset()
+          })
+        },
+      }
+    )
+}

package/src/utils/getGroupedRowModel.ts

@@ -0,0 +1,191 @@
+import { TableInstance, Row, RowModel, AnyGenerics } from '../types'
+import { flattenBy, memo } from '../utils'
+
+export function getGroupedRowModelSync<TGenerics extends AnyGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.getState().grouping, instance.getSortedRowModel()],
+      (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)
+        )
+
+        // 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.aggregationType) {
+              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[] = [];
+        // 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 values = aggregateRowsToValues(leafRows, groupedRows, depth)
+
+              const row = instance.createRow(
+                id,
+                undefined,
+                index,
+                depth,
+                values
+              )
+
+              Object.assign(row, {
+                groupingColumnId: columnId,
+                groupingValue,
+                subRows,
+                leafRows,
+              })
+
+              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: 'getGroupedRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance.queue(() => {
+            instance._notifyExpandedReset()
+          })
+        },
+      }
+    )
+}
+
+function groupBy<TGenerics extends AnyGenerics>(
+  rows: Row<TGenerics>[],
+  columnId: string
+) {
+  const groupMap = new Map<any, Row<TGenerics>[]>()
+
+  return rows.reduce((map, row) => {
+    const resKey = `${row.values[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,45 @@
+import { TableInstance, RowModel, AnyGenerics } from '../types'
+import { memo } from '../utils'
+import { expandRows } from './getExpandedRowModel'
+
+export function getPaginationRowModel<TGenerics extends AnyGenerics>(opts?: {
+  initialSync: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.getState().pagination, instance.getExpandedRowModel()],
+      (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: 'getPaginationRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+      }
+    )
+}

package/src/utils/getSortedRowModelAsync.ts

@@ -0,0 +1,201 @@
+import { TableInstance, Row, RowModel, AnyGenerics } from '../types'
+import { SortingFn } from '../features/Sorting'
+import { incrementalMemo, memo } from '../utils'
+
+export function getSortedRowModelSync<TGenerics extends AnyGenerics>(opts?: {
+  initialSync?: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    incrementalMemo(
+      () => [instance.getState().sorting, instance.getGlobalFilteredRowModel()],
+      (_sorting, rowModel): RowModel<TGenerics> => {
+        return {
+          rows: rowModel.rows.slice(),
+          flatRows: [],
+          rowsById: rowModel.rowsById,
+        }
+      },
+      (sorting, rowModel) => rowModelRef => scheduleTask => {
+        // TODO: Figure out how to do async sorting
+        // We probably need to use a sorting algo that is "divide and
+        // conquer", since that will probably distribute the easiest into
+        // separate tasks.  The trick will be batching those tasks in a way
+        // that makes them fast. JS work loops don't tend to do well with
+        // a high number of tasks that do one thing. Instead, shoot for each
+        // task to have a few thousand opts (or whatever amount is generally
+        // fast for most devices).
+
+        throw new Error()
+
+        // if (!rowModel.rows.length || !sorting?.length) {
+        //   rowModelRef.current = rowModel
+        //   return
+        // }
+
+        // const sortingState = instance.getState().sorting
+
+        // const sortedFlatRows: Row<TGenerics>[] = []
+
+        // // Filter out sortings that correspond to non existing columns
+        // const availableSorting = sortingState.filter(sort =>
+        //   instance.getColumnCanSort(sort.id)
+        // )
+
+        // const sorters = availableSorting.map(columnSorting => {
+        //   const column = instance.getColumn(columnSorting.id)!
+        //   const sortingFn = instance.getColumnSortingFn(columnSorting.id)!
+
+        //   return {
+        //     id: columnSorting.id,
+        //     compare: (rowA: Row<TGenerics>, rowB: Row<TGenerics>) =>
+        //       sortingFn(rowA, rowB, columnSorting.id),
+        //     desc: columnSorting.desc,
+        //     invertSorting: column.invertSorting,
+        //     sortUndefined: column.sortUndefined,
+        //   }
+        // })
+
+        // const sortData = (rows: Row<TGenerics>[]) => {
+        //   // This will also perform a stable sorting using the row index
+        //   // if needed.
+
+        //   const sortedData = quicksort(rows, sorters)
+
+        //   // If there are sub-rows, sort them
+        //   sortedData.forEach(row => {
+        //     rowModelRef.current.flatRows.push(row)
+        //     if (!row.subRows || row.subRows.length <= 1) {
+        //       return
+        //     }
+        //     row.subRows = sortData(row.subRows)
+        //   })
+
+        //   return sortedData
+        // }
+
+        // sortData(rowModelRef.current.rows)
+      },
+      {
+        key: 'getSortedRowModel',
+        initialSync: opts?.initialSync,
+        onProgress: progress => {
+          instance.setState(old => ({ ...old, sortingProgress: progress }))
+        },
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance.queue(() => {
+            instance._notifyGroupingReset()
+          })
+        },
+      }
+    )
+}
+
+type Sorter<TGenerics extends AnyGenerics> = {
+  id: string
+  compare: (a: Row<TGenerics>, b: Row<TGenerics>) => number
+  desc?: boolean
+  sortUndefined?: false | -1 | 1
+  invertSorting?: boolean
+}
+
+export function quicksort<TGenerics extends AnyGenerics>(
+  rows: Row<TGenerics>[],
+  sorters: Sorter<TGenerics>[]
+): Row<TGenerics>[] {
+  if (!rows.length) {
+    return rows
+  }
+
+  // Copy the rows so we can mutate the order
+  rows = rows.slice()
+
+  // Start the quicksort recursion
+  recurse(0, rows.length - 1)
+
+  // Return the rows
+  return rows
+
+  function recurse(start: number, end: number) {
+    const pivotIndex = pivot(start, end)
+
+    if (start < pivotIndex - 1) {
+      recurse(start, pivotIndex - 1)
+    }
+
+    if (pivotIndex < end) {
+      recurse(pivotIndex + 1, end)
+    }
+  }
+
+  function pivot(start: number, end: number) {
+    const pivotIndex = Math.floor((start + end) / 2)
+    let i = start
+    let j = end
+
+    const compare = (a: number, b: number) => {
+      const rowA = rows[a]
+      const rowB = rows[b]
+
+      for (let i = 0; i < sorters.length; i += 1) {
+        const sorter = sorters[i]!
+        const isDesc = sorter?.desc ?? false
+
+        if (sorter.sortUndefined) {
+          const aValue = rowA.values[sorter.id]
+          const bValue = rowB.values[sorter.id]
+
+          const aUndefined = typeof aValue === 'undefined'
+          const bUndefined = typeof bValue === 'undefined'
+
+          if (aUndefined || bUndefined) {
+            if (aUndefined !== bUndefined) {
+              return aUndefined ? sorter.sortUndefined : -sorter.sortUndefined
+            }
+          }
+        }
+
+        // This function should always return in ascending order
+        let sortInt = sorter.compare(rowA, rowB)
+
+        if (sortInt !== 0) {
+          if (isDesc) {
+            sortInt *= -1
+          }
+
+          if (sorter.invertSorting) {
+            sortInt *= -1
+          }
+
+          return sortInt
+        }
+      }
+
+      return rowA.index < rowB.index ? -1 : 1
+    }
+
+    while (i <= j) {
+      while (compare(i, pivotIndex) < 0) {
+        i++
+      }
+
+      while (compare(pivotIndex, j) < 0) {
+        j--
+      }
+
+      if (i <= j) {
+        swap(rows, i, j)
+        i++
+        j--
+      }
+    }
+
+    return i
+  }
+
+  function swap<T>(arr: T[], a: number, b: number) {
+    const t = arr[a]
+    arr[a] = arr[b]
+    arr[b] = t
+  }
+}