react-tabulator - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

lib/ReactTabulator.js

@@ -21,25 +21,27 @@ "use strict";
     function default_1() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.mainId = "tabulator-" + +new Date() + "-" + Math.floor(Math.random() * 9999999); // random id
+        _this.table = null; // will be set once Tabulator instantiated
+        return _this;
     }
     default_1.prototype.componentDidMount = function () {
-        var table = new Tabulator('#tabulator-container', {
-            height: 205,
+        var that = this;
+        var _a = this.props, _b = _a.height, height = _b === void 0 ? 220 : _b, columns = _a.columns, data = _a.data, onRowClick = _a.onRowClick;
+        var table = new Tabulator("#" + this.mainId, {
+            height: height,
             layout: 'fitColumns',
-            columns: [
-                // Define Table Columns
-                { title: 'Name', field: 'name', width: 150 },
-                { title: 'Age', field: 'age', align: 'left', formatter: 'progress' },
-                { title: 'Favourite Color', field: 'col' },
-                { title: 'Date Of Birth', field: 'dob', sorter: 'date', align: 'center' }
-            ],
+            columns: columns,
+            tableBuilding: function () {
+                that.table = this;
+            },
             rowClick: function (e, row) {
-                // trigger an alert message when the row is clicked
-                console.log('Row ' + row.getData().id + ' Clicked!', row, e);
+                if (onRowClick) {
+                    onRowClick(e, row);
+                }
             }
         });
-        // load sample data into the table
-        table.setData(this.props.data);
+        table.setData(data);
     };
     default_1.prototype.render = function () {
-        return React.createElement("div", { id: "tabulator-container" });
+        return React.createElement("div", { id: this.mainId });
     };
@@ -46,0 +48,0 @@ return default_1;

lib/ReactTabulatorExample.js

@@ -18,8 +18,16 @@ "use strict";
 var ReactTabulator_1 = require("./ReactTabulator");
+var columns = [
+    { title: 'Name', field: 'name', width: 150 },
+    { title: 'Age', field: 'age', align: 'left', formatter: 'progress' },
+    { title: 'Favourite Color', field: 'col' },
+    { title: 'Date Of Birth', field: 'dob', sorter: 'date', align: 'center' }
+];
 var data = [
     { id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' },
-    { id: 2, name: 'Mary May', age: '1', col: 'blue', dob: '14/05/1982' },
-    { id: 3, name: 'Christine Lobowski', age: '42', col: 'green', dob: '22/05/1982' },
+    { id: 2, name: 'Mary May', age: '1', col: 'blue', dob: '14/05/1989' },
+    { id: 3, name: 'Christine Lobowski', age: '42', col: 'green', dob: '22/05/1985' },
     { id: 4, name: 'Brendon Philips', age: '125', col: 'orange', dob: '01/08/1980' },
-    { id: 5, name: 'Margret Marmajuke', age: '16', col: 'yellow', dob: '31/01/1999' }
+    { id: 5, name: 'Margret Marmajuke', age: '16', col: 'yellow', dob: '31/01/1999' },
+    { id: 6, name: 'Van Ng', age: '37', col: 'green', dob: '06/15/1982' },
+    { id: 7, name: 'Duc Ng', age: '37', col: 'yellow', dob: '10/15/1982' }
 ];
@@ -29,7 +37,14 @@ var default_1 = /** @class */ (function (_super) {
     function default_1() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.ref = null;
+        _this.onRowClick = function (e, row) {
+            console.log('ref table: ', _this.ref.table); // this is the Tabulator table instance
+            console.log('onRowClick id: ${row.getData().id}', row, e);
+        };
+        return _this;
     }
     default_1.prototype.render = function () {
+        var _this = this;
         return (React.createElement("div", null,
-            React.createElement(ReactTabulator_1["default"], { data: data })));
+            React.createElement(ReactTabulator_1["default"], { ref: function (ref) { return (_this.ref = ref); }, height: 150, columns: columns, data: data, onRowClick: this.onRowClick })));
     };
@@ -36,0 +51,0 @@ return default_1;

package.json

 {
   "name": "react-tabulator",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
@@ -14,6 +14,8 @@ "main": "lib/index.js",
   "scripts": {
-    "build": "tsc --outDir ./lib --jsx react ./src/index.tsx",
+    "build": "npm run clean && tsc --outDir ./lib --jsx react ./src/index.tsx && npm run postbuild",
+    "postbuild": "cp ./src/styles.css ./lib/",
     "clean": "nwb clean-module && nwb clean-demo",
     "prepublishOnly": "npm run build",
-    "start": "nwb serve-react-demo",
+    "start": "nwb serve-react-demo --port 3003",
+    "dev": "concurrently --kill-others \"npm run dev:watch\" \"npm run start\"",
     "dev:watch": "tsc --outDir ./lib --jsx react --watch ./src/index.tsx",
@@ -49,2 +51,3 @@ "test": "nwb test-react",
     "awesome-typescript-loader": "^5.2.1",
+    "concurrently": "^4.0.1",
     "nwb": "0.23.x",
@@ -51,0 +54,0 @@ "react": "^16.5.2",

README.md

@@ -10,2 +10,3 @@ # react-tabulator
 
+import 'react-tabulator/lib/styles.css';
 import { ReactTabulator } from 'react-tabulator';
@@ -12,0 +13,0 @@

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

Number of lines in readme file

23

increased by4.55%

Worsened metrics

Total package byte prevSize

22249

decreased by-37.72%

Dev dependency count

11

increased by10%

Number of package files

8

decreased by-11.11%

Lines of code

639

decreased by-44.82%

No dependency changes