tablesort

import "drab/tablesort/define";

<drab-tablesort>
	<table>
		<thead>
			<tr class="cursor-pointer">
				<th class="data-[asc]:underline data-[desc]:overline" data-trigger>
					Make
				</th>
				<th class="data-[asc]:underline data-[desc]:overline" data-trigger>
					Model
				</th>
				<th
					class="data-[asc]:underline data-[desc]:overline"
					data-trigger
					data-type="number"
				>
					Year
				</th>
				<th
					class="data-[asc]:underline data-[desc]:overline"
					data-trigger
					data-type="boolean"
				>
					AWD
				</th>
			</tr>
		</thead>
		<tbody data-content>
			<tr>
				<td>Ford</td>
				<td>Model A</td>
				<td>1931</td>
				<td>false</td>
			</tr>
			<tr>
				<td>Ford</td>
				<td>Bronco</td>
				<td>1970</td>
				<td>true</td>
			</tr>
			<tr>
				<td>Honda</td>
				<td>CR-V</td>
				<td>2011</td>
				<td>true</td>
			</tr>
			<tr>
				<td>Subaru</td>
				<td>Outback</td>
				<td>2021</td>
				<td>true</td>
			</tr>
			<tr>
				<td>Volvo</td>
				<td>XC-40</td>
				<td>2024</td>
				<td>true</td>
			</tr>
		</tbody>
	</table>
</drab-tablesort>

Overview

Defined in: tablesort/index.ts:32

Wrap a HTMLTableElement in the TableSort element to have sortable column headers. Set each th that you want to sort to the trigger. Set the tbody element to the content.

The values of each cell default to the cell’s textContent. If you would like to provide an alternate value than what appears in the cell to sort by instead, you can set a different value using the data-value attribute on the cell.

The cells will be sorted as string by default. If you want to provide a different datatype number or boolean, set data-type="number" on the corresponding th/trigger element. The data will be converted to the specified type before sorting.

Constructors

Constructor

new TableSort(): TableSort

Defined in: tablesort/index.ts:33

Returns

TableSort

Overrides

Lifecycle(Trigger(Content(Announce()))).constructor

Accessors

event

Get Signature

get event(): keyof HTMLElementEventMap

Defined in: base/index.ts:120

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

Returns

keyof HTMLElementEventMap

Set Signature

set event(value): void

Defined in: base/index.ts:126

Parameters

value

keyof HTMLElementEventMap

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).event

Methods

announce()

announce(message): void

Defined in: base/index.ts:287

Parameters

message

string

message to announce to screen readers

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).announce

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:76

Called when custom element is added to the page.

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).connectedCallback

content()

Call Signature

content<T>(instance): T

Defined in: base/index.ts:215

Type Parameters

T

T extends HTMLElement

Parameters

instance

Constructor<T>

The instance of the desired element to validate against, ex: HTMLDialogElement. Defaults to HTMLElement.

Returns

T

The element that matches the content selector.

Default

this.querySelector("[data-content]");

Inherited from

Lifecycle(Trigger(Content(Announce()))).content

Call Signature

content(): HTMLElement

Defined in: base/index.ts:216

Returns

HTMLElement

The element that matches the content selector.

Default

this.querySelector("[data-content]");

Inherited from

Lifecycle(Trigger(Content(Announce()))).content

destroy()

destroy(): void

Defined in: base/index.ts:83

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).destroy

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:86

Called when custom element is removed from the page.

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).disconnectedCallback

listener()

Call Signature

listener<T>(listener, options?): void

Defined in: base/index.ts:152

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

listener

Listener<T>

Listener to attach to all of the trigger elements.

options?

AddEventListenerOptions

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).listener

Call Signature

listener<T>(type, listener, options?): void

Defined in: base/index.ts:161

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

type

T

Event type.

listener

Listener<T>

Listener to attach to all of the trigger elements.

options?

AddEventListenerOptions

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).listener

mount()

mount(): void

Defined in: tablesort/index.ts:70

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.

Returns

void

Overrides

Lifecycle(Trigger(Content(Announce()))).mount

safeListener()

Call Signature

safeListener<T>(type, listener, element?, options?): void

Defined in: base/index.ts:35

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof HTMLElementEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

element?

HTMLElement

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).safeListener

Call Signature

safeListener<T>(type, listener, document, options?): void

Defined in: base/index.ts:41

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof DocumentEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

document

Document

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).safeListener

Call Signature

safeListener<T>(type, listener, window, options?): void

Defined in: base/index.ts:47

Wrapper around addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type Parameters

T

T extends keyof WindowEventMap

Parameters

type

T

Event listener type - ex: "keydown"

listener

(this, event) => any

Listener to add to the target.

window

Window

options?

AddEventListenerOptions

Other options sans signal.

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).safeListener

swap()

swap(revert): void

Defined in: base/index.ts:231

Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.

Parameters

revert

Wait time (ms) before swapping back, set to false to not revert. default: 800

number | false

Returns

void

Inherited from

Lifecycle(Trigger(Content(Announce()))).swap

triggers()

Call Signature

triggers<T>(instance): NodeListOf<T>

Defined in: base/index.ts:136

Type Parameters

T

T extends HTMLElement

Parameters

instance

Constructor<T>

The instance of the desired element to validate against, ex: HTMLButtonElement. Defaults to HTMLElement.

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Default

this.querySelectorAll("[data-trigger]");

Inherited from

Lifecycle(Trigger(Content(Announce()))).triggers

Call Signature

triggers(): NodeListOf<HTMLElement>

Defined in: base/index.ts:137

Returns

NodeListOf<HTMLElement>

All of the elements that match the trigger selector.

Default

this.querySelectorAll("[data-trigger]");

Inherited from

Lifecycle(Trigger(Content(Announce()))).triggers