react-base-table - npm Package Compare versions

Comparing version 1.10.9 to 1.11.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # CHANGELOG
 
+## v1.11.0 (2020-08-17)
+
+- feat: add `ignoreFunctionInColumnCompare` to solve closure problem in renderers
+- chore: skip unnecessary cloneElement in `renderElement`
+- feat: add type declarations
+
 ## v1.10.9 (2020-08-13)
@@ -7,0 +13,0 @@

es/BaseTable.js

@@ -111,3 +111,5 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
       }
-    }, isObjectEqual);
+    }, function (newArgs, lastArgs) {
+      return isObjectEqual(newArgs, lastArgs, _this.props.ignoreFunctionInColumnCompare);
+    });
     _this._isResetting = false;
@@ -229,2 +231,5 @@ _this._resetIndex = null;
    * Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
+   *
+   * @param {number} rowIndex
+   * @param {boolean} shouldForceUpdate
    */
@@ -309,3 +314,4 @@ ;
    * - `start` - Align the row to the top side of the table.
-    * @param {number} rowIndex
+   *
+   * @param {number} rowIndex
    * @param {string} align
@@ -1231,2 +1237,3 @@ */
   getScrollbarSize: defaultGetScrollbarSize,
+  ignoreFunctionInColumnCompare: true,
   onScroll: noop,
@@ -1530,2 +1537,7 @@ onRowsRendered: noop,
   /**
+   * whether to ignore function properties while comparing column definition
+   */
+  ignoreFunctionInColumnCompare: PropTypes.bool,
+
+  /**
    * A object for the custom components, like `ExpandIcon` and `SortIndicator`
@@ -1532,0 +1544,0 @@ */

es/utils.js

@@ -10,2 +10,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   if (React.isValidElement(renderer)) {
+    if (!props) return renderer;
     return React.cloneElement(renderer, props);
@@ -37,3 +38,7 @@ } else if (typeof renderer === 'function') {
 }
-export function isObjectEqual(objA, objB) {
+export function isObjectEqual(objA, objB, ignoreFunction) {
+  if (ignoreFunction === void 0) {
+    ignoreFunction = true;
+  }
+
   if (objA === objB) return true;
@@ -49,9 +54,18 @@ if (objA === null && objB === null) return true;
     var key = keysA[i];
+
+    if (key === '_owner' && objA.$$typeof) {
+      // React-specific: avoid traversing React elements' _owner.
+      //  _owner contains circular references
+      // and is not needed when comparing the actual elements (and not their owners)
+      continue;
+    }
+
     var valueA = objA[key];
     var valueB = objB[key];
-    if (typeof valueA !== typeof valueB) return false;
-    if (typeof valueA === 'function') continue;
+    var valueAType = typeof valueA;
+    if (valueAType !== typeof valueB) return false;
+    if (valueAType === 'function' && ignoreFunction) continue;
 
-    if (typeof valueA === 'object') {
-      if (!isObjectEqual(valueA, valueB)) return false;else continue;
+    if (valueAType === 'object') {
+      if (!isObjectEqual(valueA, valueB, ignoreFunction)) return false;else continue;
     }
@@ -58,0 +72,0 @@

lib/BaseTable.js

@@ -151,3 +151,5 @@ "use strict";
       }
-    }, _utils.isObjectEqual);
+    }, function (newArgs, lastArgs) {
+      return (0, _utils.isObjectEqual)(newArgs, lastArgs, _this.props.ignoreFunctionInColumnCompare);
+    });
     _this._isResetting = false;
@@ -275,2 +277,5 @@ _this._resetIndex = null;
      * Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
+     *
+     * @param {number} rowIndex
+     * @param {boolean} shouldForceUpdate
      */
@@ -354,3 +359,4 @@
      * - `start` - Align the row to the top side of the table.
-      * @param {number} rowIndex
+     *
+     * @param {number} rowIndex
      * @param {string} align
@@ -1312,2 +1318,3 @@ */
   getScrollbarSize: _utils.getScrollbarSize,
+  ignoreFunctionInColumnCompare: true,
   onScroll: _utils.noop,
@@ -1611,2 +1618,7 @@ onRowsRendered: _utils.noop,
   /**
+   * whether to ignore function properties while comparing column definition
+   */
+  ignoreFunctionInColumnCompare: _propTypes["default"].bool,
+
+  /**
    * A object for the custom components, like `ExpandIcon` and `SortIndicator`
@@ -1613,0 +1625,0 @@ */

lib/utils.js

@@ -36,2 +36,3 @@ "use strict";
   if (_react["default"].isValidElement(renderer)) {
+    if (!props) return renderer;
     return _react["default"].cloneElement(renderer, props);
@@ -68,2 +69,3 @@ } else if (typeof renderer === 'function') {
 function isObjectEqual(objA, objB) {
+  var ignoreFunction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   if (objA === objB) return true;
@@ -79,9 +81,18 @@ if (objA === null && objB === null) return true;
     var key = keysA[i];
+
+    if (key === '_owner' && objA.$$typeof) {
+      // React-specific: avoid traversing React elements' _owner.
+      //  _owner contains circular references
+      // and is not needed when comparing the actual elements (and not their owners)
+      continue;
+    }
+
     var valueA = objA[key];
     var valueB = objB[key];
-    if ((0, _typeof2["default"])(valueA) !== (0, _typeof2["default"])(valueB)) return false;
-    if (typeof valueA === 'function') continue;
+    var valueAType = (0, _typeof2["default"])(valueA);
+    if (valueAType !== (0, _typeof2["default"])(valueB)) return false;
+    if (valueAType === 'function' && ignoreFunction) continue;
 
-    if ((0, _typeof2["default"])(valueA) === 'object') {
-      if (!isObjectEqual(valueA, valueB)) return false;else continue;
+    if (valueAType === 'object') {
+      if (!isObjectEqual(valueA, valueB, ignoreFunction)) return false;else continue;
     }
@@ -88,0 +99,0 @@

package.json

 {
   "name": "react-base-table",
-  "version": "1.10.9",
+  "version": "1.11.0",
   "description": "a react table component to display large data set with high performance and flexibility",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "types": "types/index.d.ts",
   "files": [
@@ -65,2 +66,3 @@ "lib/",
     "@babel/preset-react": "^7.0.0",
+    "@types/react": "^16.9.46",
     "babel-core": "^7.0.0-bridge.0",
@@ -67,0 +69,0 @@ "babel-eslint": "^9.0.0",

README.md

@@ -37,13 +37,29 @@ # react-base-table
 
-**Make sure each item in `data` is unique by a key, the default key is `id`, you can customize it via `rowKey`**
+### unique key
 
-**`key` is required for column definition or the column will be ignored**
+`key` is required for column definition or the column will be ignored
 
-**`width` and `height`(or `maxHeight`) are required to display the table properly**
+Make sure each item in `data` is unique by a key, the default key is `id`, you can customize it via `rowKey`
 
+### size
+
+`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example
+
+`width` and `height`(or `maxHeight`) are required to display the table properly
+
 In the [examples](https://autodesk.github.io/react-base-table/examples)
 we are using a wrapper `const Table = props => <BaseTable width={700} height={400} {...props} />` to do that
 
-If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize example](https://autodesk.github.io/react-base-table/examples/auto-resize)
+If you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example
 
+### closure problem in custom renderers
+
+In practice we tend to write inline functions for custom renderers, which would make `shouldUpdateComponent` always true as the inline function will create a new instance on every re-render, to avoid "unnecessary" re-renders, **`BaseTable` ignores functions when comparing column definition by default**, it works well in most cases before, but if we use external data instead of reference state in custom renderers, we always get the staled initial value although the data has changed
+
+It's recommended to inject the external data in column definition to solve the problem, like `<Column foo={foo} bar={bar} cellRenderer={({ column: { foo, bar }}) => { ... } } />`, the column definition will update on external data change, with this pattern we can easily move the custom renderers out of column definition for sharing, the downside is it would bloat the column definition and bug prone
+
+Things getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0`
+
+Here is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate 
+
 ## Browser Support
@@ -121,3 +137,3 @@
 
-[In real products](https://blogs.autodesk.com/bim360-release-notes/2019/11/18/bim-360-cost-management-update-november-2019/) 
+[In real products](https://blogs.autodesk.com/bim360-release-notes/2019/11/18/bim-360-cost-management-update-november-2019/)
 
@@ -124,0 +140,0 @@ ## Development

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

906992

increased by0.79%

Lines of code

6883

increased by0.61%

Number of lines in readme file

145

increased by12.4%

Worsened metrics

Dev dependency count

31

increased by3.33%

No dependency changes