react-bootstrap-table2/docs/basic-sort.md

id	title	sidebar_label
basic-sort	Table Sort	Table Sort

react-bootstrap-table2 allow you to configure columns to be sortable. Currently, we don't support the multi-column sort, but it will be implemented in the future.

Live Demo For Table Sort

---

Enable Sort on Column

Firstly, you need to know what column you allow user to sort and give the sort as true in the column definition.

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  sort: true
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true
}, {
  dataField: 'price',
  text: 'Product Price'
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

After table rendered, you can see the Product ID and Product Name will have a caret icon beside the column name:

Control Sorting

Default Sort

react-bootstrap-table2 will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via defaultSorted.

Sort Event Listener

Defined onSort on target column:

{
  dataField: 'id',
  text: 'Product ID',
  sort: true,
  onSort: (field, order) => {
    // ...
  }
}

Manage Sorting Externally

You can configure sort props and give dataField and order on BootstrapTable component to set the sorting state: Please refer this docs.

Usually you will need it when you want to control the sorting state externally, like clicking on a button outside the table to force to sort a specified column.

Custom the Sorting Algorithm

It's simple!! configure sortFunc on column definition.

{
  dataField: 'id',
  text: 'Product ID',
  sort: true
  // Perform a reverse sorting here
  sortFunc: (a, b, order, dataField, rowA, rowB) => {
    if (order === 'asc') {
      return b - a;
    }
    return a - b; // desc
  }
}

Custom the Sorting Style

There're two way you can change or prettify the header when sorting: headerSortingClasses and headerSortingStyle

Custom the Sort Caret

See column.sortCaret.