drab - tablesort

Make	Model	Year	AWD
Ford	Model A	1931	false
Ford	Bronco	1970	true
Honda	CR-V	2011	true
Subaru	Outback	2021	true
Volvo	XC-40	2024	true

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:23

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.

Extends

Base

Constructors

new TableSort()

new TableSort(): TableSort

Defined in: tablesort/index.ts:24

Returns

TableSort

Overrides

Base.constructor

Accessors

event

Get Signature

get event(): keyof HTMLElementEventMap

Defined in: base/index.ts:42

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:46

Parameters

value

keyof HTMLElementEventMap

Returns

void

Inherited from

Base.event

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

Returns

void

Inherited from

Base.announce

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

destroy()

destroy(): void

Defined in: base/index.ts:178

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

Base.destroy

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

getContent()

getContent<T>(instance): T

Defined in: base/index.ts:74

Type Parameters

• T extends HTMLElement = HTMLElement

Parameters

instance

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

Base.getContent

getTrigger()

getTrigger<T>(): NodeListOf<T>

Defined in: base/index.ts:61

Type Parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Default

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

Inherited from

Base.getTrigger

mount()

mount(): void

Defined in: tablesort/index.ts:57

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

Base.mount

safeListener()

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

Defined in: base/index.ts:136

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

swapContent(revert): void

Defined in: base/index.ts:93

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

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

Defined in: base/index.ts:153