@tanstack/react-table 8.0.0-alpha.3 → 8.0.0-alpha.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-table",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.3",
+  "version": "8.0.0-alpha.6",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",

package/src/core.tsx

@@ -291,97 +291,6 @@ export type CoreColumnDef<
         header: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
         column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
       }>
-} & //       | Renderable<{ //       | string //     header?: //     accessorKey?: never //     id: string //     accessorFn: AccessorFn<TData> // | {
-//           instance: ReactTable<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//           header: Header<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//           column: Column<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//         }>
-//   }
-// | {
-//     accessorKey: string & keyof TData
-//     id?: string
-//     accessorFn?: never
-//     header?:
-//       | string
-//       | Renderable<{
-//           instance: ReactTable<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//           header: Header<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//           column: Column<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//         }>
-//   }
-// | {
-//     id: string
-//     accessorKey?: never
-//     accessorFn?: never
-//     header?:
-//       | string
-//       | Renderable<{
-//           instance: ReactTable<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//           header: Header<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//           column: Column<
-//             TData,
-//             TValue,
-//             TFilterFns,
-//             TSortingFns,
-//             TAggregationFns
-//           >
-//         }>
-//   }
-// | {
-//     header: string
-//     id?: string
-//     accessorKey?: never
-//     accessorFn?: never
-//   }
-{
   __generated: true
   width?: number
   minWidth?: number
@@ -1053,7 +962,7 @@ export function createTableInstance<
     // expanded rows, which then work their way up
 
     getRowModel: () => {
-      return instance.getExpandedRowModel()
+      return instance.getPaginationRowModel()
     },
 
     getRows: () => {

package/src/createTable.tsx

@@ -11,7 +11,7 @@ import {
 } from './types'
 import { Overwrite } from './utils'
 
-type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
+export type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
   RowType<TTData>(): TableHelper<
     TTData,
     TValue,

package/src/features/Expanding.ts

@@ -192,7 +192,7 @@ export function getInstance<
     toggleRowExpanded: (rowId, expanded) => {
       if (!rowId) return
 
-      instance.setExpanded((old = {}) => {
+      instance.setExpanded(old => {
         const exists = old === true ? true : !!old?.[rowId]
 
         let oldExpanded: ExpandedStateList = {}
@@ -230,7 +230,7 @@ export function getInstance<
       }
     },
     resetExpanded: () => {
-      instance.setExpanded(instance.options?.initialState?.expanded ?? {})
+      instance.setExpanded(instance.initialState?.expanded ?? {})
     },
     getIsRowExpanded: rowId => {
       const row = instance.getRow(rowId)
@@ -362,7 +362,9 @@ export function getInstance<
       {
         key: 'getExpandedRowModel',
         debug: instance.options.debug,
-        onChange: () => instance._notifyPageIndexReset(),
+        onChange: () => {
+          instance._notifyPageIndexReset()
+        },
       }
     ),
 

package/src/features/Filters.ts

@@ -628,9 +628,7 @@ export function getInstance<
     },
 
     resetColumnFilters: () => {
-      instance.setColumnFilters(
-        instance.options?.initialState?.columnFilters ?? []
-      )
+      instance.setColumnFilters(instance.initialState?.columnFilters ?? [])
     },
 
     getColumnFilteredRowModel: memo(
@@ -730,7 +728,9 @@ export function getInstance<
       {
         key: 'getGlobalFilteredRowModel',
         debug: instance.options.debug,
-        onChange: () => instance._notifySortingReset(),
+        onChange: () => {
+          instance._notifySortingReset()
+        },
       }
     ),
 

package/src/features/Grouping.ts

@@ -331,7 +331,7 @@ export function getInstance<
       instance.getState().grouping?.indexOf(columnId),
 
     resetGrouping: () => {
-      instance.setGrouping(instance.options?.initialState?.grouping ?? [])
+      instance.setGrouping(instance.initialState?.grouping ?? [])
     },
 
     getToggleGroupingProps: (columnId, userProps) => {

package/src/features/Pagination.ts

@@ -9,10 +9,12 @@ import {
 } from '../types'
 import { functionalUpdate, makeStateUpdater, memo } from '../utils'
 
+export type PageCount = undefined | null | number
+
 export type PaginationState = {
   pageIndex: number
   pageSize: number
-  pageCount: number
+  pageCount?: PageCount
 }
 
 export type PaginationTableState = {
@@ -59,12 +61,12 @@ export type PaginationInstance<
   resetPageIndex: () => void
   setPageSize: (updater: Updater<number>) => void
   resetPageSize: () => void
-  setPageCount: (updater: Updater<number>) => void
+  setPageCount: (updater: Updater<PageCount>) => void
   getPageOptions: () => number[]
   getCanPreviousPage: () => boolean
   getCanNextPage: () => boolean
-  gotoPreviousPage: () => void
-  gotoNextPage: () => void
+  previousPage: () => void
+  nextPage: () => void
   getPaginationRowModel: () => RowModel<
     TData,
     TValue,
@@ -117,7 +119,6 @@ export function getInitialState(): PaginationTableState {
     pagination: {
       pageIndex: 0,
       pageSize: 10,
-      pageCount: -1,
     },
   }
 }
@@ -167,21 +168,18 @@ export function getInstance<
     },
     setPagination: updater => {
       const safeUpdater: Updater<PaginationState> = old => {
-        const newState = functionalUpdate(old, updater)
-
-        if (!instance.options.paginateRowsFn) {
-          return {
-            ...old,
-            pageCount: instance.getPreExpandedRows()?.length
-              ? Math.ceil(
-                  instance.getPreExpandedRows().length /
-                    instance.getState().pagination.pageSize
-                )
-              : 0,
-          }
+        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 old
+        return newState
       }
 
       return instance.options.onPaginationChange?.(
@@ -200,13 +198,18 @@ export function getInstance<
     },
     setPageIndex: updater => {
       instance.setPagination(old => {
-        const newPageIndex = functionalUpdate(updater, old.pageIndex)
+        let pageIndex = functionalUpdate(updater, old.pageIndex)
+
         const maxPageIndex =
-          old.pageCount > 0 ? old.pageCount - 1 : Number.MAX_SAFE_INTEGER
+          old.pageCount && old.pageCount > 0
+            ? old.pageCount - 1
+            : Number.MAX_SAFE_INTEGER
+
+        pageIndex = Math.min(Math.max(0, pageIndex), maxPageIndex)
 
         return {
           ...old,
-          pageIndex: Math.min(Math.max(0, newPageIndex), maxPageIndex),
+          pageIndex,
         }
       })
     },
@@ -214,9 +217,7 @@ export function getInstance<
       instance.setPageIndex(0)
     },
     resetPageSize: () => {
-      instance.setPageSize(
-        instance.options.initialState?.pagination?.pageSize ?? 10
-      )
+      instance.setPageSize(instance.initialState?.pagination?.pageSize ?? 10)
     },
     setPageSize: updater => {
       instance.setPagination(old => {
@@ -232,10 +233,18 @@ export function getInstance<
       })
     },
     setPageCount: updater =>
-      instance.setPagination(old => ({
-        ...old,
-        pageCount: Math.max(-1, functionalUpdate(updater, old.pageCount)),
-      })),
+      instance.setPagination(old => {
+        let newPageCount = functionalUpdate(updater, old.pageCount)
+
+        if (typeof newPageCount === 'number') {
+          newPageCount = Math.max(-1, newPageCount)
+        }
+
+        return {
+          ...old,
+          pageCount: newPageCount,
+        }
+      }),
 
     getPageOptions: memo(
       () => [
@@ -244,7 +253,7 @@ export function getInstance<
       ],
       (pageSize, pageCount) => {
         let pageOptions: number[] = []
-        if (pageCount > 0) {
+        if (pageCount && pageCount > 0) {
           pageOptions = [...new Array(pageCount)].fill(null).map((_, i) => i)
         }
         return pageOptions
@@ -274,12 +283,14 @@ export function getInstance<
       )
     },
 
-    gotoPreviousPage: () => {
-      return instance.setPageIndex?.(old => old! - 1)
+    previousPage: () => {
+      return instance.setPageIndex(old => old - 1)
     },
 
-    gotoNextPage: () => {
-      return instance.setPageIndex?.(old => old! + 1)
+    nextPage: () => {
+      return instance.setPageIndex(old => {
+        return old + 1
+      })
     },
 
     getPaginationRowModel: memo(

package/src/features/Pinning.ts

@@ -114,9 +114,7 @@ export function getInstance<
       ),
 
     resetColumnPinning: () =>
-      instance.setColumnPinning(
-        instance.options.initialState?.columnPinning ?? {}
-      ),
+      instance.setColumnPinning(instance.initialState?.columnPinning ?? {}),
 
     pinColumn: (columnId, position) => {
       const column = instance.getColumn(columnId)

package/src/features/Sorting.ts

@@ -484,7 +484,7 @@ export function getInstance<
       instance.getState().sorting?.findIndex(d => d.id === columnId) ?? -1,
 
     resetSorting: () => {
-      instance.setSorting(instance.options?.initialState?.sorting ?? [])
+      instance.setSorting(instance.initialState?.sorting ?? [])
     },
 
     getToggleSortingProps: (columnId, userProps) => {

package/src/index.tsx

@@ -4,4 +4,5 @@ export * from './utils/globalFilterRowsFn'
 export * from './utils/sortRowsFn'
 export * from './utils/groupRowsFn'
 export * from './utils/expandRowsFn'
-export { createTable } from './createTable'
+export * from './utils/paginateRowsFn'
+export * from './createTable'

package/src/utils.tsx

@@ -43,29 +43,6 @@ export function makeStateUpdater(key: keyof TableState, instance: unknown) {
   }
 }
 
-// SSR has issues with useLayoutEffect still, so use useEffect during SSR
-export const safeUseLayoutEffect =
-  typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect
-
-export function useMountedLayoutEffect(fn: any, deps: any[]) {
-  const mountedRef = React.useRef(false)
-
-  safeUseLayoutEffect(() => {
-    if (mountedRef.current) {
-      fn()
-    }
-    mountedRef.current = true
-    // eslint-disable-next-line
-  }, deps)
-}
-
-export function useGetLatest<T>(obj: T): () => T {
-  const ref = React.useRef<T>()
-  ref.current = obj
-
-  return React.useCallback(() => ref.current!, [])
-}
-
 type AnyFunction = (...args: any) => any
 
 export function isFunction<T extends AnyFunction>(d: any): d is T {
@@ -124,27 +101,19 @@ export function memo<TDeps extends readonly any[], TResult>(
 
   return () => {
     const newDeps = getDeps()
-    const newSerializedDeps = newDeps
-    const oldSerializedDeps = deps
 
     const depsChanged =
-      newSerializedDeps.length !== oldSerializedDeps.length ||
-      newSerializedDeps.some(
-        (dep: any, index: number) => oldSerializedDeps[index] !== dep
-      )
+      newDeps.length !== deps.length ||
+      newDeps.some((dep: any, index: number) => deps[index] !== dep)
 
     if (depsChanged) {
       if (opts?.debug) {
         console.info(opts?.key, {
-          length: `${oldSerializedDeps.length} -> ${newSerializedDeps.length}`,
-          ...newSerializedDeps
+          length: `${deps.length} -> ${newDeps.length}`,
+          ...newDeps
             .map((_, index) => {
-              if (oldSerializedDeps[index] !== newSerializedDeps[index]) {
-                return [
-                  index,
-                  oldSerializedDeps[index],
-                  newSerializedDeps[index],
-                ]
+              if (deps[index] !== newDeps[index]) {
+                return [index, deps[index], newDeps[index]]
               }
 
               return false
@@ -163,7 +132,7 @@ export function memo<TDeps extends readonly any[], TResult>(
 
       let oldResult = result
       result = fn(...newDeps)
-      deps = newSerializedDeps
+      deps = newDeps
       opts?.onChange?.(result, oldResult)
 
       oldResult = undefined
@@ -173,37 +142,6 @@ export function memo<TDeps extends readonly any[], TResult>(
   }
 }
 
-// Copied from: https://github.com/jonschlinkert/is-plain-object
-export function isPlainObject(o: any): o is Object {
-  if (!hasObjectPrototype(o)) {
-    return false
-  }
-
-  // If has modified constructor
-  const ctor = o.constructor
-  if (typeof ctor === 'undefined') {
-    return true
-  }
-
-  // If has modified prototype
-  const prot = ctor.prototype
-  if (!hasObjectPrototype(prot)) {
-    return false
-  }
-
-  // If constructor does not have an Object-specific method
-  if (!prot.hasOwnProperty('isPrototypeOf')) {
-    return false
-  }
-
-  // Most likely a plain Object
-  return true
-}
-
-function hasObjectPrototype(o: any): boolean {
-  return Object.prototype.toString.call(o) === '[object Object]'
-}
-
 export type Render = typeof flexRender
 
 export function flexRender<TProps extends {}>(