GridSorter

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

<vaadin-grid-column id="column"></vaadin-grid-column>

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:

The following state attributes are available for styling:

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

path #

Type: string | null | undefined

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

Events #

direction-changed #

Type: GridSorterDirectionChangedEvent

Fired when the direction property changes.

Types #

GridSorterDirection #

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

GridSorterDirectionChangedEvent #

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