Sorting

Use built-in features to sort specific columns or 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 (see below). Clicking on a column header will then 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.

<zing-grid sort></zing-grid>

Sorting Enabled Grid

Here is a complete grid with sorting enabled:

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 on any of the <zg-column> tags (see below). Note: You will still need the sorter attribute on the <zing-grid> tag.

<zing-grid caption="Numbered Strings" sort>
    <zg-data data='[
        { "number": 4510 },
        { "number": 210 },
        { "number": 0 },
        { "number": 649 }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="number" header="Not Sorted"></zg-column>
      <zg-column index="number" type="number" header="Sorted" cell-class="correct" sort-asc="true"></zg-column>
    </zg-colgroup>
  </zing-grid>

Presorted Columns Grid

Here is a complete grid with one normal column and one presorted column:

Sorting Number

Sorting a column comprised of number-strings will sort by the first character. For example, 70 would appear after 500. To fix this, add the number type to <zg-column>, like so:

<zing-grid caption="Numbered Strings" sort>
    <zg-data data='[
        { "number": "4510" },
        { "number": "210" },
        { "number": "0" },
        { "number": "649" }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="number" type="number" header="Correct" cell-class="correct" sort-asc="true"></zg-column>
    </zg-colgroup>
  </zing-grid>

Number Sorting Grid

Here is a complete grid which shows how numbers are sorted in columns with and without the number type:

Custom Sort

You can also create your own sort function and assign it to the sorter attribute on a column.

Custom Sort Grid

Here is a complete grid that we created with a custom sort function to place 'TBD' at the beginning of the grid for ascending order and at the end of the grid for descending order:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• API Sort Methods List
• Styling Basic Guide
• Adding Features Guide
• CSS Variables List