Fixed Data Table Example with ES5

Question

Here there is fixed data table example:

https://github.com/facebook/fixed-data-table/blob/master/examples/FilterExample.js

But I struggle to understand that.

I wrote some code about Fixed Data Table with ES5.Now I want to put "filtering" example to my code.But the example is ES6.

Can you help me to understand or how can I convert ES6 to ES5.

Here is my code:

var rows = [{"id":1,"first_name":"William","last_name":"Elliott","email":"welliott0@wisc.edu",
"country":"Argentina","ip_address":"247.180.226.89"},
{"id":2,"first_name":"Carl","last_name":"Ross","email":"cross1@mlb.com",
"country":"South Africa","ip_address":"27.146.70.36"},
{"id":3,"first_name":"Jeremy","last_name":"Scott","email":"jscott2@cbsnews.com",
"country":"Colombia","ip_address":"103.52.74.225"},

// more data
];

ReactDOM.render(
    <Table
      height={rows.length * 30}
      width={1150}
      rowsCount={rows.length}
      rowHeight={30}
      headerHeight={30}
      rowGetter={function(rowIndex) {return rows[rowIndex]; }}>

      <Column dataKey="id" width={50} label="Id" />
      <Column dataKey="first_name" width={200} label="First Name" />
      <Column  dataKey="last_name" width={200} label="Last Name" />
      <Column  dataKey="email" width={400} label="e-mail" />
      <Column  dataKey="country" width={300} label="Country" />

    </Table>,
    document.getElementById('root')
);

If ES6 concepts are difficult for you but you understand ES5, you could [run it through Babel](https://babeljs.io/repl/) and read the ES5 output. Note that the online REPL doesn't handle JSX though. — Mike Cluck, Jan 11 '16 at 19:32

Kohei Mikami · Answer 1 · 2016-01-11T20:06:53.677

Instead of using 'class', you can use React.createClass. Here is an example:

var FilterExample = React.createClass({
  // constructor
  getInitialState: function() {
    this._dataList = new FakeObjectDataListStore(2000);    
    this._onFilterChange = this._onFilterChange.bind(this);
    return {
      filteredDataList: this._dataList,
    };
  },
  ...
  render: function() {
    <Table
    ...
    </Table>,
    document.getElementById('root')
  }
});

Fixed Data Table Example with ES5

1 Answers1