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.

View and edit this demo on Codepen.


Leave email to receive latest updates!