Docs

Sorting

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.

Top

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).

Top

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">

Top

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.

Top

Style with CSS

Style sorted header cells and columns with provided CSS variables.

Top