Table

CSS + JavaScripttable.jsRequires window._icons

The table utility styles a native <table>; table.js adds click-to-sort columns (with auto-inserted sort icons), auto-numbered index columns, and optional accordion sub-rows. Wrap it in table-container for horizontal scrolling.

Sortable data table

Open ↗

<div class="table-container">
  <table class="table" data-table>
    <thead>
      <tr>
        <th data-min-width data-table-index>#</th>
        <th>Currency</th>
        <th>Symbol</th>
        <th>Purchase</th>
        <th>Sale</th>
        <th data-table-no-sort>Registered by</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th data-format="number">1</th>
        <td>Dollar</td>
        <td><span dir="ltr">USD</span></td>
        <td data-table-sort-content="1455"><span data-format="number">1455</span></td>
        <td data-table-sort-content="1470"><span data-format="number">1470</span></td>
        <td>Ahmad Karim</td>
      </tr>

      <tr>
        <th data-format="number">2</th>
        <td>Euro</td>
        <td><span dir="ltr">EUR</span></td>
        <td data-table-sort-content="1570"><span data-format="number">1570</span></td>
        <td data-table-sort-content="1595"><span data-format="number">1595</span></td>
        <td>Sardar Mohammed</td>
      </tr>

      <tr>
        <th data-format="number">3</th>
        <td>Pound</td>
        <td><span dir="ltr">GBP</span></td>
        <td data-table-sort-content="1810"><span data-format="number">1810</span></td>
        <td data-table-sort-content="1840"><span data-format="number">1840</span></td>
        <td>Hama Ali</td>
      </tr>

      <tr>
        <th data-format="number">4</th>
        <td>Turkish Lira</td>
        <td><span dir="ltr">TRY</span></td>
        <td data-table-sort-content="45"><span data-format="number">45</span></td>
        <td data-table-sort-content="48"><span data-format="number">48</span></td>
        <td>Ari Faruq</td>
      </tr>
    </tbody>
  </table>
</div>

Structure

<div class="table-container">
  <table class="table" data-table>
    <thead>
      <tr>
        <th data-min-width data-table-index>#</th>
        <th>Currency</th>
        <th data-table-no-sort>Registered by</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th data-format="number">1</th>
        <td>Dollar</td>
        <td>Ahmad Karim</td>
      </tr>
    </tbody>
  </table>
</div>

Attributes

Header cells (`thead > tr > th`)

Attribute	Role
`data-table`	On the `<table>` — enables sorting.
`data-min-width`	Shrinks the column to its content width.
`data-table-no-sort`	This column is not sortable (no icon, no cursor).
`data-table-index`	Not sortable; its cells are renumbered 1..n after every sort.
`data-table-sort-direction`	`[auto-set]` — `asc` / `desc` on the active column.
`data-table-sort-icon`	`[auto-set]` — the injected chevron pair.

Body cells (`tbody > tr > th \| td`)

Attribute	Role
`data-table-sort-content`	Value used for comparison (falls back to the cell’s text). Use it for dates/numbers whose display text isn’t sortable.

Colors

Add a tone class for a colored frame: table-primary, table-positive, table-negative, table-warning (full), or their -min variants (colored header only).

Accordion sub-rows

Add data-table-accordion to the table, a toggle button per parent row, and hidden sub-rows keyed to it:

<table class="table" data-table-accordion>
  <tbody>
    <tr>
      <td>
        <button class="table-accordion-toggle" data-table-accordion-toggle
          data-table-accordion-target="row-1" aria-expanded="false"></button>
      </td>
      <td>Parent</td>
    </tr>

    <tr class="table-sub-row" data-table-sub-row data-table-sub-row-for="row-1" hidden>
      <td colspan="2">Details…</td>
    </tr>
  </tbody>
</table>

The open/closed icons (data-table-icon-expanded / -collapsed) are injected from window._icons.