@tanstack/react-table 8.0.0-alpha.2 → 8.0.0-alpha.5

package/src/features/Headers.ts

@@ -16,6 +16,7 @@ import {
 import { propGetter, memo, flexRender } from '../utils'
 
 import * as ColumnSizing from './ColumnSizing'
+import * as Sorting from './Sorting'
 
 export type HeadersRow<
   TData,
@@ -240,8 +241,7 @@ export function createRow<
       _ => {
         return row.getAllCells().filter(cell => cell.column.getIsVisible())
       },
-      'row._getAllVisibleCells',
-      instance.options.debug
+      { key: 'row._getAllVisibleCells', debug: instance.options.debug }
     ),
     getVisibleCells: memo(
       () => [
@@ -250,8 +250,7 @@ export function createRow<
         row.getRightVisibleCells(),
       ],
       (left, center, right) => [...left, ...center, ...right],
-      'row.getVisibleCells',
-      instance.options.debug
+      { key: 'row.getVisibleCells', debug: instance.options.debug }
     ),
     getCenterVisibleCells: memo(
       () => [
@@ -264,8 +263,7 @@ export function createRow<
 
         return allCells.filter(d => !leftAndRight.includes(d.columnId))
       },
-      'row.getCenterVisibleCells',
-      instance.options.debug
+      { key: 'row.getCenterVisibleCells', debug: instance.options.debug }
     ),
     getLeftVisibleCells: memo(
       () => [
@@ -280,8 +278,7 @@ export function createRow<
 
         return cells
       },
-      'row.getLeftVisibleCells',
-      instance.options.debug
+      { key: 'row.getLeftVisibleCells', debug: instance.options.debug }
     ),
     getRightVisibleCells: memo(
       () => [
@@ -295,8 +292,7 @@ export function createRow<
 
         return cells
       },
-      'row.getRightVisibleCells',
-      instance.options.debug
+      { key: 'row.getRightVisibleCells', debug: instance.options.debug }
     ),
   }
 }
@@ -404,24 +400,12 @@ export function getInstance<
           instance.getHeaderProps(header.id, userProps)!,
         getFooterProps: userProps =>
           instance.getFooterProps(header.id, userProps)!,
-        renderHeader: () => flexRender(column.header, { header, column }),
-        renderFooter: () => flexRender(column.footer, { header, column }),
+        renderHeader: () =>
+          flexRender(column.header, { instance, header, column }),
+        renderFooter: () =>
+          flexRender(column.footer, { instance, header, column }),
       }
 
-      header = Object.assign(
-        header,
-        ColumnSizing.createHeader(
-          header as Header<
-            TData,
-            TValue,
-            TFilterFns,
-            TSortingFns,
-            TAggregationFns
-          >,
-          instance
-        )
-      )
-
       // Yes, we have to convert instance to uknown, because we know more than the compiler here.
       return header as Header<
         TData,
@@ -459,8 +443,7 @@ export function getInstance<
 
         return headerGroups
       },
-      'getHeaderGroups',
-      instance.options.debug
+      { key: 'getHeaderGroups', debug: instance.options.debug }
     ),
 
     getCenterHeaderGroups: memo(
@@ -476,8 +459,7 @@ export function getInstance<
         )
         return buildHeaderGroups(allColumns, leafColumns, instance, 'center')
       },
-      'getCenterHeaderGroups',
-      instance.options.debug
+      { key: 'getCenterHeaderGroups', debug: instance.options.debug }
     ),
 
     getLeftHeaderGroups: memo(
@@ -490,8 +472,7 @@ export function getInstance<
         leafColumns = leafColumns.filter(column => left?.includes(column.id))
         return buildHeaderGroups(allColumns, leafColumns, instance, 'left')
       },
-      'getLeftHeaderGroups',
-      instance.options.debug
+      { key: 'getLeftHeaderGroups', debug: instance.options.debug }
     ),
 
     getRightHeaderGroups: memo(
@@ -504,8 +485,7 @@ export function getInstance<
         leafColumns = leafColumns.filter(column => right?.includes(column.id))
         return buildHeaderGroups(allColumns, leafColumns, instance, 'right')
       },
-      'getRightHeaderGroups',
-      instance.options.debug
+      { key: 'getRightHeaderGroups', debug: instance.options.debug }
     ),
 
     // Footer Groups
@@ -515,8 +495,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getFooterGroups',
-      instance.options.debug
+      { key: 'getFooterGroups', debug: instance.options.debug }
     ),
 
     getLeftFooterGroups: memo(
@@ -524,8 +503,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getLeftFooterGroups',
-      instance.options.debug
+      { key: 'getLeftFooterGroups', debug: instance.options.debug }
     ),
 
     getCenterFooterGroups: memo(
@@ -533,8 +511,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getCenterFooterGroups',
-      instance.options.debug
+      { key: 'getCenterFooterGroups', debug: instance.options.debug }
     ),
 
     getRightFooterGroups: memo(
@@ -542,8 +519,7 @@ export function getInstance<
       headerGroups => {
         return [...headerGroups].reverse()
       },
-      'getRightFooterGroups',
-      instance.options.debug
+      { key: 'getRightFooterGroups', debug: instance.options.debug }
     ),
 
     // Flat Headers
@@ -557,8 +533,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getFlatHeaders',
-      instance.options.debug
+      { key: 'getFlatHeaders', debug: instance.options.debug }
     ),
 
     getLeftFlatHeaders: memo(
@@ -570,8 +545,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getLeftFlatHeaders',
-      instance.options.debug
+      { key: 'getLeftFlatHeaders', debug: instance.options.debug }
     ),
 
     getCenterFlatHeaders: memo(
@@ -583,8 +557,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getCenterFlatHeaders',
-      instance.options.debug
+      { key: 'getCenterFlatHeaders', debug: instance.options.debug }
     ),
 
     getRightFlatHeaders: memo(
@@ -596,8 +569,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getRightFlatHeaders',
-      instance.options.debug
+      { key: 'getRightFlatHeaders', debug: instance.options.debug }
     ),
 
     // Leaf Headers
@@ -607,8 +579,7 @@ export function getInstance<
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      'getCenterLeafHeaders',
-      instance.options.debug
+      { key: 'getCenterLeafHeaders', debug: instance.options.debug }
     ),
 
     getLeftLeafHeaders: memo(
@@ -616,8 +587,7 @@ export function getInstance<
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      'getLeftLeafHeaders',
-      instance.options.debug
+      { key: 'getLeftLeafHeaders', debug: instance.options.debug }
     ),
 
     getRightLeafHeaders: memo(
@@ -625,8 +595,7 @@ export function getInstance<
       flatHeaders => {
         return flatHeaders.filter(header => !header.subHeaders?.length)
       },
-      'getRightLeafHeaders',
-      instance.options.debug
+      { key: 'getRightLeafHeaders', debug: instance.options.debug }
     ),
 
     getLeafHeaders: memo(
@@ -646,8 +615,7 @@ export function getInstance<
           })
           .flat()
       },
-      'getLeafHeaders',
-      instance.options.debug
+      { key: 'getLeafHeaders', debug: instance.options.debug }
     ),
 
     getHeader: (id: string) => {

package/src/features/Ordering.ts

@@ -7,7 +7,7 @@ import * as Grouping from './Grouping'
 export type ColumnOrderState = string[]
 
 export type ColumnOrderTableState = {
-  columnOrder: string[]
+  columnOrder: ColumnOrderState
 }
 
 export type ColumnOrderOptions = {
@@ -127,8 +127,7 @@ export function getInstance<
           groupedColumnMode
         )
       },
-      'getOrderColumnsFn',
-      instance.options.debug
+      { key: 'getOrderColumnsFn', debug: instance.options.debug }
     ),
   }
 }

package/src/features/Pagination.ts

@@ -0,0 +1,327 @@
+import {
+  Column,
+  OnChangeFn,
+  ReactTable,
+  Row,
+  RowModel,
+  TableState,
+  Updater,
+} from '../types'
+import { functionalUpdate, makeStateUpdater, memo } from '../utils'
+
+export type PageCount = undefined | null | number
+
+export type PaginationState = {
+  pageIndex: number
+  pageSize: number
+  pageCount?: PageCount
+}
+
+export type PaginationTableState = {
+  pagination: PaginationState
+}
+
+export type PaginationOptions<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
+  onPaginationChange?: OnChangeFn<PaginationState>
+  autoResetPageIndex?: boolean
+  paginateRowsFn?: (
+    instance: ReactTable<
+      TData,
+      TValue,
+      TFilterFns,
+      TSortingFns,
+      TAggregationFns
+    >,
+    rowModel: RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+  ) => RowModel<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+}
+
+export type PaginationDefaultOptions = {
+  onPaginationChange: OnChangeFn<PaginationState>
+  autoResetPageIndex: boolean
+}
+
+export type PaginationInstance<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
+  _notifyPageIndexReset: () => void
+  setPagination: (updater: Updater<PaginationState>) => void
+  resetPagination: () => void
+  setPageIndex: (updater: Updater<number>) => void
+  resetPageIndex: () => void
+  setPageSize: (updater: Updater<number>) => void
+  resetPageSize: () => void
+  setPageCount: (updater: Updater<PageCount>) => void
+  getPageOptions: () => number[]
+  getCanPreviousPage: () => boolean
+  getCanNextPage: () => boolean
+  previousPage: () => void
+  nextPage: () => void
+  getPaginationRowModel: () => RowModel<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >
+  getPrePaginationRows: () => Row<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  getPrePaginationFlatRows: () => Row<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  getPrePaginationRowsById: () => Record<
+    string,
+    Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+  >
+  getPaginationRows: () => Row<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  getPaginationFlatRows: () => Row<
+    TData,
+    TValue,
+    TFilterFns,
+    TSortingFns,
+    TAggregationFns
+  >[]
+  getPaginationRowsById: () => Record<
+    string,
+    Row<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+  >
+}
+
+//
+
+export function getInitialState(): PaginationTableState {
+  return {
+    pagination: {
+      pageIndex: 0,
+      pageSize: 10,
+    },
+  }
+}
+
+export function getDefaultOptions<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): PaginationDefaultOptions {
+  return {
+    onPaginationChange: makeStateUpdater('pagination', instance),
+    autoResetPageIndex: true,
+  }
+}
+
+export function getInstance<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+>(
+  instance: ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
+): PaginationInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
+  let registered = false
+  return {
+    _notifyPageIndexReset: () => {
+      if (!registered) {
+        registered = true
+        return
+      }
+
+      if (instance.options.autoResetAll === false) {
+        return
+      }
+
+      if (
+        instance.options.autoResetAll === true ||
+        instance.options.autoResetPageIndex
+      ) {
+        instance.resetPageSize()
+      }
+    },
+    setPagination: updater => {
+      const safeUpdater: Updater<PaginationState> = old => {
+        let newState = functionalUpdate(updater, old)
+
+        if (instance.options.paginateRowsFn) {
+          newState.pageCount = instance.getPrePaginationRows()?.length
+            ? Math.ceil(
+                instance.getPrePaginationRows().length /
+                  instance.getState().pagination.pageSize
+              )
+            : 0
+        }
+
+        return newState
+      }
+
+      return instance.options.onPaginationChange?.(
+        safeUpdater,
+        functionalUpdate(safeUpdater, instance.getState().pagination)
+      )
+    },
+    resetPagination: () => {
+      instance.setPagination(
+        instance.initialState.pagination ?? {
+          pageIndex: 0,
+          pageSize: 10,
+          pageCount: -1,
+        }
+      )
+    },
+    setPageIndex: updater => {
+      instance.setPagination(old => {
+        let pageIndex = functionalUpdate(updater, old.pageIndex)
+
+        const maxPageIndex =
+          old.pageCount && old.pageCount > 0
+            ? old.pageCount - 1
+            : Number.MAX_SAFE_INTEGER
+
+        pageIndex = Math.min(Math.max(0, pageIndex), maxPageIndex)
+
+        return {
+          ...old,
+          pageIndex,
+        }
+      })
+    },
+    resetPageIndex: () => {
+      instance.setPageIndex(0)
+    },
+    resetPageSize: () => {
+      instance.setPageSize(
+        instance.options.initialState?.pagination?.pageSize ?? 10
+      )
+    },
+    setPageSize: updater => {
+      instance.setPagination(old => {
+        const pageSize = Math.max(1, functionalUpdate(updater, old.pageSize))
+        const topRowIndex = old.pageSize * old.pageIndex!
+        const pageIndex = Math.floor(topRowIndex / pageSize)
+
+        return {
+          ...old,
+          pageIndex,
+          pageSize,
+        }
+      })
+    },
+    setPageCount: updater =>
+      instance.setPagination(old => {
+        let newPageCount = functionalUpdate(updater, old.pageCount)
+
+        if (typeof newPageCount === 'number') {
+          newPageCount = Math.max(-1, newPageCount)
+        }
+
+        return {
+          ...old,
+          pageCount: newPageCount,
+        }
+      }),
+
+    getPageOptions: memo(
+      () => [
+        instance.getState().pagination.pageSize,
+        instance.getState().pagination.pageCount,
+      ],
+      (pageSize, pageCount) => {
+        let pageOptions: number[] = []
+        if (pageCount && pageCount > 0) {
+          pageOptions = [...new Array(pageCount)].fill(null).map((_, i) => i)
+        }
+        return pageOptions
+      },
+      {
+        key: 'getPageOptions',
+        debug: instance.options.debug,
+      }
+    ),
+
+    getCanPreviousPage: () => instance.getState().pagination.pageIndex > 0,
+
+    getCanNextPage: () => {
+      const { pageIndex, pageCount, pageSize } = instance.getState().pagination
+
+      if (pageCount === -1) {
+        return true
+      }
+
+      if (pageCount === 0) {
+        return false
+      }
+
+      return (
+        pageIndex <
+        Math.ceil(instance.getPrePaginationRows().length / pageSize) - 1
+      )
+    },
+
+    previousPage: () => {
+      return instance.setPageIndex(old => old - 1)
+    },
+
+    nextPage: () => {
+      return instance.setPageIndex(old => {
+        return old + 1
+      })
+    },
+
+    getPaginationRowModel: memo(
+      () => [
+        instance.getState().pagination,
+        instance.getExpandedRowModel(),
+        instance.options.paginateRowsFn,
+      ],
+      (_pagination, rowModel, paginateRowsFn) => {
+        if (!paginateRowsFn || !rowModel.rows.length) {
+          return rowModel
+        }
+
+        if (process.env.NODE_ENV !== 'production' && instance.options.debug)
+          console.info('Paginating...')
+
+        return paginateRowsFn(instance, rowModel)
+      },
+      {
+        key: 'getPaginationRowModel',
+        debug: instance.options.debug,
+      }
+    ),
+
+    getPrePaginationRows: () => instance.getExpandedRowModel().rows,
+    getPrePaginationFlatRows: () => instance.getExpandedRowModel().flatRows,
+    getPrePaginationRowsById: () => instance.getExpandedRowModel().rowsById,
+    getPaginationRows: () => instance.getPaginationRowModel().rows,
+    getPaginationFlatRows: () => instance.getPaginationRowModel().flatRows,
+    getPaginationRowsById: () => instance.getPaginationRowModel().rowsById,
+  }
+}

package/src/features/Pinning.ts

@@ -1,7 +1,7 @@
 import { OnChangeFn, Updater, ReactTable, Column } from '../types'
 import { functionalUpdate, makeStateUpdater } from '../utils'
 
-type ColumnPinningPosition = 'left' | 'right' | 'both'
+type ColumnPinningPosition = false | 'left' | 'right'
 
 export type ColumnPinningState = {
   left?: string[]
@@ -29,7 +29,7 @@ export type ColumnPinningColumnDef = {
 export type ColumnPinningColumn = {
   getCanPin: () => boolean
   getPinnedIndex: () => number
-  getIsPinned: () => false | ColumnPinningPosition
+  getIsPinned: () => ColumnPinningPosition
   pin: (position: ColumnPinningPosition) => void
 }
 
@@ -44,7 +44,7 @@ export type ColumnPinningInstance<
   resetColumnPinning: () => void
   pinColumn: (columnId: string, position: ColumnPinningPosition) => void
   getColumnCanPin: (columnId: string) => boolean
-  getColumnIsPinned: (columnId: string) => false | ColumnPinningPosition
+  getColumnIsPinned: (columnId: string) => ColumnPinningPosition
   getColumnPinnedIndex: (columnId: string) => number
 }
 
@@ -186,25 +186,12 @@ export function getInstance<
       const isLeft = leafColumnIds.some(d => left?.includes(d))
       const isRight = leafColumnIds.some(d => right?.includes(d))
 
-      if (isLeft && isRight) {
-        return 'both'
-      }
-
       return isLeft ? 'left' : isRight ? 'right' : false
     },
 
     getColumnPinnedIndex: columnId => {
       const position = instance.getColumnIsPinned(columnId)
 
-      if (position === 'both') {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn(
-            `Column ${columnId} has leaf columns that are pinned on both sides`
-          )
-        }
-        throw new Error()
-      }
-
       return position
         ? instance.getState().columnPinning?.[position]?.indexOf(columnId) ?? -1
         : 0