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: First click sorts by ascending order, second by descending, and 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.