features
Menu
Menu

Sorting

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

On This Page

Enable Sorter

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.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Specify 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).
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Sorting Number Strings

Sorting a column of number strings will sort by the first character naturally, so '70' would appear after '500'. To fix this, apply a custom type to the column (<zg-column type="number">).
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom Sort Function

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.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Style with CSS Variables

Style sorted header cells and columns with provided CSS variables.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading