Skip to main content Skip to footer
Vue Icon

Sorting for Vue Datagrids

Wijmo's Vue 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. 

Sort

Wijmo's Vue 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 Vue datagrid allows you to set 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