C&C Docs
Log in

cnc-sort-view

A dropdown for choosing how a list is sorted. Each key cycles ascending, descending, off; single-key by default, multi-key with multiple. Like the table, it reports the sort and never applies it.

Quick start

Pass a sort object mapping each sortable key to a { label, value }, where value is 1 ascending, -1 descending or 0 off.

Sort By: Name

pick a sort key

<cnc-sort-view
  @sort="applySort($event.detail)"
  $sort='{
    "name":    { "label": "Name",    "value": 1 },
    "created": { "label": "Created", "value": 0 }
  }'
></cnc-sort-view>

Sort entry keys

Each entry in the sort object is keyed by the field path and holds these two.

Key Purpose
label The key's caption in the dropdown, and in the trigger summary when it is the only active one.
value 1 ascending, -1 descending, 0 off. Clicking a key cycles it through those three in that order.

Usage guidance

Apply the sort yourself from the event. The widget cycles directions and reports the map; your rows are untouched, so a sort control with no handler changes only its own arrows.

Prefer the default single mode. Multi-key sorting is hard to reason about and the widget does not record which key was chosen first, so you cannot honour a precedence the user thinks they expressed — only reach for multiple where the ordering between keys genuinely does not matter.

Use this where cnc-table's sortable headers do not fit — a card grid, a list, a mobile layout with no header row. Both emit the same shape of information, so the handler is the same either way.

← Back to Widgets