# `LiveFilter.SortComponents`
[🔗](https://github.com/agoodway/livefilter/blob/v0.2.0/lib/live_filter/sort_components.ex#L1)

Styled, overridable sort UI over the headless `LiveFilter.Sort` helpers.

- `sort_header/1` — a drop-in sortable `<th>` content cell (tri-state click).
- `sort_menu/1` — a standalone "Order by" dropdown.

Both are pure function components: they render markup and emit a DOM event
(default `"lf_sort"` / `"lf_sort_to"`) that the host LiveView handles by
calling `LiveFilter.Sort.toggle/3` (or `put/4`) and patching the URL. Style via
`class`, replace the inner markup via the inner slot, or skip these entirely
and build your own header from the `LiveFilter.Sort` primitives.

# `sort_header`

A sortable table header cell. Place inside your own `<th>`.

## Attributes
  * `:field` (required) - the public sort field atom
  * `:label` (required) - header text (ignored if an inner block is given)
  * `:sort` (required) - the current `%LiveFilter.Sort{}`
  * `:sortable_fields` - the `SortField` list (used only to echo into the event); optional
  * `:event` - phx-click event name (default `"lf_sort"`)
  * `:target` - optional phx-target
  * `:class` - extra classes on the button

## Attributes

* `field` (`:atom`) (required)
* `label` (`:string`) (required)
* `sort` (`LiveFilter.Sort`) (required)
* `sortable_fields` (`:list`) - Defaults to `[]`.
* `event` (`:string`) - Defaults to `"lf_sort"`.
* `target` (`:any`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block`

# `sort_menu`

Standalone "Order by" dropdown for single-column sorting (Linear/Notion style).

Lists `sortable_fields` as clean rows. Clicking an inactive field selects it with
its `default_direction`; clicking the active field flips its direction. The active
field shows a check and a contextual direction badge. A "No sort" row clears the
sort when one is active.

Field clicks emit `event` (default `"lf_sort_to"`) with `phx-value-field` and a
pre-computed `phx-value-direction`. The "No sort" row emits `clear_event`
(default `"lf_sort_clear"`). Wire both in the host LiveView (e.g. `Sort.put/4`
and `Sort.clear/1`).

## Attributes
  * `:sortable_fields` (required) - list of `LiveFilter.SortField`
  * `:sort` (required) - the current `%LiveFilter.Sort{}`
  * `:id` - base DOM id for the dropdown hooks (default `"lf-sort-menu"`); pass a
    unique value if more than one sort menu is rendered on the same page
  * `:event` - field-select phx-click event name (default `"lf_sort_to"`)
  * `:clear_event` - "No sort" phx-click event name (default `"lf_sort_clear"`)
  * `:target` - optional phx-target
  * `:class` - extra classes on the trigger

## Attributes

* `sortable_fields` (`:list`) (required)
* `sort` (`LiveFilter.Sort`) (required)
* `id` (`:string`) - Defaults to `"lf-sort-menu"`.
* `event` (`:string`) - Defaults to `"lf_sort_to"`.
* `clear_event` (`:string`) - Defaults to `"lf_sort_clear"`.
* `target` (`:any`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*