Sortable header

Header for sorting table columns

Demo


Cell text	Cell text
Cell text	Cell text
Cell text	Cell text
Cell text	Cell text

API

Tag

Name	Description
`<s-header-sortable>`	Custom element

Attributes

Name	Value	Required	Description
`active`	Boolean attribute		Indicates the active sortable header.
`ascending`	Boolean attribute		Indicates the arrow-up icon should be displayed.
`descending`	Boolean attribute		Indicates the arrow-down icon should be displayed.
`text`	String		Sets the text content of the header. Header-sortable's text content can alternatively be provided inside a `span` with `slot="content"`.
`nodefaultsort`	Boolean attribute		Indicates that there is a default unsorted state for the table, and the header should cycle through an unsorted state when clicked (ascending sort -> descending sort -> unsorted -> repeat).

Properties

Name	Value	Required	Description
`active`	Boolean attribute		Indicates the active sortable header.
`ascending`	Boolean attribute		Indicates the arrow-up icon should be displayed.
`descending`	Boolean attribute		Indicates the arrow-down icon should be displayed.
`text`	String		Sets the text content of the header. Header-sortable's text content can alternatively be provided inside a `span` with `slot="content"`.
`noDefaultSort`	Boolean attribute		Indicates that there is a default unsorted state for the table, and the header should cycle through an unsorted state when clicked (ascending sort -> descending sort -> unsorted -> repeat).

Classes

Name	Description
`align-right`	Aligns header text to the right and places arrow icon on left.

Events

Name	Detail	Description
`s-sort`	The header's `id` and `ascending` (Boolean, `true` for ascending order sort and `false` for descending) are available on `e.detail`.	Fired after the header is clicked.
`s-unsort`	The header's `id` is available on `e.detail`.	Fired after a header with the `nodefaultsort` attribute is clicked and reaches the unsorted state.

Demo

API

Tag

Name
`<SHeaderSortable>`

Props

Name	Value	Description
`active`	Boolean	Indicates the active sortable header.
`ascending`	Boolean	Indicates the arrow-up icon should be displayed.
`descending`	Boolean	Indicates the arrow-down icon should be displayed.
`text`	String	Sets the text content of the header. Text content can alternatively be provided inside a `span` with `slot="content"`.
`noDefaultSort`	Boolean	Indicates that there is a default unsorted state for the table, and the header should cycle through an unsorted state when clicked (ascending sort -> descending sort -> unsorted -> repeat).
`onS-sort`	Function	Handles the `s-sort` event emitted when the header is clicked. The sortable header's `id` and the `ascending` boolean (`true` = ascending sort, `false` = descending sort) are available on `e.detail`.
`onS-unsort`	Function	Handles the `s-unsort` event emitted when the header is clicked. The sortable header's `id` is available on `e.detail`.

Classes

Name	Description
`align-right`	Aligns header text to the right and places arrow icon on left.

Skylab React links

General information about using our React package

Typescript

Exported types

// s-sort event's e.detail export type SSortEvent = { ascending: boolean; id: string; }; // s-unsort event's e.detail export type SUnsortEvent = { id: string; };

Guidelines

Parent element required

The sortable header must be enclosed in a <th> element.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com