A native sort action cycles none, ascending, descending and emits cem-sort. Activating a sort clears peers in the nearest table; applications own row ordering. Related: cem-expansion · cem-table · cem-paginator.
Full examples and variation matrix · Property playground · Automated stories
{slice @name=label | Created}{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=name | created}{cem-field @label="name" @value="{$datadom.slices.name}" @slice=name @slice-event=input @slice-value="$target.value"}
{slice @name=class | }{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=direction | none}{fieldset @role=group @aria-label="direction" @slice=direction @slice-event=change @slice-value="$target.value" | {legend | direction}{cem-radio @name="property-direction" @value="none" @label="none" @checked={if datadom.slices.direction == "none" {true} else {null}}}{cem-radio @name="property-direction" @value="ascending" @label="ascending" @checked={if datadom.slices.direction == "ascending" {true} else {null}}}{cem-radio @name="property-direction" @value="descending" @label="descending" @checked={if datadom.slices.direction == "descending" {true} else {null}}}}
{slice @name=dir | ltr}{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=disabled | absent}{fieldset @role=group @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="property-disabled" @value="absent" @label="absent" @checked={if datadom.slices.disabled == "absent" {true} else {null}}}{cem-radio @name="property-disabled" @value="present" @label="present" @checked={if datadom.slices.disabled == "present" {true} else {null}}}}
{slice @name=hidden | absent}{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{cem-table @label="Sortable records" | {div @role=row | {cem-sort-header @label="{$datadom.slices.label}" @name="{$datadom.slices.name}" @direction="{$datadom.slices.direction}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @disabled={if datadom.slices.disabled == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | }}{div @role=row | {span @role=cell | Application-owned rows}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-sort-header/cem-sort-header.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}