DataTable.js

headerRow(columns) {
  return (
    <thead>
      <tr>
        {this.headers(columns)}
      </tr>
    </thead>
  );
}

headers(columns) {
  return columns.map((col, i) => {
    let arrow;
    if (col === this.state.sort.column) {
      arrow = this.state.sort.order === 'asc' ?
        <span>&#8593;</span> : <span>&#8595;</span>;
    }
    return (
      <th key={i} className="table-header" onClick={() => this.setSortState(col)}>
        {col} {arrow}
      </th>
    );
  });
}

rows(values, columns) {
  return values.map((val, i) => (
    <tr key={i}>
      {this.row(val, columns)}
    </tr>
  ));
}

row(rowData, columns) {
  return columns.map((col, j) => {
    const prefix = this.state.wide ? '' : (<span>{col + ':'}</span>);
    return (
      <td key={j}>
        {prefix} {rowData[col]}
      </td>
    );
  });
}

render() {
  const props = this.props;
  const length = props.values.length;
  const limit = props.limit;
  const page = this.state.page;
  const start = page * limit;
  const end = start + limit;
  const values = this.sortRows(props.values).slice(start, end);
  const columns = props.headers;
  const wide = this.state.wide; // assuming the calculation moves to the constructor

  return (
    <div>
      <table className={'table table-responsive ' + (wide ? styles.wide : styles.narrow)}>
        {wide ? this.headerRow(columns) : undefined}

        <tbody>
          {this.rows(values, columns)}
        </tbody>
      </table>

      <ul className="pager">
        <li className={page === 0 ? 'disabled' : ''}>
          <a onClick={this.prevPage}>Previous</a>
        </li>
        <li className={page + 1 >= Math.ceil(length / limit) ? 'disabled' : 0}>
          <a onClick={this.nextPage}>Next</a>
        </li>
      </ul>
    </div>
  );
}