Table

Organism

Responsive table. scope="col" headers, hover row highlight, empty-state message, and custom cell render support.

Preview

Name	Role	Status	Joined
Alice Johnson	Admin	Active	Jan 2024
Bob Smith	Editor	Active	Mar 2024
Carol White	Viewer	Inactive	Jun 2024
Dan Brown	Editor	Pending	Sep 2024

Code

<%- include('modules/ui/Table', {
  columns: [
    { key: 'name',   header: 'Name' },
    { key: 'role',   header: 'Role' },
    { key: 'status', header: 'Status' },
    { key: 'joined', header: 'Joined', align: 'right' },
  ],
  rows: users
}) %>

Preview

Setting	Value
Max upload size	10 MB
Session timeout	30 min
API rate limit	1 000 / hr
Cache TTL	5 min

Code

<%- include('modules/ui/Table', {
  columns: [
    { key: 'key',   header: 'Setting' },
    { key: 'value', header: 'Value', align: 'right' },
  ],
  rows: settings
}) %>

Preview

Name	Role	Status	Joined
No users found. Invite someone to get started.

Code

<%- include('modules/ui/Table', {
  columns: [...],
  rows: [],
  emptyMessage: 'No users found. Invite someone to get started.'
}) %>

<%# Backwards-compatible shim — the implementation now lives in
    `modules/ui/Table/`. Existing `include('modules/ui/Table', ...)` keeps
    working unchanged. %>
<%- include('./Table/Table', Object.assign({}, locals, { mode: 'plain' })) %>

Table

Default

Compact — 2 columns

Empty state