Skip to main content Skip to footer
React Icon

Sorting for React Datagrids

Wijmo's React datagrid, FlexGrid, allows users to sort rows either in the ascending or descending order against a column by simply clicking the header. Sort multiple columns’ data by holding the Ctrl key + header click.  

Sorting

Wijmo's React datagrid, FlexGrid, supports data sorting through its CollectionView. Though sorting can be customized, by default, the datagrid will sort itself based on the column header that the user clicks.

Sorting Demo

On-Demand Sorting

By default, FlexGrid's CollectionView will update its sorting when the user finishes editing a cell. This can be turned off, so the datagrid will only update its sorting when a header cell is clicked on.

On-Demand Sorting Demo

Multi-Column Sorting

FlexGrid, by default, sorts its data based on a single column, and when another header is clicked on, the previous sort is overwritten. The React datagrid allows you to set the CollectionView to handle a multi-column sort, where the primary sort is run on the first column header clicked, and secondary sorting is run when another header cell is clicked.

Multi-Column Sorting Demo