react-tabulator - npm Package Compare versions

Comparing version 0.18.0 to 0.18.1

lib/ReactTabulator.d.ts

@@ -8,3 +8,10 @@ /// <reference types="react" />
 }
-declare const ReactTabulator: (props: any) => JSX.Element;
+export interface ReactTabulatorProps {
+    columns?: ColumnDefinition[];
+    options?: any;
+    events?: any;
+    onRef?: (ref: any) => void;
+    [k: string]: any;
+}
+declare const ReactTabulator: (props: ReactTabulatorProps) => JSX.Element;
 export default ReactTabulator;

lib/ReactTabulator.js

@@ -86,2 +86,3 @@ "use strict";
                     }
+                    props.onRef && props.onRef(instanceRef);
                     return [2 /*return*/];
@@ -92,6 +93,7 @@ }
     React.useEffect(function () {
+        // console.log('useEffect - onmount');
         initTabulator();
     }, []);
     React.useEffect(function () {
-        console.log('instanceRef.current', instanceRef.current);
+        // console.log('useEffect - props.data changed');
         if (instanceRef && instanceRef.current) {
@@ -98,0 +100,0 @@ initTabulator(); // re-init table

lib/ReactTabulatorExample.d.ts

@@ -1,15 +0,3 @@
-import * as React from 'react';
-interface IProps {
-    data: any[];
-}
-export default class extends React.Component<IProps> {
-    state: any;
-    ref: any;
-    rowClick: (e: any, row: any) => void;
-    setData: () => void;
-    clearData: () => void;
-    modifyData: () => void;
-    renderAjaxScrollExample: () => JSX.Element;
-    render(): JSX.Element;
-}
-export {};
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

lib/ReactTabulatorExample.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var _a;
@@ -40,3 +25,3 @@ exports.__esModule = true;
     { title: 'Passed?', field: 'passed', hozAlign: 'center', formatter: 'tickCross' },
-    { title: 'Custom', field: 'custom', hozAlign: 'center', editor: 'input', formatter: (0, Utils_1.reactFormatter)(React.createElement(SimpleButton, null)) },
+    { title: 'Custom', field: 'custom', hozAlign: 'center', editor: 'input', formatter: (0, Utils_1.reactFormatter)(React.createElement(SimpleButton, null)) }
 ];
@@ -63,6 +48,10 @@ var data = [
 var colorOptions = (_a = {}, _a[''] = ' ', _a.red = 'red', _a.green = 'green', _a.yellow = 'yellow', _a);
-var petOptions = [{ id: 'cat', name: 'cat' }, { id: 'dog', name: 'dog' }, { id: 'fish', name: 'fish' }];
+var petOptions = [
+    { id: 'cat', name: 'cat' },
+    { id: 'dog', name: 'dog' },
+    { id: 'fish', name: 'fish' }
+];
 var editableColumns = [
     { title: 'Name', field: 'name', width: 150, editor: 'input', headerFilter: 'input' },
-    { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress', editor: 'progress' },
+    { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress', editor: 'star' },
     {
@@ -88,107 +77,98 @@ title: 'Favourite Color',
 ];
-var default_1 = /** @class */ (function (_super) {
-    __extends(default_1, _super);
-    function default_1() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            data: [],
-            selectedName: ''
+exports["default"] = (function () {
+    var _a = React.useState({
+        data: [],
+        selectedName: ''
+    }), state = _a[0], setState = _a[1];
+    var ref = React.useRef();
+    var rowClick = function (e, row) {
+        console.log('ref table: ', ref.current); // this is the Tabulator table instance
+        // ref?.current && ref?.current.replaceData([])
+        console.log('rowClick id: ${row.getData().id}', row, e);
+        setState({ selectedName: row.getData().name });
+    };
+    var setData = function () {
+        setState({ data: data });
+    };
+    var clearData = function () {
+        setState({ data: [] });
+    };
+    var modifyData = function () {
+        var _newData = data.filter(function (item) { return item.name === 'Oli Bob'; });
+        setState({ data: _newData });
+    };
+    var 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: 100,
+            movableRows: true,
+            progressiveLoad: 'scroll',
+            progressiveLoadDelay: 200,
+            progressiveLoadScrollMargin: 30,
+            ajaxURL: 'https://reqres.in/api/users',
+            dataSendParams: {
+                page: 'page',
+                size: 'per_page'
+            },
+            dataReceiveParams: {
+                last_page: 'last'
+            },
+            paginationSize: 5,
+            ajaxResponse: function (url, params, response) {
+                console.log('url, params, response', url, params, response);
+                return {
+                    data: response.data,
+                    last: response.total_pages
+                };
+            },
+            ajaxError: function (error) {
+                console.log('ajaxError', error);
+            }
         };
-        _this.ref = null;
-        _this.rowClick = function (e, row) {
-            console.log('ref table: ', _this.ref.table); // this is the Tabulator table instance
-            console.log('rowClick id: ${row.getData().id}', row, e);
-            _this.setState({ selectedName: row.getData().name });
-        };
-        _this.setData = function () {
-            _this.setState({ data: data });
-        };
-        _this.clearData = function () {
-            _this.setState({ data: [] });
-        };
-        _this.modifyData = function () {
-            var _newData = data.filter(function (item) { return item.name === 'Oli Bob'; });
-            _this.setState({ data: _newData });
-        };
-        _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: 100,
-                movableRows: true,
-                progressiveLoad: 'scroll',
-                progressiveLoadDelay: 200,
-                progressiveLoadScrollMargin: 30,
-                ajaxURL: 'https://reqres.in/api/users',
-                dataSendParams: {
-                    page: "page",
-                    size: "per_page"
+        return (React.createElement(ReactTabulator_1["default"], { onRef: function (r) { return (ref = r); }, columns: columns, options: options, events: {
+                dataLoaded: function (data) {
+                    console.log('dataLoaded', data);
+                    // return data; //return the response data to tabulator
+                    var modResponse = {};
+                    modResponse.data = data;
+                    modResponse.last = 5;
+                    return modResponse;
                 },
-                dataReceiveParams: {
-                    last_page: 'last'
-                },
-                paginationSize: 5,
-                ajaxResponse: function (url, params, response) {
-                    console.log('url, params, response', url, params, response);
-                    return {
-                        data: response.data,
-                        last: response.total_pages
-                    };
-                },
                 ajaxError: function (error) {
                     console.log('ajaxError', error);
                 }
-            };
-            return (React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, options: options, events: {
-                    dataLoaded: function (data) {
-                        console.log('dataLoaded', data);
-                        // return data; //return the response data to tabulator
-                        var modResponse = {};
-                        modResponse.data = data;
-                        modResponse.last = 5;
-                        return modResponse;
-                    },
-                    ajaxError: function (error) {
-                        console.log('ajaxError', error);
-                    }
-                } }));
-        };
-        return _this;
-    }
-    default_1.prototype.render = function () {
-        var _this = this;
-        var options = {
-            height: 150,
-            movableRows: true,
-            movableColumns: true
-        };
-        return (React.createElement("div", null,
-            React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, columns: columns, data: data, events: {
-                    rowClick: this.rowClick
-                }, options: options, "data-custom-attr": "test-custom-attribute", className: "custom-css-class" }),
-            React.createElement("i", null,
-                "Selected Name: ",
-                React.createElement("strong", null, this.state.selectedName)),
-            React.createElement("h3", null,
-                "Asynchronous data: (e.g. fetch) - ",
-                React.createElement("button", { onClick: this.setData }, "Set Data"),
-                ' ',
-                React.createElement("button", { onClick: this.clearData }, "Clear"),
-                ' ',
-                React.createElement("button", { onClick: this.modifyData }, "Modify Data")),
-            React.createElement(ReactTabulator_1["default"], { columns: columns, data: this.state.data }),
-            React.createElement("h3", null, "Editable Table"),
-            React.createElement(ReactTabulator_1["default"], { columns: editableColumns, data: data, cellEdited: function (cell) { return console.log('cellEdited', cell); }, dataChanged: function (newData) { return console.log('dataChanged', newData); }, footerElement: React.createElement("span", null, "Footer"), options: { movableColumns: true, movableRows: true } }),
-            React.createElement("h3", null, "Infinite Scrolling with Ajax Requests"),
-            this.renderAjaxScrollExample(),
-            React.createElement("p", null,
-                React.createElement("a", { href: "https://github.com/ngduc/react-tabulator", target: "_blank" }, "Back to: Github Repo: react-tabulator")),
-            React.createElement("p", null,
-                React.createElement("a", { href: "http://tabulator.info/examples/4.0", target: "_blank" }, "More Tabulator's Examples"))));
+            } }));
     };
-    return default_1;
-}(React.Component));
-exports["default"] = default_1;
+    var options = {
+        height: 150,
+        movableRows: true,
+        movableColumns: true
+    };
+    return (React.createElement("div", null,
+        React.createElement(ReactTabulator_1["default"], { onRef: function (ref) { return (ref = ref); }, columns: columns, data: data, events: {
+                rowClick: rowClick
+            }, options: options, "data-custom-attr": "test-custom-attribute", className: "custom-css-class" }),
+        React.createElement("i", null,
+            "Selected Name: ",
+            React.createElement("strong", null, state.selectedName)),
+        React.createElement("h3", null,
+            "Asynchronous data: (e.g. fetch) - ",
+            React.createElement("button", { onClick: setData }, "Set Data"),
+            ' ',
+            React.createElement("button", { onClick: clearData }, "Clear"),
+            " ",
+            React.createElement("button", { onClick: modifyData }, "Modify Data")),
+        React.createElement(ReactTabulator_1["default"], { columns: columns, data: state.data }),
+        React.createElement("h3", null, "Editable Table"),
+        React.createElement(ReactTabulator_1["default"], { columns: editableColumns, data: data, cellEdited: function (cell) { return console.log('cellEdited', cell); }, dataChanged: function (newData) { return console.log('dataChanged', newData); }, footerElement: React.createElement("span", null, "Footer"), options: { movableColumns: true, movableRows: true } }),
+        React.createElement("h3", null, "Infinite Scrolling with Ajax Requests"),
+        renderAjaxScrollExample(),
+        React.createElement("p", null,
+            React.createElement("a", { href: "https://github.com/ngduc/react-tabulator", target: "_blank" }, "Back to: Github Repo: react-tabulator")),
+        React.createElement("p", null,
+            React.createElement("a", { href: "http://tabulator.info/examples/4.0", target: "_blank" }, "More Tabulator's Examples"))));
+});

package.json

 {
   "name": "react-tabulator",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "React Tabulator is based on tabulator - a JS table library with many advanced features.",
@@ -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

Worsened metrics

Total package byte prevSize

4109366

decreased by-0.03%

Lines of code

38898

decreased by-0.06%

No dependency changes