Tables & selection

A reusable controller for authored HTML tables. Search, sort and select without changing the underlying demo data.

Run table

Selection applies to the current page and clears when the result set changes. Export includes all filtered rows, not only the visible page.

Preview stateHeld until you change the state.

Search runs Status Rows per page

0 selected

Show duration

Scroll horizontally for status and duration →

Run history · 6 fictional runs
Select all visible runs		Status
Select Authentication guard	Authentication guardrun-142	Needs review	8 min
Select Billing export	Billing exportrun-143	Ready	12 min
Select Cache cleanup	Cache cleanuprun-144	Ready	4 min
Select Dependency audit	Dependency auditrun-145	Needs review	16 min
Select Error boundary	Error boundaryrun-146	Ready	6 min
Select Filter persistence	Filter persistencerun-147	Needs review	10 min

Bulk review is a local confirmation example; no run or integration is updated.

Independent instance

This table has its own search, sorting and selection. Changes here do not affect the runs above.

Search projects Rows per page

0 selected

Show duration

Scroll horizontally for status and owner →

Project records · independent table
Select all visible projects		Status
Select Atlas API	Atlas APIproject-atlas	Ready	21 min
Select Beacon dashboard	Beacon dashboardproject-beacon	Needs review	9 min
Select Copper docs	Copper docsproject-copper	Ready	14 min

Markup & reuse

Import createDataTable from src/theme/ts/data-table.ts and initialize each root once. Rows stay in semantic HTML; the controller manages local filtering, stable sorting, page-scoped selection, pagination, column visibility and CSV export. This is not a virtualized or server-side data grid.

Initialization and local actions

import { createDataTable } from "./src/theme/ts/data-table";

const root = document.querySelector("[data-table]");
const table = createDataTable(root);

// Handle domain-specific actions in your project code.
const selectedIds = table.getSelectedIds();
table.clearSelection();
table.setState("loading"); // ready | loading | error | denied
table.reset();
table.destroy(); // remove listeners when the view is discarded

Validate and authorize any real bulk action on your server. The supplied review action only confirms the selected fixture IDs in memory. The controller does not fetch data or write to storage.

Authored row contract

<div data-table>
  <div data-table-content>
    <!-- Label search, filter, page size and selection controls. -->
    <table>
      <caption>Run history</caption>
      <thead><!-- Named sortable column headings --></thead>
      <tbody data-table-body>
        <tr data-row-id="run-142"
            data-search="Authentication guard run-142"
            data-filter="review"
            data-sort-name="Authentication guard"
            data-sort-duration="8">
          <th scope="row" data-column="name">Authentication guard</th>
          <td data-column="duration">8 min</td>
        </tr>
      </tbody>
    </table>
  </div>
  <p data-table-status role="status"></p>
</div>

Use a unique data-row-id for each row. Sort buttons declare data-table-sort and data-sort-type; column headers and cells share data-column. Keep a caption, scoped headers and an accessible name on every checkbox. Copy the complete working specimen when adding the optional controls.

Keyboard: Tab reaches search, native selects, checkboxes and sort buttons. Space toggles selection; Enter activates a sort or action. The table scroll region can be focused at narrow widths. Loading and permission states are simulations, not real access control.

Jump to…

Tables & selection

Run table

No matching runs

Independent instance

No matching projects

Markup & reuse

Review selected runs?