DatatableContentsWithPagination

DatatableContentsWithPagination.jsx

import React from 'react';
import ReactPaginate from 'react-paginate';

import {Components, getRawComponent, Utils} from 'meteor/vulcan:core';
export default class DatatableContentsWithPagination extends React.Component {
  constructor(props) {
  //  super(props);
    this.state = {
      selected: 0,
    }
    this.handlePageClick = this.handlePageClick.bind(this);

  }
  handlePageClick(data) {
    const selected = data.selected;
    const itemsPerPage =  this.props.paginationTerms.itemsPerPage;
    const offset = Math.ceil(selected * itemsPerPage);
    this.props.handleOffsetUpdate(offset, selected);
  }
  render() {

    const {
      collection,
      columns,
      results,
      loading,
      loadMore,
      count,
      totalCount,
      networkStatus,
      showEdit,
      paginationTerms,
      forcePage
    } = this.props;

    const itemsPerPage = paginationTerms.itemsPerPage;
    const limit = paginationTerms.limit;
    let pageCount = 0;
    if (!loading) {
      const isLoadingMore = networkStatus === 2;
      const hasMore = totalCount > results.length;
      pageCount = Math.ceil(totalCount / paginationTerms.itemsPerPage);
    }

    return (
      <div >
        {loading
          ? <Components.Loading/>
          : <div className="datatable-list">
            <table className="table">
              <thead>
                <tr>
                  {_.sortBy(columns, column => column.order).map((column, index) => <Components.DatatableHeader key={index} collection={collection} column={column}/>)}
                  {showEdit
                    ? <th><FormattedMessage id="datatable.edit"/></th>
                    : null}
                </tr>
              </thead>
              <tbody>
                {results.map((document, index) => <Components.DatatableRow collection={collection} columns={columns} document={document} key={index} showEdit={showEdit}/>)}
              </tbody>
            </table>
            <ReactPaginate
              previousLabel={"previous"}
              nextLabel={"next"}
              breakLabel={< a href = "" > ...</a>}
              breakClassName={"break-me"}
              pageCount={pageCount}
              marginPagesDisplayed={2}
              pageRangeDisplayed={5}
              onPageChange={this.handlePageClick}
              containerClassName={"pagination"}
              subContainerClassName={"pages pagination"}
              activeClassName={"active"}
              forcePage={forcePage}
            />
          </div>
        }
      </div>
    )
  }
}