DataTable

About

Sortable headers get a button and aria-sort, following the WAI-ARIA sortable table example. Values are read once when the table mounts: numbers are the first number in the cell, ignoring currency symbols, units and group separators, using the decimal separator of the table's lang, and negative after a minus sign or inside parentheses, dates are parsed, text is compared in natural order ("Item 2" before "Item 10"), and blank values always sort last.

Filtering keeps the current sort, pagination is a labelled navigation region with a window of page numbers, hidden while every row fits on one page, and a status message announces which rows are showing after each change. The pagination and status text can be translated through attributes. The original rows are moved rather than copied, and unmounting puts the table back as it was.

Usage

Register the component and the framework loads it the first time a page contains [data-datatable].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-datatable]', () => import('@parallelogram-js/core/components/DataTable'));
app.run();

The framework is optional. DataTable.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import DataTable from '@parallelogram-js/core/components/DataTable';

DataTable.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/datatable.css';