react-tabulator - npm Package Compare versions

Comparing version 0.9.6 to 0.10.0

CHANGELOG.md

@@ -0,3 +1,11 @@
+## [0.10.0] - 2019-10-05
+
+### Changed
+- fixed: critical bug: componentDidUpdate keeps re-rendering table (issue [#82](https://github.com/ngduc/react-tabulator/issues/82))
+
 ## [0.9.6] - 2019-09-06
 
+### Added
+- example for Infinite Scrolling with Ajax Requests
+
 ### Changed
@@ -4,0 +12,0 @@ - upgraded tabulator to 4.4.1

lib/ReactTabulator.d.ts

@@ -15,3 +15,3 @@ import * as React from 'react';
     static getDerivedStateFromProps(props: any, state: any): any;
-    componentDidUpdate(): void;
+    componentDidUpdate(prevProps: IProps, prevState: IState): void;
     pickValidHTMLProps: () => void;
@@ -18,0 +18,0 @@ render(): JSX.Element;

lib/ReactTabulator.js

@@ -93,2 +93,3 @@ "use strict";
             if (!Utils_1.isSameArray(state.data, props.data)) {
+                // console.log('data changed!');
                 return __assign({}, state, { data: props.data });
@@ -100,4 +101,8 @@ }
     // componentDidUpdate(prevProps, prevState)
-    default_1.prototype.componentDidUpdate = function () {
-        this.table.setData(this.state.data);
+    default_1.prototype.componentDidUpdate = function (prevProps, prevState) {
+        // props data changed! (see: getDerivedStateFromProps)
+        if (!Utils_1.isSameArray(prevState.data, this.state.data)) {
+            // only when data is really different: call this.table.setData (will re-render table)
+            this.table.setData(this.state.data);
+        }
     };
@@ -104,0 +109,0 @@ default_1.prototype.render = function () {

lib/ReactTabulatorExample.d.ts

@@ -11,4 +11,5 @@ import * as React from 'react';
     clearData: () => void;
+    renderAjaxScrollExample: () => JSX.Element;
     render(): JSX.Element;
 }
 export {};

lib/ReactTabulatorExample.js

@@ -84,3 +84,4 @@ "use strict";
         _this.state = {
-            data: []
+            data: [],
+            selectedName: ''
         };
@@ -91,2 +92,3 @@ _this.ref = null;
             console.log('rowClick id: ${row.getData().id}', row, e);
+            _this.setState({ selectedName: row.getData().name });
         };
@@ -99,2 +101,34 @@ _this.setData = function () {
         };
+        _this.renderAjaxScrollExample = function () {
+            var columns = [
+                { title: 'First Name', field: 'first_name', width: 150 },
+                { title: 'Last Name', field: 'last_name', width: 150 },
+                { title: 'Email', field: 'email', width: 150 },
+            ];
+            var options = {
+                height: 150,
+                movableRows: true,
+                ajaxProgressiveLoad: 'scroll',
+                ajaxProgressiveLoadDelay: 200,
+                ajaxProgressiveLoadScrollMargin: 100,
+                ajaxURL: 'https://reqres.in/api/users',
+                paginationDataSent: {
+                    page: 'page',
+                    size: 'per_page' // change 'size' param to 'per_page'
+                },
+                paginationDataReceived: {
+                    last_page: 'total_pages'
+                },
+                current_page: 1,
+                paginationSize: 3,
+                ajaxResponse: function (url, params, response) {
+                    console.log('ajaxResponse', url);
+                    return response; //return the response data to tabulator
+                },
+                ajaxError: function (error) {
+                    console.log('ajaxError', error);
+                }
+            };
+            return (React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, data: [], options: options }));
+        };
         return _this;
@@ -110,2 +144,5 @@ }
             React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, data: data, rowClick: this.rowClick, options: options, "data-custom-attr": "test-custom-attribute", className: "custom-css-class" }),
+            React.createElement("div", null,
+                "Selected Name: ",
+                this.state.selectedName),
             React.createElement("h3", null,
@@ -119,2 +156,4 @@ "Asynchronous data: (e.g. fetch) - ",
             React.createElement(ReactTabulator_1["default"], { columns: editableColumns, data: data, cellEdited: function (cell) { return console.log('cellEdited', cell); }, dataEdited: function (newData) { return console.log('dataEdited', newData); }, footerElement: React.createElement("span", null, "Footer") }),
+            React.createElement("h3", null, "Infinite Scrolling with Ajax Requests"),
+            this.renderAjaxScrollExample(),
             React.createElement("p", null,
@@ -121,0 +160,0 @@ React.createElement("a", { href: "https://github.com/ngduc/react-tabulator", target: "_blank" }, "Back to: Github Repo: react-tabulator")),

package.json

 {
   "name": "react-tabulator",
-  "version": "0.9.6",
+  "version": "0.10.0",
   "description": "React Tabulator component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

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

1321048

increased by0.19%

Lines of code

15996

increased by0.28%

No dependency changes