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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-table",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.8",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",
@@ -36,5 +36,11 @@
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@types/use-sync-external-store": "^0.0.3"
   }
 }

package/src/core.tsx

@@ -84,7 +84,8 @@ export type CoreOptions<
 
 export type TableCore<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
   {
-    rerender: () => void
+    subscribe: (cb: () => void) => () => void
+    notify: () => void
     initialState: TableState
     internalState: TableState
     reset: () => void
@@ -291,96 +292,6 @@ export type CoreColumnDef<
         header: Header<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
         column: Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
       }>
-} & //           instance: ReactTable< //       | Renderable<{ //       | string //     header?: //     accessorKey?: never //     id: string //     accessorFn: AccessorFn<TData> // | {
-//             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
@@ -450,8 +361,7 @@ export function createTableInstance<
   TSortingFns,
   TAggregationFns
 >(
-  options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  rerender: () => void
+  options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
   if (process.env.NODE_ENV !== 'production' && options.debug) {
     console.info('Creating React Table Instance...')
@@ -465,6 +375,8 @@ export function createTableInstance<
     TAggregationFns
   >
 
+  let listeners: (() => void)[] = []
+
   const defaultOptions = features.reduce((obj, feature) => {
     return Object.assign(obj, (feature as any).getDefaultOptions?.(instance))
   }, {})
@@ -496,10 +408,18 @@ export function createTableInstance<
     TAggregationFns
   > = {
     ...instance,
+    subscribe: cb => {
+      listeners.push(cb)
+      return () => {
+        listeners = listeners.filter(l => l !== cb)
+      }
+    },
+    notify: () => {
+      listeners.forEach(l => l())
+    },
     ...features.reduce((obj, feature) => {
       return Object.assign(obj, (feature as any).getInstance?.(instance))
     }, {}),
-    rerender,
     initialState,
     internalState: initialState,
     reset: () => {
@@ -524,10 +444,7 @@ export function createTableInstance<
       return state
     },
 
-    setState: (
-      updater: Updater<TableState>,
-      shouldRerender: boolean = true
-    ) => {
+    setState: (updater: Updater<TableState>) => {
       const onStateChange = instance.options.onStateChange
 
       let internalState = instance.internalState
@@ -540,9 +457,7 @@ export function createTableInstance<
         return
       }
 
-      if (shouldRerender) {
-        instance.rerender()
-      }
+      instance.notify()
     },
 
     getDefaultColumn: memo(

package/src/createTable.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
 import { Cell, Column, Row } from '.'
 import { createTableInstance } from './core'
 import {
@@ -11,7 +12,13 @@ import {
 } from './types'
 import { Overwrite } from './utils'
 
-export type TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
+export type TableHelper<
+  TData,
+  TValue,
+  TFilterFns,
+  TSortingFns,
+  TAggregationFns
+> = {
   RowType<TTData>(): TableHelper<
     TTData,
     TValue,
@@ -216,25 +223,21 @@ export function createTable<
     useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
       options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
-      const instanceRef = React.useRef<
-        ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-      >(undefined!)
-
-      const rerender = React.useReducer(() => ({}), {})[1]
-
-      if (!instanceRef.current) {
-        instanceRef.current = createTableInstance<
+      const [instance] = React.useState(() =>
+        createTableInstance<
           TData,
           TValue,
           TFilterFns,
           TSortingFns,
           TAggregationFns
-        >(options, rerender)
-      }
+        >(options)
+      )
+
+      useSyncExternalStore(instance.subscribe, () => instance.internalState)
 
-      instanceRef.current.updateOptions(options)
+      instance.updateOptions(options)
 
-      return instanceRef.current
+      return instance
     },
     types: undefined as any,
   } as TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>

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

@@ -217,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 => {

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/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 {}>(