Tables

Full-featured HTML table component with consistent header, body, and footer styling. Supports striped rows, full cell borders, hover highlights, sticky headers, horizontal and vertical scroll, sort indicators, row and cell color highlighting, definition tables, and compact or spacious size variants.

Basic

Add wf-table to a standard <table> element. Use thead , tbody , and optionally tfoot for semantic structure.

<table class="wf-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Johnson</td>
      <td>Admin</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Card Wrapper

Wrap the table (or a wf-table-wrap ) in wf-table-card for a bordered container with a drop shadow. Add wf-table-card-outlined to keep the border without the shadow.

<div class="wf-table-card">
  <table class="wf-table">…</table>
</div>

<div class="wf-table-card wf-table-card-outlined">
  <table class="wf-table">…</table>
</div>

Style Variants

Combine style modifiers freely. All modifiers apply to the wf-table element itself.

<table class="wf-table wf-table-striped">…</table>

<table class="wf-table wf-table-hover">…</table>

<table class="wf-table wf-table-bordered">…</table>

<table class="wf-table wf-table-borderless">…</table>

Sizes

Add wf-table-sm for compact rows or wf-table-lg for spacious rows. The default (no modifier) sits between the two.

<table class="wf-table wf-table-sm">…</table>

<table class="wf-table wf-table-lg">…</table>

Footer

Add a tfoot for totals, summaries, or pagination. The footer is separated from the body by a double top border and uses the subtle surface background.

<table class="wf-table">
  <thead>…</thead>
  <tbody>…</tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total</td>
      <td>$227.46</td>
    </tr>
  </tfoot>
</table>

Row & Cell Colors

Apply wf-row-* to a tr to tint the entire row, or wf-cell-* to a single td or th . Available variants: primary , positive , negative , alert , info .

<tr class="wf-row-primary">…</tr>
<tr class="wf-row-positive">…</tr>
<tr class="wf-row-negative">…</tr>
<tr class="wf-row-alert">…</tr>
<tr class="wf-row-info">…</tr>

<td class="wf-cell-primary">…</td>
<td class="wf-cell-positive">…</td>
<td class="wf-cell-negative">…</td>
<td class="wf-cell-alert">…</td>
<td class="wf-cell-info">…</td>

Definition

Add wf-table-definition to display the first th in each body row as a muted label with a right border — ideal for key-value record views.

<table class="wf-table wf-table-definition">
  <tbody>
    <tr>
      <th>Name</th>
      <td>Alice Johnson</td>
    </tr>
    <tr>
      <th>Email</th>
      <td>alice@example.com</td>
    </tr>
    <tr>
      <th>Department</th>
      <td>Engineering</td>
    </tr>
  </tbody>
</table>

Sort Header

Add wf-th-sort to a th to show a grab cursor and hover tint. Set wf-sort-asc or wf-sort-desc (or the equivalent aria-sort attribute) to display the active sort arrow. The sort icons are rendered by the WojoIcons font.

<table class="wf-table">
  <thead>
    <tr>
      <!-- Sortable, currently ascending -->
      <th class="wf-th-sort wf-sort-asc">Name</th>
      <!-- Sortable, no active sort -->
      <th class="wf-th-sort">Role</th>
      <!-- Sortable, currently descending -->
      <th class="wf-th-sort wf-sort-desc">Department</th>
      <!-- Non-sortable column -->
      <th>Status</th>
    </tr>
  </thead>
  <tbody>…</tbody>
</table>

<!-- aria-sort alternative (accessibility-friendly) -->
<th class="wf-th-sort" aria-sort="ascending">Name</th>
<th class="wf-th-sort" aria-sort="descending">Department</th>

Scroll & Sticky Header

Wrap the table in wf-table-wrap for horizontal overflow scroll. Add wf-table-scroll to also enable vertical scroll with a max-height (default 22rem, override with --wf-table-scroll-h ). Add wf-table-sticky to the table to pin the header.

<div class="wf-table-wrap">
  <table class="wf-table">…</table>
</div>

<div class="wf-table-wrap wf-table-scroll">
  <table class="wf-table wf-table-sticky">…</table>
</div>

<!-- Override max-height -->
<div class="wf-table-wrap wf-table-scroll"
     style="--wf-table-scroll-h: 18rem">
  <table class="wf-table wf-table-sticky">…</table>
</div>

Custom Properties

Class Reference

All modifier classes available on .wf-table