Table

The table (.table) styles a native HTML <table> for displaying rows of structured data — user lists, invoices, or any grid of records. It builds on real <thead>/<tbody>/<tfoot> semantics rather than a bespoke DOM, so it stays accessible and works without JavaScript for the common read-only case. Unlike most Display components, the table does carry JavaScript behavior for two interactions: click-to-sort column headers and row selection (including a select-all) — both handled by delegated events with no per-table wiring. Always wrap it in a .table-wrap so it scrolls horizontally on narrow screens instead of overflowing the page.

<div class="table-wrap">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Role</th>
        <th scope="col" class="table-cell-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ada Lovelace</td>
        <td>Admin</td>
        <td class="table-num">$1,240</td>
      </tr>
      <tr>
        <td>Alan Turing</td>
        <td>Editor</td>
        <td class="table-num">$980</td>
      </tr>
    </tbody>
  </table>
</div>