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",
  },
];
<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

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.

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.