Table

Tables are used to display structured data in rows and columns.

Usage

Use the .Table class on a <table> element, preferably wrapped in a .TableRegion. Apply .Table-Row on each <tr> to enable row-level features (alignment, stacked, detail).

<div class="TableRegion">
  <table class="Table">
    <thead>
      <tr class="Table-Row">
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col" class="right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="Table-Row">
        <td>Alice</td>
        <td>alice@example.com</td>
        <td class="right">$120</td>
      </tr>
    </tbody>
  </table>
</div>

Variants

• compact: Reduces padding for denser tables.
• stacked: Transforms the table into cards on mobile screens (requires data-label on <td> and .Table-Row on <tr>).

<table class="Table compact">…</table>

Row States

Apply state classes directly on <tr> to communicate status.

• warning: Cautionary or pending row.
• danger: Error or critical row.
• success: Completed or positive row.
• muted: Inactive or de-emphasized row.

<tr class="Table-Row warning"><td>Pending review</td></tr>
<tr class="Table-Row danger"><td>Failed</td></tr>
<tr class="Table-Row success"><td>Complete</td></tr>
<tr class="Table-Row muted"><td>Archived</td></tr>

Clickable Rows

Add data-clickable to a .Table-Row to show a pointer cursor for interactive rows.

<tr class="Table-Row" data-clickable onclick="…">…</tr>

Column Alignment

Add .center or .right to <th> or <td> cells. The cell must be inside a .Table-Row.

<th class="center">Status</th>
<th class="right">Amount</th>

Responsive Tables

Use .TableRegion for horizontal scrolling on small screens. For a card-like layout on mobile, use the .stacked variant with data-label attributes on each <td>.

<table class="Table stacked">
  <tbody>
    <tr class="Table-Row">
      <td data-label="Name">Alice</td>
      <td data-label="Email">alice@example.com</td>
    </tr>
  </tbody>
</table>