content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import Header from './Header';
  import Row from './Row';
  import Cell from './Cell';
  
  export default class Table extends Component {
      static propTypes = {
          rows: PropTypes.arrayOf(PropTypes.object),
          headers: PropTypes.arrayOf(PropTypes.object),
          ranking: PropTypes.bool,
          pagination: PropTypes.number
      }
  
      static defaultProps = {
          rows: [],
          headers: [],
          ranking: true,
          pagination: 20
      }
  
      state = {
          sort: {
              column: null,
              sortOrder: 'none'
          },
          page: 1
      }
  
      setSort = (nextColumn) => {
          return () => {
              const { sortOrder, column } = this.state.sort;
  
              let nextSortOrder = 'asc';
  
              if (nextColumn === column) {
                  if (sortOrder === 'asc') {
                      nextSortOrder = 'desc';
                  }
                  else if (sortOrder === 'desc') {
                      nextSortOrder = 'none';
                  }
              }
  
              this.setState({
                  sort: {
                      column: nextSortOrder === 'none' ? null : nextColumn,
                      sortOrder: nextSortOrder
                  }
              });
          };
      }
  
      handleSort = (rowA, rowB) => {
          const { column, sortOrder } = this.state.sort;
  
          if (sortOrder === 'asc') return rowA.cells[column].value > rowB.cells[column].value ? 1 : -1;
          else if (sortOrder === 'desc') return rowA.cells[column].value > rowB.cells[column].value ? -1 : 1;
      }
  
      onPageClick = (page) => {
          return () => {
              this.setState({
                  page
              });
          };
      }
  
      getPages() {
          const { rows, pagination } = this.props;
          const { page } = this.state;
          const pages = rows.length % pagination > 0 ? rows.length / pagination + 1 : rows.length / pagination;
          const result = [];
  
          for(let i = 1; i <= pages; i += 1) {
              result.push(
                  <a
                      key={i}
                      onClick={this.onPageClick(i)}
                      className={`btn ${page === i ? 'btn-primary bg-gray' : ''}`}
                  >
                      {i}
                  </a>
              );
          }
  
          return result;
      }
  
      getHeaders() {
          const { headers, ranking } = this.props;
          const { column, sortOrder } = this.state.sort;
  
          const _headers = headers
              .map((header, index) => {
                  return (
                      <Header
                          key={header.id || header.value}
                          value={header.value}
                          onClick={header.sortable && this.setSort(index)}
                          sortable={header.sortable}
                          sortOrder={column === index ? sortOrder : 'none'}
                      />
                  );
              });
  
          return ranking ? [<th key="ranking" />, ..._headers] : _headers;
      }
  
      getRows() {
          const { rows, headers, ranking, pagination } = this.props;
          const {
              page,
              sort: {
                  column
              }
          } = this.state;
          const offset = pagination * (page - 1);
  
          if (!rows.length) {
              return (
                  <Row>
                      <td colSpan={ranking ? headers.length + 1 : headers.length}>
                          <div className="m2 bold">
                              No data available
                          </div>
                      </td>
                  </Row>
              );
          }
  
          const sortedRows = column === null ? rows : [...rows].sort(this.handleSort);
          const paginatedRows = pagination ? sortedRows.slice(offset, pagination * page) : sortedRows;
  
          return paginatedRows
              .map((row, i) => {
                  const cells =
                      row.cells
                          .map(cell => {
                              return (
                                  <Cell
                                      key={cell.id || cell.value}
                                      value={cell.value}
                                  />
                              );
                          });
  
                  const _cells = ranking ? [(
                      <Cell
                          className="center"
                          key={i + 1}
                          value={pagination ? i + 1 + offset : i + 1}
                      />
                  ), ...cells] : cells;
  
                  return (
                      <Row key={row.id}>
                          {_cells}
                      </Row>
                  );
              });
      }
  
      render() {
          const { pagination } = this.props;
  
          return (
              <div>
                  <table className="table-light">
                      <thead>
                          <Row>
                              {this.getHeaders()}
                          </Row>
                      </thead>
                      <tbody>
                          {this.getRows()}
                      </tbody>
                  </table>
                  {
                      pagination &&
                          <div className="clearfix m2">
                              <div className="overflow-hidden sm-show center">
                                  {this.getPages()}
                              </div>
                          </div>
                  }
              </div>
          );
      }
  }
  