Skip to main content

Table Sort

react-bootstrap-table-ng 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'
}];

```js
<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:
![sort caret](/img/docs/basic-sort-caret.png)

## Control Sorting
### Default Sort
`react-bootstrap-table-ng` will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via [`defaultSorted`](./table-props#defaultsorted-array).

### Sort Event Listener
Defined [`onSort`](./column-props#columnonsort-function) on target column:

```js
{
  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.