UI DeployDesign languages Themes For agents llms.txt

Warm Editorial — data

Schedule Table

Warm hairline rules, an uppercase header, sage and bronze status pills. Below 720px each row turns into a card and every cell carries its own label, so nothing is lost to a horizontal scrollbar.

Open preview
Theme
Warm Editorial
Category
data
JavaScript
none
Breakpoint
720px
Min width
320px

Paste this into Claude, Cursor or Copilot — or point the agent at https://ui-deploy.com/r/warm-editorial/data-table/prompt.md 

# Schedule Table — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

---

## What to build

A quiet data table inside a rounded 28px panel. Uppercase header row on the raised
surface, warm hairline rules between rows, and status shown as a small pill.

**Below 720px the table stops being a table.** Each row becomes a card and every
cell prints its own label from `data-label`.

---

## Tokens

```css
:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F; --text3:#8C857A;
  --accent-text:#7D6644; --accent-s:rgba(163,138,106,.12);
  --accent-b:rgba(163,138,106,.30);
  --sage:#7C8A76; --sage-s:rgba(124,138,118,.12);
  --radius:28px; --radius-pill:999px;
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92; --text3:#8A8177;
  --accent-text:#C0A888; --accent-s:rgba(179,155,124,.13);
  --accent-b:rgba(179,155,124,.28);
  --sage:#93A08C; --sage-s:rgba(147,160,140,.13);
}
```

---

## Rules — these are not preferences

1. **Do not solve mobile with `overflow-x:auto`.** A sideways-scrolling table hides
   its right-hand columns, and the right-hand columns are where the answer usually
   is. Restack into cards instead.
2. **Hide the `<thead>` visually, not with `display:none`.** Use the clip pattern so
   screen readers still announce the column names.
3. **Every cell needs `data-label`** matching its column, or the mobile card layout
   loses its meaning.
4. **Status is stated in words** — "Full", "Waitlist", "4 open". Colour confirms the
   message; it is never the message.
5. **Sage is the second voice.** Use it for positive status and small marks only.
   Bronze stays the single accent that speaks.
6. **Headers take `scope="col"` and the table takes a `<caption>`.** The caption
   doubles as the section eyebrow here — styled uppercase, wide-tracked, bronze.
7. Row rules are `--border` hairlines. No zebra striping; it fights the warm palette.
8. The panel corner is 28px with `overflow:hidden` so the header corners clip.

---

## Adapting it

- **Sortable columns** — put a real `<button>` inside the `<th>` and set
  `aria-sort` on the header. Do not make the whole `<th>` clickable.
- **Many rows** — paginate. This table is designed to be read, not scrolled; past
  about 15 rows the language stops working and you want a denser one.
- **Numeric columns** — right-align and use `font-variant-numeric:tabular-nums`.

---

## Reference implementation

See `code.html`. No JavaScript.

Schedule Table — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

What to build

A quiet data table inside a rounded 28px panel. Uppercase header row on the raised surface, warm hairline rules between rows, and status shown as a small pill.

Below 720px the table stops being a table. Each row becomes a card and every cell prints its own label from data-label.

Tokens

:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F; --text3:#8C857A;
  --accent-text:#7D6644; --accent-s:rgba(163,138,106,.12);
  --accent-b:rgba(163,138,106,.30);
  --sage:#7C8A76; --sage-s:rgba(124,138,118,.12);
  --radius:28px; --radius-pill:999px;
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92; --text3:#8A8177;
  --accent-text:#C0A888; --accent-s:rgba(179,155,124,.13);
  --accent-b:rgba(179,155,124,.28);
  --sage:#93A08C; --sage-s:rgba(147,160,140,.13);
}

Rules — these are not preferences

  1. Do not solve mobile with overflow-x:auto. A sideways-scrolling table hides its right-hand columns, and the right-hand columns are where the answer usually is. Restack into cards instead.
  2. Hide the <thead> visually, not with display:none. Use the clip pattern so screen readers still announce the column names.
  3. Every cell needs data-label matching its column, or the mobile card layout loses its meaning.
  4. Status is stated in words — "Full", "Waitlist", "4 open". Colour confirms the message; it is never the message.
  5. Sage is the second voice. Use it for positive status and small marks only. Bronze stays the single accent that speaks.
  6. Headers take scope="col" and the table takes a <caption>. The caption doubles as the section eyebrow here — styled uppercase, wide-tracked, bronze.
  7. Row rules are --border hairlines. No zebra striping; it fights the warm palette.
  8. The panel corner is 28px with overflow:hidden so the header corners clip.

Adapting it

  • Sortable columns — put a real <button> inside the <th> and set

aria-sort on the header. Do not make the whole <th> clickable.

  • Many rows — paginate. This table is designed to be read, not scrolled; past

about 15 rows the language stops working and you want a denser one.

  • Numeric columns — right-align and use font-variant-numeric:tabular-nums.

Reference implementation

See code.html. No JavaScript.