Clicking a grid header cell updates vaadin-grid sort order indicators assuming the column is marked sortable.
Doing so also updates the sortOrder property behind the scenes. The property may also
be set programmatically or even declaratively by pre-defining sort-direction attributes for columns.
| Name | Value | Progress |
|---|---|---|
| Project A | 10000 | 0.8 |
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
// Setting the sort definitions in JavaScript
grid.columns[0].sortable = true;
grid.columns[1].sortable = true;
grid.columns[2].sortable = true;
grid.sortOrder = [{column: 0, direction: "asc"}, {column: 1, direction: "desc"}];
// end-code
});
As mentioned in the previous example, there's multiple ways to change vaadin-grid sort order.
None of them will however automatically order any data inside vaadin-grid. The data source implementation
is always responsible of providing appropriate data that's ordered by the sort-order definitions.
| Name | Value | Progress |
|---|
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
// Set a data source for the grid
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project D", 999999, 0.2 ],
[ "Project C", 43256, 0.01 ],
[ "Project E", 1967, 0.9 ],
[ "Project B", 19672, 1 ] ];
grid.items = data;
// Re-order the data array on sort-order-changed event
grid.addEventListener('sort-order-changed', function() {
var idx = grid.sortOrder[0].column;
var lesser = grid.sortOrder[0].direction == 'asc' ? -1 : 1;
data.sort(function(a, b) {
return (a[idx] < b[idx]) ? lesser : -lesser;
});
});
// end-code
});