Sort specific columns and even provide your own custom sort function to order data to your needs.

Enable Sorting

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.


Sort Direction

If you want your grid to load with a certain column already sorted, you can specify the column and direction by adding the sort-asc or sort-desc attribute to any of the <zg-column> tags (you will still need the sorter attribute on the <zing-grid> tag).


Sorting Number

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: <zg-column type="number">


Custom Sort Fun

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 with CSS

Style sorted header cells and columns with provided CSS variables.