@tanstack/table-core 8.0.0-alpha.27 → 8.0.0-alpha.32

package/src/features/Pagination.ts

@@ -21,10 +21,9 @@ export type PaginationTableState = {
 export type PaginationOptions<TGenerics extends AnyGenerics> = {
   onPaginationChange?: OnChangeFn<PaginationState>
   autoResetPageIndex?: boolean
-  paginateRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    rowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
+  getPaginationRowModel?: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
 }
 
 export type PaginationDefaultOptions = {
@@ -48,6 +47,7 @@ export type PaginationInstance<TGenerics extends AnyGenerics> = {
   nextPage: () => void
   getPrePaginationRowModel: () => RowModel<TGenerics>
   getPaginationRowModel: () => RowModel<TGenerics>
+  _getPaginationRowModel?: () => RowModel<TGenerics>
   getPageCount: () => number
 }
 
@@ -187,7 +187,7 @@ export const Pagination = {
       getCanPreviousPage: () => instance.getState().pagination.pageIndex > 0,
 
       getCanNextPage: () => {
-        const { pageIndex, pageSize } = instance.getState().pagination
+        const { pageIndex } = instance.getState().pagination
 
         const pageCount = instance.getPageCount()
 
@@ -199,13 +199,7 @@ export const Pagination = {
           return false
         }
 
-        return (
-          pageIndex <
-          Math.ceil(
-            instance.getPrePaginationRowModel().rows.length / pageSize
-          ) -
-            1
-        )
+        return pageIndex < pageCount - 1
       },
 
       previousPage: () => {
@@ -219,24 +213,21 @@ export const Pagination = {
       },
 
       getPrePaginationRowModel: () => instance.getExpandedRowModel(),
-      getPaginationRowModel: memo(
-        () => [
-          instance.getState().pagination,
-          instance.getExpandedRowModel(),
-          instance.options.paginateRowsFn,
-        ],
-        (_pagination, rowModel, paginateRowsFn) => {
-          if (!paginateRowsFn || !rowModel.rows.length) {
-            return rowModel
-          }
+      getPaginationRowModel: () => {
+        if (
+          !instance._getPaginationRowModel &&
+          instance.options.getPaginationRowModel
+        ) {
+          instance._getPaginationRowModel =
+            instance.options.getPaginationRowModel(instance)
+        }
 
-          return paginateRowsFn(instance, rowModel)
-        },
-        {
-          key: 'getPaginationRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        if (!instance._getPaginationRowModel) {
+          return instance.getPrePaginationRowModel()
         }
-      ),
+
+        return instance._getPaginationRowModel()
+      },
 
       getPageCount: () => {
         const { pageCount } = instance.getState().pagination

package/src/features/Sorting.ts

@@ -84,10 +84,9 @@ export type SortingOptions<TGenerics extends AnyGenerics> = {
   enableMultiRemove?: boolean
   enableMultiSort?: boolean
   sortDescFirst?: boolean
-  sortRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    rowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
+  getSortedRowModel?: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
   maxMultiSortColCount?: number
   isMultiSortEvent?: (e: MouseEvent | TouchEvent) => boolean
 }
@@ -121,6 +120,7 @@ export type SortingInstance<TGenerics extends AnyGenerics> = {
   ) => undefined | PropGetterValue<ToggleSortingProps, TGetter>
   getPreSortedRowModel: () => RowModel<TGenerics>
   getSortedRowModel: () => RowModel<TGenerics>
+  _getSortedRowModel?: () => RowModel<TGenerics>
 }
 
 //
@@ -177,6 +177,8 @@ export const Sorting = {
 
     return {
       _notifySortingReset: () => {
+        instance._notifyGroupingReset()
+
         if (!registered) {
           registered = true
           return
@@ -428,7 +430,7 @@ export const Sorting = {
           title: canSort ? 'Toggle Sorting' : undefined,
           onClick: canSort
             ? (e: MouseEvent | TouchEvent) => {
-                e.persist()
+                e.persist?.()
                 column.toggleSorting?.(
                   undefined,
                   column.getCanMultiSort()
@@ -443,27 +445,21 @@ export const Sorting = {
       },
 
       getPreSortedRowModel: () => instance.getGlobalFilteredRowModel(),
-      getSortedRowModel: memo(
-        () => [
-          instance.getState().sorting,
-          instance.getGlobalFilteredRowModel(),
-          instance.options.sortRowsFn,
-        ],
-        (sorting, rowModel, sortingFn) => {
-          if (!sortingFn || !sorting?.length) {
-            return rowModel
-          }
+      getSortedRowModel: () => {
+        if (
+          !instance._getSortedRowModel &&
+          instance.options.getSortedRowModel
+        ) {
+          instance._getSortedRowModel =
+            instance.options.getSortedRowModel(instance)
+        }
 
-          return sortingFn(instance, rowModel)
-        },
-        {
-          key: 'getSortedRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => {
-            instance._notifyGroupingReset()
-          },
+        if (!instance._getSortedRowModel) {
+          return instance.getPreSortedRowModel()
         }
-      ),
+
+        return instance._getSortedRowModel()
+      },
     }
   },
 }

package/src/index.tsx

@@ -15,9 +15,11 @@ export * from './features/Sorting'
 export * from './features/Visibility'
 export * from './features/Expanding'
 export * from './utils'
-export * from './utils/columnFilterRowsFn'
-export * from './utils/globalFilterRowsFn'
-export * from './utils/sortRowsFn'
-export * from './utils/groupRowsFn'
-export * from './utils/expandRowsFn'
-export * from './utils/paginateRowsFn'
+export * from './utils/getCoreRowModelSync'
+export * from './utils/getCoreRowModelAsync'
+export * from './utils/getColumnFilteredRowModelSync'
+export * from './utils/getGlobalFilteredRowModelSync'
+export * from './utils/getSortedRowModelSync'
+export * from './utils/getGroupedRowModel'
+export * from './utils/getExpandedRowModel'
+export * from './utils/getPaginationRowModel'

package/src/types.ts

@@ -3,6 +3,7 @@ import {
   CoreColumnDef,
   CoreOptions,
   CoreRow,
+  CoreTableState,
   TableCore,
 } from './core'
 import {
@@ -84,6 +85,7 @@ export type DefaultGenerics = {
   AggregationFns: object
   Render: unknown
   ColumnMeta: object
+  TableMeta: object
 }
 
 export type AnyRender = (Comp: any, props: any) => any
@@ -138,7 +140,8 @@ export type Options<TGenerics extends AnyGenerics> = CoreOptions<TGenerics> &
 export type Updater<T> = T | ((old: T) => T)
 export type OnChangeFn<T> = (updaterOrValue: Updater<T>, value: T) => void
 
-export type TableState = VisibilityTableState &
+export type TableState = CoreTableState &
+  VisibilityTableState &
   ColumnOrderTableState &
   ColumnPinningTableState &
   FiltersTableState &

package/src/utils/getColumnFilteredRowModelAsync.ts

@@ -0,0 +1,117 @@
+import { TableInstance, RowModel, AnyGenerics, Row } from '../types'
+import { incrementalMemo, memo } from '../utils'
+import {
+  filterRowModelFromLeafs,
+  filterRowModelFromRoot,
+} from './filterRowsUtils'
+
+export function getColumnFilteredRowModelAsync<
+  TGenerics extends AnyGenerics
+>(opts?: {
+  initialSync?: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    incrementalMemo(
+      () => [instance.getState().columnFilters, instance.getCoreRowModel()],
+      (_sorting, rowModel): RowModel<TGenerics> => {
+        return {
+          rows: rowModel.rows.slice(),
+          flatRows: [],
+          rowsById: rowModel.rowsById,
+        }
+      },
+      (columnFilters, 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('')
+
+        // if (!rowModel.rows.length || !columnFilters) {
+        //   rowModelRef.current = rowModel
+        // } else {
+        //   const filterFromLeafRows = instance.options.filterFromLeafRows
+
+        //   const filterRows = (
+        //     rowsToFilter: Row<TGenerics>[],
+        //     depth: number
+        //   ) => {
+        //     for (let i = 0; i < columnFilters.length; i++) {
+        //       const { id: columnId, value: filterValue } = columnFilters[i]
+        //       // Find the columnFilters column
+        //       const column = instance.getColumn(columnId)
+
+        //       if (!column) {
+        //         if (process.env.NODE_ENV !== 'production') {
+        //           console.warn(
+        //             `Table: Could not find a column with id: ${columnId}`
+        //           )
+        //         }
+        //         throw new Error()
+        //       }
+
+        //       if (depth === 0) {
+        //         const preFilteredRows = [...rowsToFilter]
+        //         column.getPreFilteredRows = () => preFilteredRows
+        //       }
+
+        //       const filterFn = instance.getColumnFilterFn(column.id)
+
+        //       if (!filterFn) {
+        //         if (process.env.NODE_ENV !== 'production') {
+        //           console.warn(
+        //             `Could not find a valid 'column.filterType' for column with the ID: ${column.id}.`
+        //           )
+        //         }
+        //         continue
+        //       }
+
+        //       // Pass the rows, id, filterValue and column to the filterFn
+        //       // to get the filtered rows back
+        //       rowsToFilter = filterFn(rowsToFilter, [columnId], filterValue)
+        //     }
+
+        //     return rowsToFilter
+        //   }
+
+        //   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 = () => rowModelRef.current.rows
+        // })
+      },
+      {
+        key: 'getColumnFilteredRowModelAsync',
+        initialSync: opts?.initialSync,
+        onProgress: progress => {
+          instance.setState(old => ({
+            ...old,
+            columnFiltersProgress: progress,
+          }))
+        },
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance._notifySortingReset()
+        },
+      }
+    )
+}

package/src/utils/getColumnFilteredRowModelSync.ts

@@ -0,0 +1,97 @@
+import { TableInstance, RowModel, AnyGenerics, Row } from '../types'
+import { memo } from '../utils'
+import {
+  filterRowModelFromLeafs,
+  filterRowModelFromRoot,
+} from './filterRowsUtils'
+
+export function getColumnFilteredRowModelSync<
+  TGenerics extends AnyGenerics
+>(): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.getState().columnFilters, instance.getCoreRowModel()],
+      (columnFilters, rowModel) => {
+        const columnFilteredRowModel: RowModel<TGenerics> = (() => {
+          if (!rowModel.rows.length || !columnFilters) {
+            return rowModel
+          }
+
+          const filterFromLeafRows = instance.options.filterFromLeafRows
+
+          const filterRows = (
+            rowsToFilter: Row<TGenerics>[],
+            depth: number
+          ) => {
+            for (let i = 0; i < columnFilters.length; i++) {
+              const { id: columnId, value: filterValue } = columnFilters[i]
+              // Find the columnFilters column
+              const column = instance.getColumn(columnId)
+
+              if (!column) {
+                if (process.env.NODE_ENV !== 'production') {
+                  console.warn(
+                    `Table: Could not find a column with id: ${columnId}`
+                  )
+                }
+                throw new Error()
+              }
+
+              if (depth === 0) {
+                const preFilteredRows = [...rowsToFilter]
+                column.getPreFilteredRows = () => preFilteredRows
+              }
+
+              const filterFn = instance.getColumnFilterFn(column.id)
+
+              if (!filterFn) {
+                if (process.env.NODE_ENV !== 'production') {
+                  console.warn(
+                    `Could not find a valid 'column.filterType' for column with the ID: ${column.id}.`
+                  )
+                }
+                continue
+              }
+
+              // Pass the rows, id, filterValue and column to the filterFn
+              // to get the filtered rows back
+              rowsToFilter = filterFn(rowsToFilter, [columnId], filterValue)
+            }
+
+            return rowsToFilter
+          }
+
+          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 = () => columnFilteredRowModel.rows
+        })
+
+        return columnFilteredRowModel
+      },
+      {
+        key: 'getColumnFilteredRowModelSync',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance._notifySortingReset()
+        },
+      }
+    )
+}

package/src/utils/getCoreRowModelAsync.ts

@@ -0,0 +1,103 @@
+import { TableInstance, Row, RowModel, AnyGenerics } from '../types'
+import { getBatchGroups, incrementalMemo } from '../utils'
+
+export function getCoreRowModelAsync<TGenerics extends AnyGenerics>(opts?: {
+  initialSync: boolean
+}): (instance: TableInstance<TGenerics>) => () => RowModel<TGenerics> {
+  return instance =>
+    incrementalMemo(
+      () => [instance.options.data, instance.getAllLeafColumns()],
+      () => {
+        const rows: Row<TGenerics>[] = []
+        const flatRows: Row<TGenerics>[] = []
+        const rowsById: Record<string, Row<TGenerics>> = {}
+
+        return { rows, flatRows, rowsById }
+      },
+      (data, leafColumns) => rowModelRef => scheduleTask => {
+        const accessRows = (
+          originalRows: TGenerics['Row'][],
+          depth = 0,
+          parent?: Row<TGenerics>
+        ) => {
+          const batchGroups = getBatchGroups(originalRows, 2000)
+
+          for (let i = 0; i < batchGroups.length; i++) {
+            const batchGroup = batchGroups[i]
+            scheduleTask(() => {
+              for (let i = 0; i < batchGroup.items.length; i++) {
+                const originalRow = batchGroup.items[i]
+                const rowIndex = batchGroup.start + i
+                const id = instance.getRowId(originalRow, rowIndex, parent)
+
+                if (!id) {
+                  if (process.env.NODE_ENV !== 'production') {
+                    throw new Error(`getRowId expected an ID, but got ${id}`)
+                  }
+                }
+
+                const values: Record<string, any> = {}
+
+                for (let i = 0; i < leafColumns.length; i++) {
+                  const column = leafColumns[i]
+                  if (column && column.accessorFn) {
+                    values[column.id] = column.accessorFn(originalRow, rowIndex)
+                  }
+                }
+
+                // Make the row
+                const row = instance.createRow(
+                  id,
+                  originalRow,
+                  rowIndex,
+                  depth,
+                  values
+                )
+
+                // Push instance row into the parentRows array
+                if (parent) {
+                  parent.subRows.push(row)
+                } else {
+                  rowModelRef.current.rows.push(row)
+                }
+                // Keep track of every row in a flat array
+                rowModelRef.current.flatRows.push(row)
+                // Also keep track of every row by its ID
+                rowModelRef.current.rowsById[id] = row
+
+                // Get the original subrows
+                if (instance.options.getSubRows) {
+                  const originalSubRows = instance.options.getSubRows(
+                    originalRow,
+                    rowIndex
+                  )
+
+                  // Then recursively access them
+                  if (originalSubRows?.length) {
+                    row.originalSubRows = originalSubRows
+                    row.subRows = []
+
+                    accessRows(row.originalSubRows, depth + 1, row)
+                  }
+                }
+              }
+            })
+          }
+        }
+
+        accessRows(data)
+      },
+      {
+        key: 'getRowModel',
+        initialSync: opts?.initialSync,
+        onProgress: progress => {
+          instance.setState(old => ({ ...old, coreProgress: progress }))
+        },
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance._notifyFiltersReset()
+          instance._notifyRowSelectionReset()
+        },
+      }
+    )
+}

package/src/utils/getCoreRowModelSync.ts

@@ -0,0 +1,105 @@
+import { TableInstance, Row, RowModel, AnyGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getCoreRowModelSync<TGenerics extends AnyGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [instance.options.data],
+      (
+        data
+      ): {
+        rows: Row<TGenerics>[]
+        flatRows: Row<TGenerics>[]
+        rowsById: Record<string, Row<TGenerics>>
+      } => {
+        // Access the row model using initial columns
+        const rows: Row<TGenerics>[] = []
+        const flatRows: Row<TGenerics>[] = []
+        const rowsById: Record<string, Row<TGenerics>> = {}
+
+        const leafColumns = instance.getAllLeafColumns()
+
+        const accessRow = (
+          originalRow: TGenerics['Row'],
+          rowIndex: number,
+          depth = 0,
+          parentRows: Row<TGenerics>[],
+          parent?: Row<TGenerics>
+        ) => {
+          const id = instance.getRowId(originalRow, rowIndex, parent)
+
+          if (!id) {
+            if (process.env.NODE_ENV !== 'production') {
+              throw new Error(`getRowId expected an ID, but got ${id}`)
+            }
+          }
+
+          const values: Record<string, any> = {}
+
+          for (let i = 0; i < leafColumns.length; i++) {
+            const column = leafColumns[i]
+            if (column && column.accessorFn) {
+              values[column.id] = column.accessorFn(originalRow, rowIndex)
+            }
+          }
+
+          // Make the row
+          const row = instance.createRow(
+            id,
+            originalRow,
+            rowIndex,
+            depth,
+            values
+          )
+
+          // Push instance row into the parentRows array
+          parentRows.push(row)
+          // Keep track of every row in a flat array
+          flatRows.push(row)
+          // Also keep track of every row by its ID
+          rowsById[id] = row
+
+          // Get the original subrows
+          if (instance.options.getSubRows) {
+            const originalSubRows = instance.options.getSubRows(
+              originalRow,
+              rowIndex
+            )
+
+            // Then recursively access them
+            if (originalSubRows?.length) {
+              row.originalSubRows = originalSubRows
+              const subRows: Row<TGenerics>[] = []
+
+              for (let i = 0; i < row.originalSubRows.length; i++) {
+                accessRow(
+                  row.originalSubRows[i] as TGenerics['Row'],
+                  i,
+                  depth + 1,
+                  subRows,
+                  row
+                )
+              }
+              row.subRows = subRows
+            }
+          }
+        }
+
+        for (let i = 0; i < data.length; i++) {
+          accessRow(data[i] as TGenerics['Row'], i, 0, rows)
+        }
+
+        return { rows, flatRows, rowsById }
+      },
+      {
+        key: 'getRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        onChange: () => {
+          instance._notifyFiltersReset()
+          instance._notifyRowSelectionReset()
+        },
+      }
+    )
+}

package/src/utils/getExpandedRowModel.ts

@@ -0,0 +1,58 @@
+import { TableInstance, Row, RowModel, AnyGenerics } from '../types'
+import { memo } from '../utils'
+
+export function getExpandedRowModel<TGenerics extends AnyGenerics>(): (
+  instance: TableInstance<TGenerics>
+) => () => RowModel<TGenerics> {
+  return instance =>
+    memo(
+      () => [
+        instance.getState().expanded,
+        instance.getGroupedRowModel(),
+        instance.options.paginateExpandedRows,
+      ],
+      (expanded, rowModel, paginateExpandedRows) => {
+        if (
+          !rowModel.rows.length ||
+          // Do not expand if rows are not included in pagination
+          !paginateExpandedRows ||
+          (expanded !== true && !Object.keys(expanded ?? {}).length)
+        ) {
+          return rowModel
+        }
+
+        return expandRows(rowModel, instance)
+      },
+      {
+        key: 'getExpandedRowModel',
+        debug: () => instance.options.debugAll ?? instance.options.debugTable,
+      }
+    )
+}
+
+export function expandRows<TGenerics extends AnyGenerics>(
+  rowModel: RowModel<TGenerics>,
+  instance: TableInstance<TGenerics>
+) {
+  const expandedRows: Row<TGenerics>[] = []
+
+  const handleRow = (row: Row<TGenerics>) => {
+    expandedRows.push(row)
+
+    if (
+      instance.options.expandSubRows &&
+      row.subRows?.length &&
+      instance.getIsRowExpanded(row.id)
+    ) {
+      row.subRows.forEach(handleRow)
+    }
+  }
+
+  rowModel.rows.forEach(handleRow)
+
+  return {
+    rows: expandedRows,
+    flatRows: rowModel.flatRows,
+    rowsById: rowModel.rowsById,
+  }
+}