rstarter-supporthq/src/General/Datatables/index.js

import React from 'react';
import {HashRouter as Switch,Route} from 'react-router-dom';
export default class Datatable extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      totalPages:this.props.totalPages,
      pages:[],
      columns:this.props.columns,
      tableData:[]
    }
    this.onChangeTableParams=this.onChangeTableParams.bind(this);
  }


  setTableData($page,$data){
    this.setState({tableData:$data});
  }
  setPages(){
  const pages=  this.state.totalPages;
  let numberOfPages=[];
  for (var i = 0; i < pages; i++) {
    numberOfPages.push(i+1);
  }
  this.setState({pages:numberOfPages});
  }
  componentDidMount(){
    this.setPages();
  }
  onChangeTableParams(pageNo){

  }
  componentWillMount(){}

  render() {
    return (<div>
    <div  className="table-responsive">
    <table className="table table-bordered">
      <thead>
        <tr>
        {this.state.columns.map((column,index)=>{
          return <th width={column.width!=null?column.width+"px":""}>{column.label}</th>;
        })
        }
        </tr>
      </thead>
      <tbody>
      {this.state.tableData.map((column,index)=>{
        return   <tr>
          {this.state.columns.map((data,indexOfData)=>{
            return <td>{column[data.name]}</td>;
          })

          }
        </tr>;
      })}

      </tbody>
    </table>
    </div>

          <div className="float-right">
          <nav aria-label="Page navigation">
            <ul className="pagination">
              <li className="page-item"><a className="page-link" href="#">Previous</a></li>
              {this.state.pages.map((page,index)=>{
                return   <li className="page-item"><a className="page-link" onClick={(ev)=>{
                  $(".pagination .page-item").each(function (e) {
                    if($(this).hasClass('active')){
                      $(this).removeClass('active')
                    }
                  });
                  $(ev.target).parent().addClass('active');
                  this.onChangeTableParams(ev.target.innerText);
                }}>{page}</a></li>;
              }
              )}
              <li className="page-item"><a className="page-link" href="#">Next</a></li>
            </ul>
          </nav>
          </div>
    </div>
    );
  }
}