Editable Data Table in React
This tutorial assumes that you have a basic understanding of React. The article shows how to create a React (wrapper) Component for DataGridXL and how you can pass events from DataGridXL to your React App.
This tutorials uses ES6 classes. Try the example in a newer browser if it is not working.
HTML
<!-- Include React & DataGridXL -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://code.datagridxl.com/datagridxl.js"></script>
<style>
#app {
height: 400px;
}
</style>
<div id="app"></div>Creating the DataGridXL component (wrapper)
Javascript
// shorthand function to create React elements
var e = React.createElement;
// create a component (wrapper) for DataGridXL
// we name it "DataGrid" since "DataGridXL" already exists.
class DataGrid extends React.Component {
constructor(props) {
super(props);
}
componentDidMount(){
// create the Data Grid
grid = new DataGridXL("grid");
// save component scope in `self` so we can change our props.
var self = this;
// fire the `onChange` property when data changes
grid.events.on("cellvaluechange", function(ev){
self.props.onChange.call(this, ev);
});
grid.events.on("documentchange", function(ev){
self.props.onChange.call(this, ev);
});
grid.events.on("ready", function(ev){
self.props.onChange.call(this, ev);
});
}
shouldComponentUpdate(){
// tell React to not update the DOM for this component
// DataGridXL fully takes care of this
return false;
}
render() {
return e(
'div', {
id: 'grid'
}
);
}
}Creating & Mounting the App component
Javascript
// shorthand function to create React elements
var e = React.createElement;
class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: null
};
// save App component as window var
// so we can setState in our handleOnChange method
window.myApp = this;
}
handleOnChange(ev){
myApp.setState({
data: JSON.stringify(this.getData())
});
}
render(){
return e('div', {},
e(DataGrid, {
onChange: this.handleOnChange
}),
e('div', {}, 'data '+this.state.data)
);
}
}
// render our App component inside div#app
ReactDOM.render(e(App), document.getElementById("app"));In the real world you would probably use a more complex setup. For the sake of clarity (& our own sanity) we've kept our demo simple.
Please note that we provide Vanilla Support only.
