Sorting
React Bootstrap Data Grid implements simple sorting of data, one column at a time, in ascending or descending order. The user can change the column being sorted and the sort order by clicking on a column header.
When a user clicks on a column header, the sort order changes between ascending, descending, and none. When the sort order is none, the rows in the table will appear in original order of the array in which data was passed to the Grid component.
Note that sorting is done on the original data, before pagination and before formatting functions are applied. In particular, note that numbers will be sorted by the value of the number rather than lexicographically. Similarly, dates and datetimes will be sorted by the number of milliseconds after the epoch time as opposed to any time of string representation of the Date object.
Like other features of React Bootstrap Data Grid, state storage and updates for the sorting feature is done in a fully controlled manner. That is, the state and updater function are defined in a parent component and passed down to the Grid component.
To allow a user to sort a Grid by a particular column, set the sortable property to true in the column definition (ColDef) for the column.
In addition, setting the sortModel property on the Grid component is required to enable sorting.
Type Definitions
See below for specifications for the sortModel property and related types.
TableSortModel
| Property name | Type definition | Required/Optional | Description |
|---|---|---|---|
| sortColDef | SortColDef | null | Required | The current setting for sorting for the Grid |
| setSortColDef | (sortColDef: SortColDef | null) => void | Required | Callback function to set the state of |
SortColDef
| Property name | Type definition | Required/Optional | Description |
|---|---|---|---|
| name | string | Required | The name of the column to sort |
| order | "asc" | "desc" | Required | The sort order, ascending or descending |
Example
Live Demo
| Name | Average Damage | Damage Type | Weight (lb) | Price |
|---|---|---|---|---|
| Battleaxe | 5.5 | Slashing | 3.6 | 50 |
| Flail | 4.5 | Bludgeoning | 2 | 50 |
| Greataxe | 6.5 | Slashing | 6.3 | 65 |
| Greatsword | 7 | Slashing | 5.4 | 65 |
| Longsword | 5.5 | Slashing | 2.7 | 40 |
| Maul | 7 | Bludgeoning | 9 | 40 |
| Morningstar | 4.5 | Piercing | 3.6 | 50 |
| Rapier | 4.5 | Piercing | 1.8 | 80 |
| Scimitar | 4.5 | Slashing | 2.7 | 30 |
| War Pick | 4.5 | Piercing | 1.8 | 40 |
| Warhammer | 5.5 | Bludgeoning | 5.4 | 50 |