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; the first click sorts by ascending order, the second by descending order, and the 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.