---
url: "https://vueda.dev/v3/reference/api/vue/SortGroup.md"
title: "SortGroup"
---

# SortGroup

## Overview

Renders the active sort order as a strip of removable [SortChip](/v3/reference/api/vue/SortChip.md)s,
plus a Reset sort control (shown only when the active sort differs from `defaultSorted`).
Each chip toggles its own direction; removing a chip drops that field from the sort
(the remove control itself is hidden once only one chip remains, since there is
nothing left to remove down to); dragging a chip by its priority ordinal reorders
the sort. Adding fields stays with the [SortControl](/v3/reference/api/vue/SortControl.md) add menu;
this strip is the always-visible read-out and the primary editing surface, the
sort-side counterpart to [FilterGroup](/v3/reference/api/vue/FilterGroup.md)'s chips.

Theme entry: [SortGroup](/v3/reference/theming/keys/SortGroup.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-sorted">sorted</span> | `array` |  | `[]` | Active sort fields; prefix a field name with `-` for descending. |
| <span id="prop-defaultSorted">defaultSorted</span> | `array` |  | `[]` | The server's default sort order, in the same `-`-prefixed representation as `sorted`. Read only to decide whether Reset sort has anything to do: the control is hidden whenever `sorted` already matches it. Reset itself emits an empty `update:sorted` rather than this array, leaving the host to resolve what "the default" means — see the `update:sorted` event. |
| <span id="prop-fieldDetails">fieldDetails</span> | `object` |  | `{}` | Map of field name to field metadata (e.g. `{ label }`) used to derive human labels. |
| <span id="prop-hosted">hosted</span> | `boolean` |  | `false` | When true, the chips render as a bare subgroup (no band chrome) for hosting inside a shared [ConstraintsBar](/v3/reference/api/vue/ConstraintsBar.md); the group keeps its own Reset sort control. When false (default), the chips render as a self-contained strip. |

## Slots

### `slot` {#slot-slot}

Scoped slot.

## Events

| Name | Description |
| --- | --- |
| `update:sorted` | Emitted when the active sort array changes. Reset sort emits an empty array, which the host reads as "use the default" rather than as "sort by nothing" — a list with no `o` param is one the server sorts by its own default anyway. [useViewList](/v3/reference/api/js/use/useViewList/functions/useViewList.md) answers it by clearing the stored sort preference and applying `defaultSorted`; a host that just assigns what it receives clears the sort instead. Emitting `defaultSorted` here would say the opposite: `useViewList` would store it as an explicit preference, which is the one thing a default is not. |

[Full event reference](/v3/reference/api/vue/SortGroup/events.md)

## Source

`client/lib/display/sort/SortGroup.vue`