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 definitation.

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.

Manage Sorting Externally

Coming Soon!

Custom the Sorting Algorithm

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

{
  dataField: 'id',
  text: 'Product ID',
  sort: true
  // Perform a reverse sorting here
  sortFunc: (a, b, order, dataField) => {
    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

Coming Soon!