added 'events' prop

CHANGELOG.md

@@ -1,8 +1,9 @@
-## [0.16.9] - 2022-01-18
-- upgraded tabulator-tables to 5.0.10
-- use pnpm instead of npm
-- feat: new prop "checkOptions": if set to true, it will rerender when options changed.
+## [0.17.0] - 2022-01-18
+- BREAKING: upgraded tabulator-tables to 5.0.10
+- BREAKING: added "events" prop, callback props (like: rowClick) are now deprecated.
+- feat: added "checkOptions" prop: if set to true, it will rerender when options changed.
 - feat: added typescript types: ReactTabulatorOptions
+- use pnpm instead of npm
 
 ## [0.16.1] - 2021-11-15
 - upgraded tabulator-tables to 5.0.7

README.md

@@ -38,9 +38,10 @@ import 'react-tabulator/lib/styles.css'; // required styles
 import 'react-tabulator/lib/css/tabulator.min.css'; // theme
 import { ReactTabulator } from 'react-tabulator';
 
-    <ReactTabulator columns={columns} data={data} options={} />
+    <ReactTabulator columns={columns} data={data} options={} events={{ rowClick: rowClickHandler }} />
 
 * "options" will be passed directly to Tabulator's options.
+* "events" is an object like { eventName: handlerFunction }
 * use "ref.table" to access to all tabulator functions.
 ```
 - More Examples, Use cases, FAQ: [More Live Examples / Use cases](/docs/examples.md)

lib/ConfigUtils.d.ts

@@ -1,4 +1,5 @@
 export interface IProps {
+    events?: any;
     className?: string;
     columns: any[];
     data: any[];

lib/ReactTabulator.d.ts

@@ -4,6 +4,8 @@ import { Tabulator as TabulatorTypes } from './types/TabulatorTypes';
 export interface ReactTabulatorOptions extends TabulatorTypes.Options {
     [k: string]: any;
 }
+export interface ColumnDefinition extends TabulatorTypes.ColumnDefinition {
+}
 interface IState {
     data: any[];
     columns: any[];

lib/ReactTabulator.js

@@ -79,6 +79,7 @@ var Utils_1 = require("./Utils");
 /* tslint:disable-next-line */
 var tabulator_tables_1 = require("tabulator-tables");
 ;
+;
 var default_1 = /** @class */ (function (_super) {
     __extends(default_1, _super);
     function default_1() {
@@ -106,6 +107,7 @@ var default_1 = /** @class */ (function (_super) {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
             var domEle, that, _b, columns, data, options, propOptions, instance;
+            var _this = this;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
@@ -132,6 +134,12 @@ var default_1 = /** @class */ (function (_super) {
                         instance.on('dataLoaded', function () {
                             that.props.dataLoaded ? that.props.dataLoaded() : '';
                         });
+                        if (this.props.events) {
+                            Object.keys(this.props.events).forEach(function (eventName) {
+                                var handler = _this.props.events[eventName];
+                                instance.on(eventName, handler);
+                            });
+                        }
                         // await table.setData(data);
                         if (data && data.length > 0) {
                             this.setState({ data: data });

lib/ReactTabulatorExample.js

@@ -145,7 +145,9 @@ var default_1 = /** @class */ (function (_super) {
             movableColumns: true
         };
         return (React.createElement("div", null,
-            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(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)),

lib/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ReactTabulator, ReactTabulatorOptions } from './ReactTabulator';
+export { default as ReactTabulator, ReactTabulatorOptions, ColumnDefinition } from './ReactTabulator';
 export { default as React15Tabulator } from './React15Tabulator';
 export { default as ReactTabulatorExample } from './ReactTabulatorExample';
 export { reactFormatter } from './Utils';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tabulator",
-  "version": "0.16.9",
+  "version": "0.17.0",
   "description": "React Tabulator is based on tabulator - a JS table library with many advanced features.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/ConfigUtils.tsx

@@ -6,6 +6,7 @@ const NOOPS = () => {};
 
 // TODO: add proper types for props & callbacks
 export interface IProps {
+  events?: any; // example: <ReactTabulator events={{ rowClick: (ev, row) => {} }}... />
   className?: string;
   columns: any[];
   data: any[];

src/ReactTabulator.tsx

@@ -12,6 +12,9 @@ export interface ReactTabulatorOptions extends TabulatorTypes.Options {
   [k: string]: any
 };
 
+export interface ColumnDefinition extends TabulatorTypes.ColumnDefinition {
+};
+
 interface IState {
   data: any[];
   columns: any[];
@@ -58,6 +61,12 @@ export default class extends React.Component<IProps, Partial<IState>> {
     instance.on('dataLoaded', function () {
       that.props.dataLoaded ? that.props.dataLoaded() : '';
     });
+    if (this.props.events) {
+      Object.keys(this.props.events).forEach((eventName: string) => {
+        const handler = this.props.events[eventName];
+        instance.on(eventName, handler);
+      })
+    }
 
     // await table.setData(data);
     if (data && data.length > 0) {

src/ReactTabulatorExample.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 // for styles:
 // import 'react-tabulator/lib/styles.css'; // default theme
 // import 'react-tabulator/css/bootstrap/tabulator_bootstrap.min.css'; // use Theme(s)
-import ReactTabulator, { ReactTabulatorOptions } from './ReactTabulator';
+import ReactTabulator, { ReactTabulatorOptions, ColumnDefinition } from './ReactTabulator';
 
 import DateEditor from './editors/DateEditor';
 import MultiSelectEditor from './editors/MultiSelectEditor';
@@ -17,7 +17,7 @@ function SimpleButton (props: any) {
   return <button onClick={() => alert(rowData.name)}>{cellValue}</button>
 }
 
-const columns = [
+const columns: ColumnDefinition[] = [
   { title: 'Name', field: 'name', width: 150 },
   { title: 'Age', field: 'age', hozAlign: 'left', formatter: 'progress' },
   { title: 'Favourite Color', field: 'color' },
@@ -148,7 +148,9 @@ export default class extends React.Component<IProps> {
           ref={ref => (this.ref = ref)}
           columns={columns}
           data={data}
-          rowClick={this.rowClick}
+          events={{
+            rowClick: this.rowClick  
+          }}
           options={options}
           data-custom-attr="test-custom-attribute"
           className="custom-css-class"

src/index.ts

@@ -1,4 +1,4 @@
-export { default as ReactTabulator, ReactTabulatorOptions } from './ReactTabulator';
+export { default as ReactTabulator, ReactTabulatorOptions, ColumnDefinition } from './ReactTabulator';
 export { default as React15Tabulator } from './React15Tabulator';
 export { default as ReactTabulatorExample } from './ReactTabulatorExample';
 export { reactFormatter } from './Utils';