Pattern

Data-table page

A list page: title and primary action, a filter toolbar, the table, and pagination.

.b-wrapper.b-region.b-flow.b-repel.b-cluster

Use for lists people scan, sort and filter. Avoid tables for fewer than ~5 rows or for content people read rather than compare — use cards. Keep the toolbar above the table and pagination below it.

Preview

Acuity Brands Lighting

Each kit renders in its own frame and follows the theme and density set in the header. Open full-size ↗

HTML

Layout uses Beam compositions and utilities only. Buttons, inputs, toggles, badges and tables here are stand-ins so the preview renders — in product, use the Cantina components below.

<div class="[ b-wrapper b-region b-flow ]" data-space="sm">
  <div class="[ b-repel ]">
    <h1>Devices <span class="[ b-badge ]">1,284</span></h1>
    <button class="[ b-button ]" data-variant="solid" type="button">Add device</button>
  </div>
  <div class="[ b-repel ]">
    <div class="[ b-cluster ]" data-gap="sm">
      <input class="[ b-input ]" type="search" placeholder="Search devices" aria-label="Search devices">
      <select class="[ b-input ]" aria-label="Status"><option>All statuses</option><option>Online</option><option>Offline</option></select>
    </div>
    <button class="[ b-button ]" data-variant="ghost" type="button">Export CSV</button>
  </div>
  <div class="[ b-tablewrap ]">
    <table class="[ b-data-table ]">
      <thead><tr><th scope="col">Name</th><th scope="col">Location</th><th scope="col">Firmware</th><th scope="col">Status</th></tr></thead>
      <tbody>
        <tr><td>Sensor 0412</td><td>Floor 3 · East</td><td>2.4.1</td><td><span class="[ b-badge ]" data-tone="success">Online</span></td></tr>
        <tr><td>Fixture 1188</td><td>Floor 3 · Lobby</td><td>2.4.1</td><td><span class="[ b-badge ]" data-tone="success">Online</span></td></tr>
        <tr><td>Gateway 07</td><td>Floor 1 · IT</td><td>1.9.0</td><td><span class="[ b-badge ]" data-tone="warning">Update</span></td></tr>
        <tr><td>Sensor 0977</td><td>Floor 7 · West</td><td>2.4.1</td><td><span class="[ b-badge ]" data-tone="error">Offline</span></td></tr>
      </tbody>
    </table>
  </div>
  <div class="[ b-repel ]">
    <span class="[ u-type-body-sm u-text-neutral-secondary ]">Showing 1–4 of 1,284</span>
    <div class="[ b-cluster ]" data-gap="xs">
      <button class="[ b-button ]" data-variant="outline" type="button">Previous</button>
      <button class="[ b-button ]" data-variant="outline" type="button">Next</button>
    </div>
  </div>
</div>

Cantina components

table-card
input
dropdown
badge
button
pagination-controls

Open Cantina ↗

Recipe

The rules an agent follows to build this pattern. This is what goes into beam.skill.

Header: .b-repel — h1 (with a count) on the left, primary action on the right.
Toolbar: .b-repel — search + filter controls in a .b-cluster on the left, view options on the right.
Table: use Cantina <TableCard> / grid (data table). Wrap in an overflow-x container on small screens; never shrink text to fit.
Status cells use badges (success / warning / error / neutral), not coloured text alone.
Footer: .b-repel — "Showing x–y of z" (type-body-sm text-neutral-secondary) and pagination controls.

beam.skill recipe (Markdown)

## Pattern: Data-table page
A list page: title and primary action, a filter toolbar, the table, and pagination.

Compositions: .b-wrapper, .b-region, .b-flow, .b-repel, .b-cluster
Cantina: table-card, input, dropdown, badge, button, pagination-controls

1. Header: .b-repel — h1 (with a count) on the left, primary action on the right.
2. Toolbar: .b-repel — search + filter controls in a .b-cluster on the left, view options on the right.
3. Table: use Cantina <TableCard> / grid (data table). Wrap in an overflow-x container on small screens; never shrink text to fit.
4. Status cells use badges (success / warning / error / neutral), not coloured text alone.
5. Footer: .b-repel — "Showing x–y of z" (type-body-sm text-neutral-secondary) and pagination controls.