---
title: "Sorting | Features"
description: "Use built-in features to sort specific columns or provide your own custom sort function to order data to your needs."
url: https://www.zinggrid.com/docs/features/sorting
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/sorting.md
mode: provenance
representation: markdown
origin_response_id: 8879cc93309e20d8ee67aded66219932
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.704Z
version_nonce: 6c0c03a8c3bfb7bab539661511f05014
generated_at_utc: 2026-10-30T16:42:24.533Z
response_nonce: 211631c854a514663bafbe0960c31721
```

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

```html
<zing-grid sort></zing-grid>
```

### Sorting Enabled Grid
Here is a complete grid with sorting enabled:

[Example code](https://app.zingsoft.com/demos/embed/R28IAOI5)

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

```html
<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:

[Example code](https://app.zingsoft.com/demos/embed/IAUKY7NO)

## 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:

```html
  <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:

[Example code](https://app.zingsoft.com/demos/embed/PA8CNBSO)

## 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:

[Example code](https://app.zingsoft.com/demos/embed/Q25W67BK)

## Card Mode Support

Sorting is also supported in card mode. Since there are no column headers to click in card mode, a sort menu button is added to the grid's control bar instead. Clicking it opens a menu where you can specify the column index to sort by and the sort direction.

```html
<zing-grid layout="card" sort></zing-grid>
```

### Card Mode Sorting Grid
Here is a complete grid in card mode with sorting enabled:

[Example code](https://app.zingsoft.com/demos/embed/51ICDFRK)

## Style with CSS

Style sorted header cells and columns with provided CSS variables.

> **Note:** You can check out the [complete list of CSS variables here](https://www.zinggrid.com/docs/api/css-variables/reference).

### CSS Styled Sort Grid
Here is a complete grid with CSS styling on the sorting feature:

[Example code](https://app.zingsoft.com/demos/embed/SLNDBNSP)

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

* [API Sort Methods List](https://www.zinggrid.com/docs/api-methods#zg-sorter)
* [Styling Basic Guide](https://www.zinggrid.com/docs/styling-basics)
* [Adding Features Guide](https://www.zinggrid.com/docs/adding-features)
* [CSS Variables List](https://www.zinggrid.com/docs/api-css-variables)