@tanstack/table-core 8.0.0-alpha.10

package/src/features/Ordering.ts

@@ -0,0 +1,112 @@
+import { functionalUpdate, makeStateUpdater, memo } from '../utils'
+
+import {
+  TableInstance,
+  OnChangeFn,
+  Updater,
+  Column,
+  PartialGenerics,
+} from '../types'
+
+import { Grouping } from './Grouping'
+
+export type ColumnOrderState = string[]
+
+export type ColumnOrderTableState = {
+  columnOrder: ColumnOrderState
+}
+
+export type ColumnOrderOptions = {
+  onColumnOrderChange?: OnChangeFn<ColumnOrderState>
+}
+
+export type ColumnOrderDefaultOptions = {
+  onColumnOrderChange: OnChangeFn<ColumnOrderState>
+}
+
+export type ColumnOrderInstance<TGenerics extends PartialGenerics> = {
+  setColumnOrder: (updater: Updater<ColumnOrderState>) => void
+  resetColumnOrder: () => void
+  getOrderColumnsFn: () => (columns: Column<TGenerics>[]) => Column<TGenerics>[]
+}
+
+//
+
+export const Ordering = {
+  getInitialState: (): ColumnOrderTableState => {
+    return {
+      columnOrder: [],
+    }
+  },
+
+  getDefaultOptions: <TGenerics extends PartialGenerics>(
+    instance: TableInstance<TGenerics>
+  ): ColumnOrderDefaultOptions => {
+    return {
+      onColumnOrderChange: makeStateUpdater('columnOrder', instance),
+    }
+  },
+
+  getInstance: <TGenerics extends PartialGenerics>(
+    instance: TableInstance<TGenerics>
+  ): ColumnOrderInstance<TGenerics> => {
+    return {
+      setColumnOrder: updater =>
+        instance.options.onColumnOrderChange?.(
+          updater,
+          functionalUpdate(updater, instance.getState().columnOrder)
+        ),
+      resetColumnOrder: () => {
+        instance.setColumnOrder(instance.initialState.columnOrder ?? [])
+      },
+      getOrderColumnsFn: memo(
+        () => [
+          instance.getState().columnOrder,
+          instance.getState().grouping,
+          instance.options.groupedColumnMode,
+        ],
+        (columnOrder, grouping, groupedColumnMode) => columns => {
+          // Sort grouped columns to the start of the column list
+          // before the headers are built
+          let orderedColumns: Column<TGenerics>[] = []
+
+          // If there is no order, return the normal columns
+          if (!columnOrder?.length) {
+            orderedColumns = columns
+          } else {
+            const columnOrderCopy = [...columnOrder]
+
+            // If there is an order, make a copy of the columns
+            const columnsCopy = [...columns]
+
+            // And make a new ordered array of the columns
+
+            // Loop over the columns and place them in order into the new array
+            while (columnsCopy.length && columnOrderCopy.length) {
+              const targetColumnId = columnOrderCopy.shift()
+              const foundIndex = columnsCopy.findIndex(
+                d => d.id === targetColumnId
+              )
+              if (foundIndex > -1) {
+                orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!)
+              }
+            }
+
+            // If there are any columns left, add them to the end
+            orderedColumns = [...orderedColumns, ...columnsCopy]
+          }
+
+          return Grouping.orderColumns(
+            orderedColumns,
+            grouping,
+            groupedColumnMode
+          )
+        },
+        {
+          key: 'getOrderColumnsFn',
+          // debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        }
+      ),
+    }
+  },
+}

package/src/features/Pagination.ts

@@ -0,0 +1,252 @@
+import {
+  OnChangeFn,
+  PartialGenerics,
+  TableInstance,
+  RowModel,
+  Updater,
+} from '../types'
+import { functionalUpdate, makeStateUpdater, memo } from '../utils'
+
+export type PaginationState = {
+  pageIndex: number
+  pageSize: number
+  pageCount: number
+}
+
+export type PaginationTableState = {
+  pagination: PaginationState
+}
+
+export type PaginationOptions<TGenerics extends PartialGenerics> = {
+  onPaginationChange?: OnChangeFn<PaginationState>
+  autoResetPageIndex?: boolean
+  paginateRowsFn?: (
+    instance: TableInstance<TGenerics>,
+    rowModel: RowModel<TGenerics>
+  ) => RowModel<TGenerics>
+}
+
+export type PaginationDefaultOptions = {
+  onPaginationChange: OnChangeFn<PaginationState>
+  autoResetPageIndex: boolean
+}
+
+export type PaginationInstance<TGenerics extends PartialGenerics> = {
+  _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<number>) => void
+  getPageOptions: () => number[]
+  getCanPreviousPage: () => boolean
+  getCanNextPage: () => boolean
+  previousPage: () => void
+  nextPage: () => void
+  getPrePaginationRowModel: () => RowModel<TGenerics>
+  getPaginationRowModel: () => RowModel<TGenerics>
+  getPageCount: () => number
+}
+
+//
+
+export const Pagination = {
+  getInitialState: (): PaginationTableState => {
+    return {
+      pagination: {
+        pageCount: -1,
+        pageIndex: 0,
+        pageSize: 10,
+      },
+    }
+  },
+
+  getDefaultOptions: <TGenerics extends PartialGenerics>(
+    instance: TableInstance<TGenerics>
+  ): PaginationDefaultOptions => {
+    return {
+      onPaginationChange: makeStateUpdater('pagination', instance),
+      autoResetPageIndex: true,
+    }
+  },
+
+  getInstance: <TGenerics extends PartialGenerics>(
+    instance: TableInstance<TGenerics>
+  ): PaginationInstance<TGenerics> => {
+    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.resetPageIndex()
+        }
+      },
+      setPagination: updater => {
+        const safeUpdater: Updater<PaginationState> = old => {
+          let newState = functionalUpdate(updater, old)
+
+          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.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.debugAll ?? instance.options.debugTable,
+        }
+      ),
+
+      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.getPrePaginationRowModel().rows.length / pageSize
+          ) -
+            1
+        )
+      },
+
+      previousPage: () => {
+        return instance.setPageIndex(old => old - 1)
+      },
+
+      nextPage: () => {
+        return instance.setPageIndex(old => {
+          return old + 1
+        })
+      },
+
+      getPrePaginationRowModel: () => instance.getExpandedRowModel(),
+      getPaginationRowModel: memo(
+        () => [
+          instance.getState().pagination,
+          instance.getExpandedRowModel(),
+          instance.options.paginateRowsFn,
+        ],
+        (_pagination, rowModel, paginateRowsFn) => {
+          if (!paginateRowsFn || !rowModel.rows.length) {
+            return rowModel
+          }
+
+          return paginateRowsFn(instance, rowModel)
+        },
+        {
+          key: 'getPaginationRowModel',
+          debug: () => instance.options.debugAll ?? instance.options.debugTable,
+        }
+      ),
+
+      getPageCount: () => {
+        const { pageCount } = instance.getState().pagination
+        if (pageCount > 0) {
+          return pageCount
+        }
+
+        return Math.ceil(
+          instance.getPrePaginationRowModel().rows.length /
+            instance.getState().pagination.pageSize
+        )
+      },
+    }
+  },
+}

package/src/features/Pinning.ts

@@ -0,0 +1,177 @@
+import {
+  OnChangeFn,
+  Updater,
+  TableInstance,
+  Column,
+  PartialGenerics,
+} from '../types'
+import { functionalUpdate, makeStateUpdater } from '../utils'
+
+type ColumnPinningPosition = false | 'left' | 'right'
+
+export type ColumnPinningState = {
+  left?: string[]
+  right?: string[]
+}
+
+export type ColumnPinningTableState = {
+  columnPinning: ColumnPinningState
+}
+
+export type ColumnPinningOptions = {
+  onColumnPinningChange?: OnChangeFn<ColumnPinningState>
+  enablePinning?: boolean
+}
+
+export type ColumnPinningDefaultOptions = {
+  onColumnPinningChange: OnChangeFn<ColumnPinningState>
+}
+
+export type ColumnPinningColumnDef = {
+  enablePinning?: boolean
+  defaultCanPin?: boolean
+}
+
+export type ColumnPinningColumn = {
+  getCanPin: () => boolean
+  getPinnedIndex: () => number
+  getIsPinned: () => ColumnPinningPosition
+  pin: (position: ColumnPinningPosition) => void
+}
+
+export type ColumnPinningInstance<TGenerics extends PartialGenerics> = {
+  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
+}
+
+//
+
+export const Pinning = {
+  getInitialState: (): ColumnPinningTableState => {
+    return {
+      columnPinning: {
+        left: [],
+        right: [],
+      },
+    }
+  },
+
+  getDefaultOptions: <TGenerics extends PartialGenerics>(
+    instance: TableInstance<TGenerics>
+  ): ColumnPinningDefaultOptions => {
+    return {
+      onColumnPinningChange: makeStateUpdater('columnPinning', instance),
+    }
+  },
+
+  createColumn: <TGenerics extends PartialGenerics>(
+    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)
+
+        const columnIds = column
+          ?.getLeafColumns()
+          .map(d => d.id)
+          .filter(Boolean) as string[]
+
+        instance.setColumnPinning(old => {
+          if (position === 'right') {
+            return {
+              left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
+              right: [
+                ...(old?.right ?? []).filter(d => !columnIds?.includes(d)),
+                ...columnIds,
+              ],
+            }
+          }
+
+          if (position === 'left') {
+            return {
+              left: [
+                ...(old?.left ?? []).filter(d => !columnIds?.includes(d)),
+                ...columnIds,
+              ],
+              right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+            }
+          }
+
+          return {
+            left: (old?.left ?? []).filter(d => !columnIds?.includes(d)),
+            right: (old?.right ?? []).filter(d => !columnIds?.includes(d)),
+          }
+        })
+      },
+
+      getColumnCanPin: columnId => {
+        const column = instance.getColumn(columnId)
+
+        if (!column) {
+          throw new Error()
+        }
+
+        const leafColumns = column.getLeafColumns()
+
+        return leafColumns.some(
+          d =>
+            d.enablePinning ??
+            instance.options.enablePinning ??
+            d.defaultCanPin ??
+            !!d.accessorFn
+        )
+      },
+
+      getColumnIsPinned: columnId => {
+        const column = instance.getColumn(columnId)
+
+        if (!column) {
+          throw new Error()
+        }
+
+        const leafColumnIds = column.getLeafColumns().map(d => d.id)
+
+        const { left, right } = instance.getState().columnPinning
+
+        const isLeft = leafColumnIds.some(d => left?.includes(d))
+        const isRight = leafColumnIds.some(d => right?.includes(d))
+
+        return isLeft ? 'left' : isRight ? 'right' : false
+      },
+
+      getColumnPinnedIndex: columnId => {
+        const position = instance.getColumnIsPinned(columnId)
+
+        return position
+          ? instance.getState().columnPinning?.[position]?.indexOf(columnId) ??
+              -1
+          : 0
+      },
+    }
+  },
+}