Table

Overview

The table is how the workspace shows many records at once: the enquiry queue, the itineraries list. It wears the card dress — hairline border, card radius, low shadow — rather than a heavier outline of its own, because a table is a card that happens to hold rows.

Usage

• Compare records across named columnsUse a table when readers need to scan the same attributes across multiple rows, sort them, or inspect aligned values.
• Keep cells structurally consistentEvery column owns one data role and every row follows the same reading order. Use List when column comparison is not part of the task.
• Transform rows below 768pxOn small screens, render each row as a card in the same reading order instead of introducing horizontal scrolling.

Anatomy

Variants and states

The expanding row

The queue's rows open in place. Clicking the row expands it; the caret button holds the row's right corner and mirrors the open state; the detail content sits on white while the open row keeps its wash. The record's one door stays the guest's name — a row that expands is not a row that navigates. Press a row below.

Sorting

The current table does not sort by its column heads. Column sorting left the table when the sort became a select on the facet row beside the search, so the heads stay quiet and name their facts. The layer still carries a specified th.mk-sortable head — chevron pair, direction by emphasis, aria-sort on the cell — but no built surface wears it; it waits for a table whose sorting genuinely belongs in the head.

States

Every state below is the real component wearing that state, not a picture of it — each cell is a compact live table whose second row carries the state.

Do and don't

Copy

A column head names the fact the column holds, in the agent's words.

• The head names the factGuest / party, Dates, Owner — one or two words. A head that needs a sentence is a column that holds two facts.
• No units in cellsThe head carries what is constant — Nights — and the cell carries only the value. A column of "7 nights" says "nights" forty times.
• Absence is a dashAn unassigned owner is —, not "n/a", not "none", not an empty cell that reads as a loading error.
• Dates without the year14–21 Nov. The workspace's horizon is months, and the year returns only when it is genuinely ambiguous.
• Facts are not gluedA subline is a sentence with commas — 2 adults, one child — or separate elements with air. The «·» string is banned as fact glue.

Responsive

Below 768px a dense table becomes a card list. It never scrolls sideways. The card keeps the same reading order as the row — identity, then dates and route, then the operational tail — so nothing has to be re-learned between a desk and a phone.

• The boundary768px, the table-to-cards line for every dense table in the workspace.
• Density holdsThe --mk-table-* variables do not shrink on a phone — a table that gets tighter as the screen narrows is optimising the wrong thing.
• The whole card is the targetWhen the row navigated, the card navigates — one stretched link, no duplicate "Open" button.

Accessibility

• Scope on every head<th scope="col">, so a screen reader announces the column with each cell.
• The expander is a real buttonThe caret carries aria-expanded and an accessible name for both directions; the detail row is hidden when closed, not merely collapsed.
• The name is the doorOpening the record is the name link's job, so a keyboard user is never forced through an expanded row to reach it.
• Hover is not the signalThe row tint invites, but everything a hover reveals is reachable and readable without one.
• Motion respects the settingThe caret's rotation stops under prefers-reduced-motion; the state is still spoken by aria-expanded and the row's wash.

When to reach for something else

• One record as a tileUse Card — which is also what every table becomes below 768px.
• A handful of facts about one objectUse facts and tags in the record itself. A table of one row is a form wearing the wrong clothes.
• Content that panelsUse Widget. A table is for records that repeat, not for sections that differ.

Markup

<table class="mk-table">
  <thead>
    <tr>
      <th scope="col">Guest / party</th>
      <th scope="col">Dates</th>
      <th scope="col">Status</th>
      <th scope="col"><span class="mk-sr-only">Expand</span></th>
    </tr>
  </thead>
  <tbody>
    <!-- the expanding pair: the row, then its detail row -->
    <tr class="mk-row-expand">
      <td><span class="mk-guest">Okafor ×2</span>
          <div class="mk-subline">Anniversary, surprise flag</div></td>
      <td>21–28 Feb</td>
      <td><span class="mk-badge sz-s">…</span></td>
      <td>
        <button class="mk-icon-btn" type="button" aria-expanded="false"
                aria-label="Expand row details">
          <svg data-mk-icon="chevron" aria-hidden="true"></svg>
        </button>
      </td>
    </tr>
    <tr class="mk-row-detail" hidden>
      <td colspan="4"><div class="mk-row-detail-panel">…</div></td>
    </tr>
  </tbody>
</table>

<!-- its mobile form: same record, same reading order -->
<a class="mk-card" href="…">
  <div class="row1">
    <span class="name">Okafor ×2</span>
    <span class="mk-badge sz-s">…</span>
  </div>
  <div class="row2">21–28 Feb, anniversary, surprise flag</div>
</a>