Skip to content

Commit

Permalink
props.onRef
Browse files Browse the repository at this point in the history
  • Loading branch information
@ngduc
ngduc committed Jan 25, 2022
1 parent a7659d5 commit 994c639
Show file tree
Hide file tree
Showing 8 changed files with 213 additions and 226 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
## [0.18.0] - 2022-01-24
## [0.18.1] - 2022-01-24
- BREAKING: refactor: major refactor: useEffect, useState.
- BREAKING: changed 'ref' prop to 'onRef' prop (see ReactTabulatorExample.tsx)
- refactor: ReactTabulatorExample.tsx

## [0.17.1] - 2022-01-18
- BREAKING: upgraded tabulator-tables to 5.0.10
Expand Down
9 changes: 8 additions & 1 deletion lib/ReactTabulator.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,12 @@ export interface ReactTabulatorOptions extends TabulatorTypes.Options {
}
export interface ColumnDefinition extends TabulatorTypes.ColumnDefinition {
}
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;
4 changes: 3 additions & 1 deletion lib/ReactTabulator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,17 @@ var ReactTabulator = function (props) {
instanceRef.current.on(eventName, handler);
});
}
props.onRef && props.onRef(instanceRef);
return [2 /*return*/];
}
});
}); };
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) {
initTabulator(); // re-init table
}
Expand Down
18 changes: 3 additions & 15 deletions lib/ReactTabulatorExample.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,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;
216 changes: 98 additions & 118 deletions lib/ReactTabulatorExample.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,4 @@
"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;
exports.__esModule = true;
var React = require("react");
Expand All @@ -37,7 +22,7 @@ var columns = [
{ title: 'Date Of Birth', field: 'dob', sorter: 'date' },
{ title: 'Rating', field: 'rating', hozAlign: 'center', formatter: 'star' },
{ 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)) }
];
var data = [
{ id: 1, name: 'Oli Bob', age: '12', color: 'red', dob: '01/01/1980', rating: 5, passed: true, pets: ['cat', 'dog'] },
Expand All @@ -59,10 +44,14 @@ var data = [
];
// Editable Example:
var colorOptions = (_a = {}, _a[''] = '&nbsp;', _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' },
{
title: 'Favourite Color',
field: 'color',
Expand All @@ -83,109 +72,100 @@ var editableColumns = [
},
{ title: 'Passed?', field: 'passed', hozAlign: 'center', formatter: 'tickCross', editor: true }
];
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: ''
};
_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 });
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.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
};
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;
},
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"))));
} }));
};
var options = {
height: 150,
movableRows: true,
movableColumns: true
};
return default_1;
}(React.Component));
exports["default"] = default_1;
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"))));
});
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"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.",
"main": "lib/index.js",
"types": "lib/index.d.ts",
Expand Down
14 changes: 12 additions & 2 deletions src/ReactTabulator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,15 @@ export interface ReactTabulatorOptions extends TabulatorTypes.Options {

export interface ColumnDefinition extends TabulatorTypes.ColumnDefinition {}

const ReactTabulator = (props: any) => {
export interface ReactTabulatorProps {
columns?: ColumnDefinition[];
options?: any;
events?: any;
onRef?: (ref: any) => void
[k: string]: any;
}

const ReactTabulator = (props: ReactTabulatorProps) => {
const ref = React.useRef();
const instanceRef = React.useRef();
const [mainId, setMainId] = React.useState(`tabulator-${+new Date()}-${Math.floor(Math.random() * 9999999)}`);
Expand Down Expand Up @@ -43,14 +51,16 @@ const ReactTabulator = (props: any) => {
(instanceRef.current as any).on(eventName, handler);
});
}
props.onRef && props.onRef(instanceRef);
};

React.useEffect(() => {
// console.log('useEffect - onmount');
initTabulator();
}, []);

React.useEffect(() => {
console.log('instanceRef.current', instanceRef.current);
// console.log('useEffect - props.data changed');
if (instanceRef && instanceRef.current) {
initTabulator(); // re-init table
}
Expand Down
Loading

0 comments on commit 994c639

Please sign in to comment.