Table

Data grid for rows × columns of structured content. Mirrors Figma node 140-5139 (light) + 5892-39544 (dark) 1:1. Header strip is #F6F6F6 (light) / #2D2D2D (dark) with Body 1 Semi Bold text. Body rows are transparent (the page surface shows through) with Body 1 Medium text. Every cell carries a 5%-alpha hairline border that hashes the grid without competing with content. Body cells typically pair their label with a trailing kebab (⋮) action via the .table-cell + .table-cell-action helpers. The outer .table-wrap clips the corners to 8 px — required because border-radius can't apply to <table> while border-collapse: collapse is in use.

When to use

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

A Table is always wrapped in .table-wrap which clips the corners. The table itself uses standard HTML semantics.

Default

A 6-column table with a Header row + 4 Body rows. Each body cell pairs the label with a trailing kebab (⋮) button — the "more actions" affordance Figma calls out on every body cell.

Structure

The component is a real HTML <table>. Wrap it in a .table-wrap div to round the outer corners. Header cells live in <thead><tr><th>; body cells in <tbody><tr><td>. Use the .table-cell flex wrapper inside a <td> when you want a label + trailing action — display: flex can't sit on the td itself without breaking table layout. Drop the .table-cell-action button when a column doesn't need an action.

<div class="table-wrap">
  <table class="table">
    <thead>
      <tr><th>Name</th><th>Email</th><th>Role</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="table-cell">
            Adesh Singh
            <button type="button" class="table-cell-action" aria-label="More">
              <svg><use href="#ico-kebab"/></svg>
            </button>
          </div>
        </td>
        <td>adesh@example.com</td>
        <td>Owner</td>
      </tr>
    </tbody>
  </table>
</div>

Composition

Body cells hold any inline content — text, links, badges, tags, status dots. The trailing kebab action is optional; drop the button when a column doesn't need it. Cells without the .table-cell flex wrapper render as plain text + the parent td's padding (use for simple text columns).

States

The base table has no row hover / selected states in the Figma spec — Figma keeps the surface quiet so content stays primary. The one interactive element is the per-cell kebab action, which fades a soft hover background. .is-hover forces the hover visual at rest for documentation; the live :hover pseudo-class handles it in production.

Full matrix

Cell content type × row position. Toggle the theme switch in the global header to see every cell under dark tokens — header bg flips #F6F6F6 → #2D2D2D, body bg stays transparent, all borders flip from 5%-black to 5%-white.

Responsive

Wrap any .table in .table-wrap to enable horizontal scroll on narrow screens. The wrapper adds overflow-x: auto and smooth momentum scrolling on touch devices. No changes are needed to the table itself.

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

Accessibility

API