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

package/src/features/Pagination.ts

@@ -1,6 +1,7 @@
+import { TableFeature } from '../core/instance'
 import {
   OnChangeFn,
-  PartialGenerics,
+  TableGenerics,
   TableInstance,
   RowModel,
   Updater,
@@ -10,35 +11,36 @@ import { functionalUpdate, makeStateUpdater, memo } from '../utils'
 export type PaginationState = {
   pageIndex: number
   pageSize: number
-  pageCount: number
+  pageCount?: number
 }
 
 export type PaginationTableState = {
   pagination: PaginationState
 }
 
-export type PaginationOptions<TGenerics extends PartialGenerics> = {
+export type PaginationInitialTableState = {
+  pagination?: Partial<PaginationState>
+}
+
+export type PaginationOptions<TGenerics extends TableGenerics> = {
+  manualPagination?: boolean
   onPaginationChange?: OnChangeFn<PaginationState>
   autoResetPageIndex?: boolean
-  paginateRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    rowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
+  getPaginationRowModel?: (instance: TableInstance<any>) => () => RowModel<any>
 }
 
 export type PaginationDefaultOptions = {
   onPaginationChange: OnChangeFn<PaginationState>
-  autoResetPageIndex: boolean
 }
 
-export type PaginationInstance<TGenerics extends PartialGenerics> = {
-  _notifyPageIndexReset: () => void
+export type PaginationInstance<TGenerics extends TableGenerics> = {
+  _autoResetPageIndex: () => void
   setPagination: (updater: Updater<PaginationState>) => void
-  resetPagination: () => void
+  resetPagination: (defaultState?: boolean) => void
   setPageIndex: (updater: Updater<number>) => void
-  resetPageIndex: () => void
+  resetPageIndex: (defaultState?: boolean) => void
   setPageSize: (updater: Updater<number>) => void
-  resetPageSize: () => void
+  resetPageSize: (defaultState?: boolean) => void
   setPageCount: (updater: Updater<number>) => void
   getPageOptions: () => number[]
   getCanPreviousPage: () => boolean
@@ -47,51 +49,65 @@ export type PaginationInstance<TGenerics extends PartialGenerics> = {
   nextPage: () => void
   getPrePaginationRowModel: () => RowModel<TGenerics>
   getPaginationRowModel: () => RowModel<TGenerics>
+  _getPaginationRowModel?: () => RowModel<TGenerics>
   getPageCount: () => number
 }
 
 //
 
-export const Pagination = {
-  getInitialState: (): PaginationTableState => {
+const defaultPageIndex = 0
+const defaultPageSize = 10
+
+const getDefaultPaginationState = (): PaginationState => ({
+  pageIndex: defaultPageIndex,
+  pageSize: defaultPageSize,
+})
+
+export const Pagination: TableFeature = {
+  getInitialState: (state): PaginationTableState => {
     return {
+      ...state,
       pagination: {
-        pageCount: -1,
-        pageIndex: 0,
-        pageSize: 10,
+        ...getDefaultPaginationState(),
+        ...state?.pagination,
       },
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): PaginationDefaultOptions => {
     return {
       onPaginationChange: makeStateUpdater('pagination', instance),
-      autoResetPageIndex: true,
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): PaginationInstance<TGenerics> => {
     let registered = false
+    let queued = false
+
     return {
-      _notifyPageIndexReset: () => {
+      _autoResetPageIndex: () => {
         if (!registered) {
-          registered = true
-          return
-        }
-
-        if (instance.options.autoResetAll === false) {
+          instance._queue(() => {
+            registered = true
+          })
           return
         }
 
         if (
-          instance.options.autoResetAll === true ||
-          instance.options.autoResetPageIndex
+          instance.options.autoResetAll ??
+          instance.options.autoResetPageIndex ??
+          !instance.options.manualPagination
         ) {
-          instance.resetPageIndex()
+          if (queued) return
+          queued = true
+          instance._queue(() => {
+            instance.resetPageIndex()
+            queued = false
+          })
         }
       },
       setPagination: updater => {
@@ -101,18 +117,13 @@ export const Pagination = {
           return newState
         }
 
-        return instance.options.onPaginationChange?.(
-          safeUpdater,
-          functionalUpdate(safeUpdater, instance.getState().pagination)
-        )
+        return instance.options.onPaginationChange?.(safeUpdater)
       },
-      resetPagination: () => {
+      resetPagination: defaultState => {
         instance.setPagination(
-          instance.initialState.pagination ?? {
-            pageIndex: 0,
-            pageSize: 10,
-            pageCount: -1,
-          }
+          defaultState
+            ? getDefaultPaginationState()
+            : instance.initialState.pagination ?? getDefaultPaginationState()
         )
       },
       setPageIndex: updater => {
@@ -120,7 +131,7 @@ export const Pagination = {
           let pageIndex = functionalUpdate(updater, old.pageIndex)
 
           const maxPageIndex =
-            old.pageCount && old.pageCount > 0
+            typeof old.pageCount !== 'undefined'
               ? old.pageCount - 1
               : Number.MAX_SAFE_INTEGER
 
@@ -132,11 +143,19 @@ export const Pagination = {
           }
         })
       },
-      resetPageIndex: () => {
-        instance.setPageIndex(0)
+      resetPageIndex: defaultState => {
+        instance.setPageIndex(
+          defaultState
+            ? defaultPageIndex
+            : instance.initialState?.pagination?.pageIndex ?? defaultPageIndex
+        )
       },
-      resetPageSize: () => {
-        instance.setPageSize(instance.initialState?.pagination?.pageSize ?? 10)
+      resetPageSize: defaultState => {
+        instance.setPageSize(
+          defaultState
+            ? defaultPageSize
+            : instance.initialState?.pagination?.pageSize ?? defaultPageSize
+        )
       },
       setPageSize: updater => {
         instance.setPagination(old => {
@@ -153,7 +172,7 @@ export const Pagination = {
       },
       setPageCount: updater =>
         instance.setPagination(old => {
-          let newPageCount = functionalUpdate(updater, old.pageCount)
+          let newPageCount = functionalUpdate(updater, old.pageCount ?? -1)
 
           if (typeof newPageCount === 'number') {
             newPageCount = Math.max(-1, newPageCount)
@@ -178,7 +197,7 @@ export const Pagination = {
           return pageOptions
         },
         {
-          key: 'getPageOptions',
+          key: process.env.NODE_ENV === 'development' && 'getPageOptions',
           debug: () => instance.options.debugAll ?? instance.options.debugTable,
         }
       ),
@@ -186,8 +205,9 @@ export const Pagination = {
       getCanPreviousPage: () => instance.getState().pagination.pageIndex > 0,
 
       getCanNextPage: () => {
-        const { pageIndex, pageCount, pageSize } =
-          instance.getState().pagination
+        const { pageIndex } = instance.getState().pagination
+
+        const pageCount = instance.getPageCount()
 
         if (pageCount === -1) {
           return true
@@ -197,13 +217,7 @@ export const Pagination = {
           return false
         }
 
-        return (
-          pageIndex <
-          Math.ceil(
-            instance.getPrePaginationRowModel().rows.length / pageSize
-          ) -
-            1
-        )
+        return pageIndex < pageCount - 1
       },
 
       previousPage: () => {
@@ -217,28 +231,29 @@ 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.options.manualPagination ||
+          !instance._getPaginationRowModel
+        ) {
+          return instance.getPrePaginationRowModel()
         }
-      ),
+
+        return instance._getPaginationRowModel()
+      },
 
       getPageCount: () => {
         const { pageCount } = instance.getState().pagination
-        if (pageCount > 0) {
+
+        if (typeof pageCount !== 'undefined') {
           return pageCount
         }
 

package/src/features/Pinning.ts

@@ -1,13 +1,16 @@
+import { TableFeature } from '../core/instance'
 import {
   OnChangeFn,
   Updater,
   TableInstance,
   Column,
-  PartialGenerics,
+  TableGenerics,
+  Row,
+  Cell,
 } from '../types'
-import { functionalUpdate, makeStateUpdater } from '../utils'
+import { makeStateUpdater, memo } from '../utils'
 
-type ColumnPinningPosition = false | 'left' | 'right'
+export type ColumnPinningPosition = false | 'left' | 'right'
 
 export type ColumnPinningState = {
   left?: string[]
@@ -29,7 +32,6 @@ export type ColumnPinningDefaultOptions = {
 
 export type ColumnPinningColumnDef = {
   enablePinning?: boolean
-  defaultCanPin?: boolean
 }
 
 export type ColumnPinningColumn = {
@@ -39,28 +41,37 @@ export type ColumnPinningColumn = {
   pin: (position: ColumnPinningPosition) => void
 }
 
-export type ColumnPinningInstance<TGenerics extends PartialGenerics> = {
+export type ColumnPinningRow<TGenerics extends TableGenerics> = {
+  getLeftVisibleCells: () => Cell<TGenerics>[]
+  getCenterVisibleCells: () => Cell<TGenerics>[]
+  getRightVisibleCells: () => Cell<TGenerics>[]
+}
+
+export type ColumnPinningInstance<TGenerics extends TableGenerics> = {
   setColumnPinning: (updater: Updater<ColumnPinningState>) => void
-  resetColumnPinning: () => void
-  pinColumn: (columnId: string, position: ColumnPinningPosition) => void
-  getColumnCanPin: (columnId: string) => boolean
-  getColumnIsPinned: (columnId: string) => ColumnPinningPosition
-  getColumnPinnedIndex: (columnId: string) => number
+  resetColumnPinning: (defaultState?: boolean) => void
+  getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean
+  getLeftLeafColumns: () => Column<TGenerics>[]
+  getRightLeafColumns: () => Column<TGenerics>[]
+  getCenterLeafColumns: () => Column<TGenerics>[]
 }
 
 //
 
-export const Pinning = {
-  getInitialState: (): ColumnPinningTableState => {
+const getDefaultPinningState = (): ColumnPinningState => ({
+  left: [],
+  right: [],
+})
+
+export const Pinning: TableFeature = {
+  getInitialState: (state): ColumnPinningTableState => {
     return {
-      columnPinning: {
-        left: [],
-        right: [],
-      },
+      columnPinning: getDefaultPinningState(),
+      ...state,
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnPinningDefaultOptions => {
     return {
@@ -68,36 +79,14 @@ export const Pinning = {
     }
   },
 
-  createColumn: <TGenerics extends PartialGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
     column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
   ): ColumnPinningColumn => {
     return {
-      getCanPin: () => instance.getColumnCanPin(column.id),
-      getPinnedIndex: () => instance.getColumnPinnedIndex(column.id),
-      getIsPinned: () => instance.getColumnIsPinned(column.id),
-      pin: position => instance.pinColumn(column.id, position),
-    }
-  },
-
-  getInstance: <TGenerics extends PartialGenerics>(
-    instance: TableInstance<TGenerics>
-  ): ColumnPinningInstance<TGenerics> => {
-    return {
-      setColumnPinning: updater =>
-        instance.options.onColumnPinningChange?.(
-          updater,
-          functionalUpdate(updater, instance.getState().columnPinning)
-        ),
-
-      resetColumnPinning: () =>
-        instance.setColumnPinning(instance.initialState?.columnPinning ?? {}),
-
-      pinColumn: (columnId, position) => {
-        const column = instance.getColumn(columnId)
-
+      pin: position => {
         const columnIds = column
-          ?.getLeafColumns()
+          .getLeafColumns()
           .map(d => d.id)
           .filter(Boolean) as string[]
 
@@ -129,31 +118,17 @@ export const Pinning = {
         })
       },
 
-      getColumnCanPin: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
+      getCanPin: () => {
         const leafColumns = column.getLeafColumns()
 
         return leafColumns.some(
           d =>
-            d.enablePinning ??
-            instance.options.enablePinning ??
-            d.defaultCanPin ??
-            !!d.accessorFn
+            (d.columnDef.enablePinning ?? true) &&
+            (instance.options.enablePinning ?? true)
         )
       },
 
-      getColumnIsPinned: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
+      getIsPinned: () => {
         const leafColumnIds = column.getLeafColumns().map(d => d.id)
 
         const { left, right } = instance.getState().columnPinning
@@ -164,14 +139,162 @@ export const Pinning = {
         return isLeft ? 'left' : isRight ? 'right' : false
       },
 
-      getColumnPinnedIndex: columnId => {
-        const position = instance.getColumnIsPinned(columnId)
+      getPinnedIndex: () => {
+        const position = column.getIsPinned()
 
         return position
-          ? instance.getState().columnPinning?.[position]?.indexOf(columnId) ??
+          ? instance.getState().columnPinning?.[position]?.indexOf(column.id) ??
               -1
           : 0
       },
     }
   },
+
+  createRow: <TGenerics extends TableGenerics>(
+    row: Row<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): ColumnPinningRow<TGenerics> => {
+    return {
+      getCenterVisibleCells: memo(
+        () => [
+          row._getAllVisibleCells(),
+          instance.getState().columnPinning.left,
+          instance.getState().columnPinning.right,
+        ],
+        (allCells, left, right) => {
+          const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
+
+          return allCells.filter(d => !leftAndRight.includes(d.column.id))
+        },
+        {
+          key:
+            process.env.NODE_ENV === 'production' &&
+            'row.getCenterVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getLeftVisibleCells: memo(
+        () => [
+          row._getAllVisibleCells(),
+          instance.getState().columnPinning.left,
+          ,
+        ],
+        (allCells, left) => {
+          const cells = (left ?? [])
+            .map(
+              columnId => allCells.find(cell => cell.column.id === columnId)!
+            )
+            .filter(Boolean)
+            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
+
+          return cells
+        },
+        {
+          key:
+            process.env.NODE_ENV === 'production' && 'row.getLeftVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+      getRightVisibleCells: memo(
+        () => [
+          row._getAllVisibleCells(),
+          instance.getState().columnPinning.right,
+        ],
+        (allCells, right) => {
+          const cells = (right ?? [])
+            .map(
+              columnId => allCells.find(cell => cell.column.id === columnId)!
+            )
+            .filter(Boolean)
+            .map(d => ({ ...d, position: 'left' } as Cell<TGenerics>))
+
+          return cells
+        },
+        {
+          key:
+            process.env.NODE_ENV === 'production' && 'row.getRightVisibleCells',
+          debug: () => instance.options.debugAll ?? instance.options.debugRows,
+        }
+      ),
+    }
+  },
+
+  createInstance: <TGenerics extends TableGenerics>(
+    instance: TableInstance<TGenerics>
+  ): ColumnPinningInstance<TGenerics> => {
+    return {
+      setColumnPinning: updater =>
+        instance.options.onColumnPinningChange?.(updater),
+
+      resetColumnPinning: defaultState =>
+        instance.setColumnPinning(
+          defaultState
+            ? getDefaultPinningState()
+            : instance.initialState?.columnPinning ?? getDefaultPinningState()
+        ),
+
+      getIsSomeColumnsPinned: position => {
+        const pinningState = instance.getState().columnPinning
+
+        if (!position) {
+          return Boolean(
+            pinningState.left?.length || pinningState.right?.length
+          )
+        }
+        return Boolean(pinningState[position]?.length)
+      },
+
+      getLeftLeafColumns: memo(
+        () => [
+          instance.getAllLeafColumns(),
+          instance.getState().columnPinning.left,
+        ],
+        (allColumns, left) => {
+          return (left ?? [])
+            .map(columnId => allColumns.find(column => column.id === columnId)!)
+            .filter(Boolean)
+        },
+        {
+          key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getRightLeafColumns: memo(
+        () => [
+          instance.getAllLeafColumns(),
+          instance.getState().columnPinning.right,
+        ],
+        (allColumns, right) => {
+          return (right ?? [])
+            .map(columnId => allColumns.find(column => column.id === columnId)!)
+            .filter(Boolean)
+        },
+        {
+          key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+
+      getCenterLeafColumns: memo(
+        () => [
+          instance.getAllLeafColumns(),
+          instance.getState().columnPinning.left,
+          instance.getState().columnPinning.right,
+        ],
+        (allColumns, left, right) => {
+          const leftAndRight: string[] = [...(left ?? []), ...(right ?? [])]
+
+          return allColumns.filter(d => !leftAndRight.includes(d.id))
+        },
+        {
+          key: process.env.NODE_ENV === 'development' && 'getCenterLeafColumns',
+          debug: () =>
+            instance.options.debugAll ?? instance.options.debugColumns,
+        }
+      ),
+    }
+  },
 }