tablesort

Source

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.

Extends

Base

Constructors

new TableSort()

new TableSort(): TableSort

Properties

#listenerController

private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Base.#listenerController

Source

src/package/base/index.ts:17

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.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

Methods

#setAttributes()

private #setAttributes(trigger): boolean

Removes data-asc or data-desc from other triggers then sets the correct attribute on the selected trigger.

Parameters

• trigger: HTMLElement

Returns

boolean

true if ascending, false if descending

Source

src/package/tablesort/index.ts:30

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

Source

src/package/base/index.ts:155

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

Base.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

Source

src/package/base/index.ts:167

getContent()

getContent<T>(instance): T

Type parameters

• T extends HTMLElement = HTMLElement

Parameters

• instance= undefined

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

Returns

T

The element that matches the content selector.

Inherited from

Base.getContent

Default

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

Source

src/package/base/index.ts:55

getTrigger()

getTrigger<T>(): NodeListOf<T>

Type parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Inherited from

Base.getTrigger

Default

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

Source

src/package/base/index.ts:42

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.