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 |
<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
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.
Hierarchy
↳
TableSort
Constructors
constructor
• new TableSort(): TableSort
Returns
Overrides
Defined in
src/package/tablesort/index.ts:20
Properties
#listenerController
• Private #listenerController: AbortController
To clean up event listeners added to document when the element is removed.
Inherited from
Defined in
Accessors
event
• get event(): keyof HTMLElementEventMap
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.
Returns
keyof HTMLElementEventMap
Default
"click";
Inherited from
Base.event
Defined in
• set event(value): void
Parameters
| Name | Type |
|---|---|
value | keyof HTMLElementEventMap |
Returns
void
Inherited from
Base.event
Defined in
Methods
#setAttributes
▸ #setAttributes(trigger): boolean
Removes data-asc or data-desc from other triggers then sets the correct attribute on the selected trigger.
Parameters
| Name | Type |
|---|---|
trigger | HTMLElement |
Returns
boolean
true if ascending, false if descending
Defined in
src/package/tablesort/index.ts:30
connectedCallback
▸ connectedCallback(): void
Returns
void
Inherited from
Defined in
destroy
▸ destroy(): void
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
Defined in
disconnectedCallback
▸ disconnectedCallback(): void
Returns
void
Inherited from
Defined in
getContent
▸ getContent<T>(instance?): T
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement = HTMLElement |
Parameters
| Name | Type | Description |
|---|---|---|
instance | () => T | The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement. |
Returns
T
The element that matches the content selector.
Default
this.querySelector("[data-content]");
Inherited from
Defined in
getTrigger
▸ getTrigger<T>(): NodeListOf<T>
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement = HTMLElement |
Returns
NodeListOf<T>
All of the elements that match the trigger selector.
Default
this.querySelectorAll("[data-trigger]");
Inherited from
Defined in
mount
▸ mount(): void
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
Defined in
src/package/tablesort/index.ts:49
safeListener
▸ safeListener<K, T>(type, listener, element?, options?): void
Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.
Type parameters
| Name | Type |
|---|---|
K | extends keyof DocumentEventMap |
T | extends Window | Document | HTMLElement = HTMLElement |
Parameters
| Name | Type |
|---|---|
type | K |
listener | (this: T, ev: DocumentEventMap[K]) => any |
element | T |
options | AddEventListenerOptions |
Returns
void
Inherited from
Defined in
swapContent
▸ swapContent(revert?, delay?): void
Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
revert | boolean | true | Swap back to old content |
delay | number | 800 | Wait time before swapping back |
Returns
void
Inherited from
Defined in
triggerListener
▸ triggerListener<T, K>(listener, type?, options?): void
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement |
K | extends keyof HTMLElementEventMap |
Parameters
| Name | Type | Description |
|---|---|---|
listener | (this: T, e: HTMLElementEventMap[K]) => any | Listener to attach to all of the trigger elements. |
type | K | - |
options? | AddEventListenerOptions | - |
Returns
void