LiveFilter.SortComponents (LiveFilter v0.2.0)

Copy Markdown View Source

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.

Summary

Functions

sort_header(assigns)

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

sort_menu(assigns)

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

Functions

sort_header(assigns)

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(assigns)

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.