Pages
Introduction Colors & Tokens Icons
UI
Button Link Badge Notification Badge Alert Card Spinner Avatar Divider Empty State
Interactive
Modal Side Modal Dropdown Tooltip Accordion Tabs Flash Toast
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time

Table

Themed table with columns and rows slots — each row composes cells .

Usage

Name Role Status
Ada LovelaceEngineerActiveEdit
Grace HopperAdmiralAwayEdit
= app_theme_table do |table|
  - table.with_column "Name"
  - table.with_column "Role"
  - table.with_column "Status"
  - table.with_column ""
  - [["Ada Lovelace", "Engineer", :success, "Active"], ["Grace Hopper", "Admiral", :warning, "Away"]].each do |name, role, intent, status|
    - table.with_row do |row|
      - row.with_cell { name }
      - row.with_cell { role }
      - row.with_cell { app_theme_badge(status, variant: intent) }
      - row.with_cell { app_theme_link "Edit", href: "#" }