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

package/build/types/core.d.ts

@@ -14,7 +14,8 @@ export declare type CoreOptions<TData, TValue, TFilterFns, TSortingFns, TAggrega
     autoResetAll?: boolean;
 };
 export declare type TableCore<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> = {
-    rerender: () => void;
+    subscribe: (cb: () => void) => () => void;
+    notify: () => void;
     initialState: TableState;
     internalState: TableState;
     reset: () => void;
@@ -76,8 +77,6 @@ export declare type CoreColumnDef<TData, TValue, TFilterFns, TSortingFns, TAggre
         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> // | {
-{
     __generated: true;
     width?: number;
     minWidth?: number;
@@ -108,4 +107,4 @@ export declare type CoreColumn<TData, TValue, TFilterFns, TSortingFns, TAggregat
     getFlatColumns: () => Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[];
     getLeafColumns: () => Column<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>[];
 };
-export declare function createTableInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>, rerender: () => void): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>;
+export declare function createTableInstance<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>;

package/build/types/utils.d.ts

@@ -9,9 +9,6 @@ export declare type Updater<TInput, TOutput> = TOutput | DataUpdateFunction<TInp
 export declare function functionalUpdate<TInput, TOutput = TInput>(updater: Updater<TInput, TOutput>, input: TInput): TOutput;
 export declare function noop(): void;
 export declare function makeStateUpdater(key: keyof TableState, instance: unknown): (updater: Updater<any, any>) => void;
-export declare const safeUseLayoutEffect: typeof React.useLayoutEffect;
-export declare function useMountedLayoutEffect(fn: any, deps: any[]): void;
-export declare function useGetLatest<T>(obj: T): () => T;
 declare type AnyFunction = (...args: any) => any;
 export declare function isFunction<T extends AnyFunction>(d: any): d is T;
 export declare function flattenBy<TNode>(arr: TNode[], getChildren: (item: TNode) => TNode[]): TNode[];
@@ -22,7 +19,6 @@ export declare function memo<TDeps extends readonly any[], TResult>(getDeps: ()
     debug?: boolean;
     onChange?: (result: TResult, previousResult?: TResult) => void;
 }): () => TResult;
-export declare function isPlainObject(o: any): o is Object;
 export declare type Render = typeof flexRender;
 export declare function flexRender<TProps extends {}>(Comp: Renderable<TProps>, props: TProps): React.ReactNode;
 export {};

package/build/umd/index.development.js

@@ -9,10 +9,10 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTable = {}, global.React));
-})(this, (function (exports, React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTable = {}, global.React, global.shim));
+})(this, (function (exports, React, shim) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -416,9 +416,7 @@
         return _extends({}, old, (_extends2 = {}, _extends2[key] = functionalUpdate(updater, old[key]), _extends2));
       });
     };
-  } // SSR has issues with useLayoutEffect still, so use useEffect during SSR
-
-  typeof document !== 'undefined' ? React__default["default"].useLayoutEffect : React__default["default"].useEffect;
+  }
   function isFunction(d) {
     return d instanceof Function;
   }
@@ -452,19 +450,17 @@
     var result;
     return function () {
       var newDeps = getDeps();
-      var newSerializedDeps = newDeps;
-      var oldSerializedDeps = deps;
-      var depsChanged = newSerializedDeps.length !== oldSerializedDeps.length || newSerializedDeps.some(function (dep, index) {
-        return oldSerializedDeps[index] !== dep;
+      var depsChanged = newDeps.length !== deps.length || newDeps.some(function (dep, index) {
+        return deps[index] !== dep;
       });
 
       if (depsChanged) {
         if (opts != null && opts.debug) {
           console.info(opts == null ? void 0 : opts.key, _extends({
-            length: oldSerializedDeps.length + " -> " + newSerializedDeps.length
-          }, newSerializedDeps.map(function (_, index) {
-            if (oldSerializedDeps[index] !== newSerializedDeps[index]) {
-              return [index, oldSerializedDeps[index], newSerializedDeps[index]];
+            length: deps.length + " -> " + newDeps.length
+          }, newDeps.map(function (_, index) {
+            if (deps[index] !== newDeps[index]) {
+              return [index, deps[index], newDeps[index]];
             }
 
             return false;
@@ -479,15 +475,14 @@
 
         var oldResult = result;
         result = fn.apply(void 0, newDeps);
-        deps = newSerializedDeps;
+        deps = newDeps;
         opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result, oldResult);
         oldResult = undefined;
       }
 
       return result;
     };
-  } // Copied from: https://github.com/jonschlinkert/is-plain-object
-
+  }
   function flexRender(Comp, props) {
     return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React__default["default"].createElement(Comp, props) : Comp;
   }
@@ -1089,9 +1084,9 @@
         return (_instance$getState$gr2 = instance.getState().grouping) == null ? void 0 : _instance$getState$gr2.indexOf(columnId);
       },
       resetGrouping: function resetGrouping() {
-        var _instance$options$ini, _instance$options, _instance$options$ini2;
+        var _instance$initialStat, _instance$initialStat2;
 
-        instance.setGrouping((_instance$options$ini = (_instance$options = instance.options) == null ? void 0 : (_instance$options$ini2 = _instance$options.initialState) == null ? void 0 : _instance$options$ini2.grouping) != null ? _instance$options$ini : []);
+        instance.setGrouping((_instance$initialStat = (_instance$initialStat2 = instance.initialState) == null ? void 0 : _instance$initialStat2.grouping) != null ? _instance$initialStat : []);
       },
       getToggleGroupingProps: function getToggleGroupingProps(columnId, userProps) {
         var column = instance.getColumn(columnId);
@@ -1314,9 +1309,9 @@
         return instance.options.onColumnPinningChange == null ? void 0 : instance.options.onColumnPinningChange(updater, functionalUpdate(updater, instance.getState().columnPinning));
       },
       resetColumnPinning: function resetColumnPinning() {
-        var _instance$options$ini, _instance$options$ini2;
+        var _instance$initialStat, _instance$initialStat2;
 
-        return instance.setColumnPinning((_instance$options$ini = (_instance$options$ini2 = instance.options.initialState) == null ? void 0 : _instance$options$ini2.columnPinning) != null ? _instance$options$ini : {});
+        return instance.setColumnPinning((_instance$initialStat = (_instance$initialStat2 = instance.initialState) == null ? void 0 : _instance$initialStat2.columnPinning) != null ? _instance$initialStat : {});
       },
       pinColumn: function pinColumn(columnId, position) {
         var column = instance.getColumn(columnId);
@@ -2398,9 +2393,9 @@
         });
       },
       resetColumnFilters: function resetColumnFilters() {
-        var _instance$options$ini, _instance$options2, _instance$options2$in;
+        var _instance$initialStat, _instance$initialStat2;
 
-        instance.setColumnFilters((_instance$options$ini = (_instance$options2 = instance.options) == null ? void 0 : (_instance$options2$in = _instance$options2.initialState) == null ? void 0 : _instance$options2$in.columnFilters) != null ? _instance$options$ini : []);
+        instance.setColumnFilters((_instance$initialStat = (_instance$initialStat2 = instance.initialState) == null ? void 0 : _instance$initialStat2.columnFilters) != null ? _instance$initialStat : []);
       },
       getColumnFilteredRowModel: memo(function () {
         return [instance.getState().columnFilters, instance.getCoreRowModel(), instance.options.columnFilterRowsFn];
@@ -2500,7 +2495,7 @@
         key: 'getGlobalFilteredRowModel',
         debug: instance.options.debug,
         onChange: function onChange() {
-          return instance._notifySortingReset();
+          instance._notifySortingReset();
         }
       }),
       getPreGlobalFilteredRows: function getPreGlobalFilteredRows() {
@@ -2887,9 +2882,9 @@
         })) != null ? _instance$getState$so2 : -1;
       },
       resetSorting: function resetSorting() {
-        var _instance$options$ini, _instance$options, _instance$options$ini2;
+        var _instance$initialStat, _instance$initialStat2;
 
-        instance.setSorting((_instance$options$ini = (_instance$options = instance.options) == null ? void 0 : (_instance$options$ini2 = _instance$options.initialState) == null ? void 0 : _instance$options$ini2.sorting) != null ? _instance$options$ini : []);
+        instance.setSorting((_instance$initialStat = (_instance$initialStat2 = instance.initialState) == null ? void 0 : _instance$initialStat2.sorting) != null ? _instance$initialStat : []);
       },
       getToggleSortingProps: function getToggleSortingProps(columnId, userProps) {
         var column = instance.getColumn(columnId);
@@ -2994,13 +2989,9 @@
       toggleRowExpanded: function toggleRowExpanded(rowId, expanded) {
         if (!rowId) return;
         instance.setExpanded(function (old) {
-          var _old, _expanded;
+          var _expanded;
 
-          if (old === void 0) {
-            old = {};
-          }
-
-          var exists = old === true ? true : !!((_old = old) != null && _old[rowId]);
+          var exists = old === true ? true : !!(old != null && old[rowId]);
           var oldExpanded = {};
 
           if (old === true) {
@@ -3038,9 +3029,9 @@
         }
       },
       resetExpanded: function resetExpanded() {
-        var _instance$options$ini, _instance$options, _instance$options$ini2;
+        var _instance$initialStat, _instance$initialStat2;
 
-        instance.setExpanded((_instance$options$ini = (_instance$options = instance.options) == null ? void 0 : (_instance$options$ini2 = _instance$options.initialState) == null ? void 0 : _instance$options$ini2.expanded) != null ? _instance$options$ini : {});
+        instance.setExpanded((_instance$initialStat = (_instance$initialStat2 = instance.initialState) == null ? void 0 : _instance$initialStat2.expanded) != null ? _instance$initialStat : {});
       },
       getIsRowExpanded: function getIsRowExpanded(rowId) {
         var _instance$options$get;
@@ -3140,7 +3131,7 @@
         key: 'getExpandedRowModel',
         debug: instance.options.debug,
         onChange: function onChange() {
-          return instance._notifyPageIndexReset();
+          instance._notifyPageIndexReset();
         }
       }),
       getPreExpandedRows: function getPreExpandedRows() {
@@ -3568,9 +3559,9 @@
         instance.setPageIndex(0);
       },
       resetPageSize: function resetPageSize() {
-        var _instance$options$ini, _instance$options$ini2, _instance$options$ini3;
+        var _instance$initialStat2, _instance$initialStat3, _instance$initialStat4;
 
-        instance.setPageSize((_instance$options$ini = (_instance$options$ini2 = instance.options.initialState) == null ? void 0 : (_instance$options$ini3 = _instance$options$ini2.pagination) == null ? void 0 : _instance$options$ini3.pageSize) != null ? _instance$options$ini : 10);
+        instance.setPageSize((_instance$initialStat2 = (_instance$initialStat3 = instance.initialState) == null ? void 0 : (_instance$initialStat4 = _instance$initialStat3.pagination) == null ? void 0 : _instance$initialStat4.pageSize) != null ? _instance$initialStat2 : 10);
       },
       setPageSize: function setPageSize(updater) {
         instance.setPagination(function (old) {
@@ -4210,7 +4201,7 @@
   });
 
   var features = [Visibility, Ordering, Pinning, Headers, Filters, Sorting, Grouping, Expanding, ColumnSizing, Pagination, RowSelection];
-  function createTableInstance(options, rerender) {
+  function createTableInstance(options) {
     var _options$initialState;
 
     if (options.debug) {
@@ -4218,6 +4209,7 @@
     }
 
     var instance = {};
+    var listeners = [];
     var defaultOptions = features.reduce(function (obj, feature) {
       return Object.assign(obj, feature.getDefaultOptions == null ? void 0 : feature.getDefaultOptions(instance));
     }, {});
@@ -4235,10 +4227,23 @@
       return Object.assign(obj, feature.getInitialState == null ? void 0 : feature.getInitialState());
     }, {}), (_options$initialState = options.initialState) != null ? _options$initialState : {});
 
-    var finalInstance = _extends({}, instance, features.reduce(function (obj, feature) {
+    var finalInstance = _extends({}, instance, {
+      subscribe: function subscribe(cb) {
+        listeners.push(cb);
+        return function () {
+          listeners = listeners.filter(function (l) {
+            return l !== cb;
+          });
+        };
+      },
+      notify: function notify() {
+        listeners.forEach(function (l) {
+          return l();
+        });
+      }
+    }, features.reduce(function (obj, feature) {
       return Object.assign(obj, feature.getInstance == null ? void 0 : feature.getInstance(instance));
     }, {}), {
-      rerender: rerender,
       initialState: initialState,
       internalState: initialState,
       reset: function reset() {
@@ -4255,11 +4260,7 @@
 
         return state;
       },
-      setState: function setState(updater, shouldRerender) {
-        if (shouldRerender === void 0) {
-          shouldRerender = true;
-        }
-
+      setState: function setState(updater) {
         var onStateChange = instance.options.onStateChange;
         var internalState = instance.internalState;
         var newState = functionalUpdate(updater, internalState);
@@ -4270,9 +4271,7 @@
           return;
         }
 
-        if (shouldRerender) {
-          instance.rerender();
-        }
+        instance.notify();
       },
       getDefaultColumn: memo(function () {
         return [instance.options.defaultColumn];
@@ -4775,17 +4774,16 @@
         throw new Error('Invalid accessor');
       },
       useTable: function useTable(options) {
-        var instanceRef = React__namespace.useRef(undefined);
-        var rerender = React__namespace.useReducer(function () {
-          return {};
-        }, {})[1];
-
-        if (!instanceRef.current) {
-          instanceRef.current = createTableInstance(options, rerender);
-        }
+        var _React$useState = React__namespace.useState(function () {
+          return createTableInstance(options);
+        }),
+            instance = _React$useState[0];
 
-        instanceRef.current.updateOptions(options);
-        return instanceRef.current;
+        shim.useSyncExternalStore(instance.subscribe, function () {
+          return instance.internalState;
+        });
+        instance.updateOptions(options);
+        return instance;
       },
       types: undefined
     };