---
title: GridSorter
description: GridSorter
element: vaadin-grid-sorter
---

## Description

`<vaadin-grid-sorter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
visual feedback, and handlers for sorting the grid data.

#### Example:
```html
<vaadin-grid-column id="column"></vaadin-grid-column>
```
```js
const column = document.querySelector('#column');
column.renderer = (root, column, model) => {
  let sorter = root.firstElementChild;
  if (!sorter) {
    sorter = document.createElement('vaadin-grid-sorter');
    root.appendChild(sorter);
  }
  sorter.path = 'name.first';
};
```

### Styling

The following shadow DOM parts are available for styling:

Part name | Description
----------------|----------------
`content` | The slotted content wrapper
`indicators` | The internal sorter indicators.
`order` | The internal sorter order

The following state attributes are available for styling:

Attribute    | Description
-------------|---------------------------
`direction`  | Sort direction of a sorter

## Properties

### direction

**Type:** `GridSorterDirection | undefined`

How to sort the data.
Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
descending direction, or `null` for not sorting the data.

See also: [GridSorterDirection](#gridsorterdirection)

### path

**Type:** `string | null | undefined`

JS Path of the property in the item used for sorting the data.

## Events

### direction-changed

**Type:** [GridSorterDirectionChangedEvent](#gridsorterdirectionchangedevent)

Fired when the `direction` property changes.

## Types

### GridSorterDirection

```ts
export type GridSorterDirection = 'asc' | 'desc' | null;
```

### GridSorterDirectionChangedEvent

```ts
/**
 * Fired when the `direction` property changes.
 */
export type GridSorterDirectionChangedEvent = CustomEvent<{ value: GridSorterDirection }>;
```