remote_sort.js

import React, {Component} from 'react';
import {isEqual, zip} from 'lodash';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';


const SORT_LIMIT = 2;

class Table extends Component {
  state = {
    sortName: [],
    sortOrder: [],
  };

  onSortChange(name, newOrder) {
    let sortName = [];
    let sortOrder = [];

    for (let i = 0; i < this.state.sortName.length; i++) {
      if (this.state.sortName[i] !== name) {
        sortName.push(this.state.sortName[i]);
        sortOrder.push(this.state.sortOrder[i]);
      }
    }
    sortName.push(name);
    sortOrder.push(newOrder);
    sortName = sortName.slice(-SORT_LIMIT);
    sortOrder = sortOrder.slice(-SORT_LIMIT);
    this.setState({
      sortName,
      sortOrder,
    });

    const order = zip(sortName, sortOrder).map(([column, direction]) => ({column, direction}));
    this.props.onChangeOrder(order)

  }

  cancelSort() {
    this.setState({
      sortName: [],
      sortOrder: [],
    });
    console.log('canceling...');
  }


  render() {
    const {columns, data} = this.props;
    const dataWithId = data.map((row, i) => Object.assign(row, {row_id: i}));
    const {sortName, sortOrder} = this.state;
    const options = {
      onSortChange: this.onSortChange.bind(this),
      sortName,
      sortOrder,
    };

    return (
      <div>
        <button onClick={this.cancelSort.bind(this)}>cancel sort</button>
        <BootstrapTable data={dataWithId} remote={true} options={options} multiColumnSort={SORT_LIMIT}>
          <TableHeaderColumn dataField="row_id" isKey hidden>Id</TableHeaderColumn>
          {columns.map((column) => <TableHeaderColumn dataField={column.dataIndex} dataSort={column.sorter}
                                                      key={column.dataIndex}>{column.title}</TableHeaderColumn>)}
        </BootstrapTable>
      </div>
    );
  }
}

export default Table;