Sort specific columns and even provide your own custom sort function to order data to your needs.
Easily enable sorting by adding the
sorter attribute to the
<zing-grid> tag. Clicking on a column header will sort that column; the first click sorts by ascending order, the second by descending order, and the third removes the sorting and resets to the natural order.
If you want your grid to load with a certain column already sorted, you can specify the column and direction by adding the
sort-desc attribute to any of the
<zg-column> tags. You will still need the
sorter attribute on the
Sorting a column comprised of number-strings will sort by the first character, so 70 would appear after 500. To fix this, add a custom type to the column:
You can also create your own sort function and assign it to the
sorter attribute on a column. Below, we create a custom sort function to place 'TBD' at the end of the grid.
Style sorted header cells and columns with provided CSS variables.