@tanstack/react-table 8.0.0-alpha.7 → 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;
@@ -106,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/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 }; }
 
@@ -4201,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) {
@@ -4209,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));
     }, {});
@@ -4226,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() {
@@ -4246,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);
@@ -4261,9 +4271,7 @@
           return;
         }
 
-        if (shouldRerender) {
-          instance.rerender();
-        }
+        instance.notify();
       },
       getDefaultColumn: memo(function () {
         return [instance.options.defaultColumn];
@@ -4766,31 +4774,16 @@
         throw new Error('Invalid accessor');
       },
       useTable: function useTable(options) {
-        var instanceRef = React__namespace.useRef(undefined);
-        var unsafeRerender = React__namespace.useReducer(function () {
-          return {};
-        }, {})[1];
-        var isMountedRef = React__namespace.useRef(false);
-        var rerender = React__namespace.useCallback(function () {
-          if (!isMountedRef.current) {
-            return;
-          }
+        var _React$useState = React__namespace.useState(function () {
+          return createTableInstance(options);
+        }),
+            instance = _React$useState[0];
 
-          unsafeRerender();
-        }, []);
-        React__namespace.useLayoutEffect(function () {
-          isMountedRef.current = true;
-          return function () {
-            isMountedRef.current = false;
-          };
+        shim.useSyncExternalStore(instance.subscribe, function () {
+          return instance.internalState;
         });
-
-        if (!instanceRef.current) {
-          instanceRef.current = createTableInstance(options, rerender);
-        }
-
-        instanceRef.current.updateOptions(options);
-        return instanceRef.current;
+        instance.updateOptions(options);
+        return instance;
       },
       types: undefined
     };