Pagination Example with React.js

Question

I need to use pagination in my datagrid project with React.js.

I use Fixed Data Table and I need to know what is the best way to do pagination with ES5.(Especially ES5)

Here is Fixed Data table Link:

https://facebook.github.io/fixed-data-table/

Can you show any pagination example in React.js(with ES5) or how can I do it ?

Answer 1

You could just use babel in your build chain to write in ES6 and transpile it to ES5, but translating the basic example directly gives you this:

var React = require('react');
var ReactDOM = require('react-dom');
var Table = require('fixed-data-table').Table;
var Column = require('fixed-data-table').Column;
var Cell = require('fixed-data-table').Cell;

// Table data as a list of array.
var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

// The remaining is the same as usual.

Answer 2

Yes, some time ago I was looking for similar thing and found this great article with complete example of using FixedDataTable in React with server-side rendering.

Answer 3

I've created a component just for this purpose here. Install it with:

npm install pagination-component --save      

It can be used (in ES5) along with a CSS in JS library (not required). Example:

var React = require('react');
var render = require('react-dom').render;
var Pagination = require('pagination-component');
var css = require('glamor').css;

var pageLink = css({
  margin: '2px',
  display: 'inline-block',
  padding: '2px',
  WebkitBorderRadius: '20px',
  MozBorderRadius: '20px',
  borderRadius: '20px'
});

var currentLink = css({
  backgroundColor: '#0074c2',
  display: 'inline-block',
  color: '#FFFFFF'
});

var Example = React.createClass({
  render() {
    return <div>
      <h1>react-paginator Demo</h1>
      <Pagination currentPage={0}
                  pageCount={50}
                  pageLinkClassName={pageLink}
                  currentLinkClassName={currentLink}
                  onPageClick={i => {
                    console.log(`Link to page ${i} was clicked.`);
                  }} />
    </div>;
  }
})

More usage instructions can be found here.

Answer 4

You will need to create a react component that handles the state of the pagination, and then pass one page at a time to a child component that renders the table.

var Paginate = React.createClass({

  getInitialState: function() {
    this.setState({
      currentPage: this.props.currentPage || 0,
      allRows: this.props.rows,
      pageSize: this.props.pageSize || 5
    });
  },

  getThisPage: function() {
    let start = (this.state.currentPage * this.state.pageSize) - this.state.pageSize;
    return this.state.allRows.slice(start, start + this.state.pageSize);
  },

  prevPage: function() {
    let nextPage = this.state.currentPage - 1;

    if (nextPage > 0) return;

    this.setState(Object.assign(this.state, { currentPage: nextPage }));
  },

  nextPage: function() {
    let nextPage = this.state.currentPage + 1;

    if (nextPage > this.sate.allRows / this.state.pageSize) return;

    this.setState(Object.assign(this.state, { currentPage: nextPage }));
  },

  render: function() {
    var _this = this;
    const childrenWithProps = React.Children.map(this.props.children, function(child){
      return React.cloneElement(child, {
        rows: _this.getThisPage()
      });
    });

    return (<div>
      {childrenWithProps}
      <button onClick={this.prevPage}>previous</button>
      <button onClick={this.nextPage}>next</button>
    </div>);

  }
});

var Table = function({ rows }) {
  return (<Table
    rowHeight={50}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />
    <Column
      header={<Cell>Col 2</Cell>}
      cell={<MyCustomCell mySpecialProp="column2" />}
      width={1000}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
      )}
      width={2000}
    />
  </Table>);
});

ReactDOM.render(<Paginate rows={rows}><Table /></Paginate>,
  document.getElementById('example'));