Table

A responsive table built on the native semantic elements.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add table --yes

The table registry item installs these files:

app/components/ui_component.rb
app/components/ui/table_component.rb
app/components/ui/table/header_component.rb
app/components/ui/table/body_component.rb
app/components/ui/table/footer_component.rb
app/components/ui/table/row_component.rb
app/components/ui/table/head_component.rb
app/components/ui/table/cell_component.rb
app/components/ui/table/caption_component.rb
app/helpers/ui/table_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Each part renders the matching HTML element (thead, tbody, th, …). Use scope: on header cells and ui_table_caption to describe the table.

<%= ui_table do %>
  <%= ui_table_header do %>
    <%= ui_table_row do %>
      <%= ui_table_head(scope: "col") { "Fatura" } %>
    <% end %>
  <% end %>
  <%= ui_table_body do %>
    <%= ui_table_row do %>

<%= ui_table do %>
  <%= ui_table_header do %>
    <%= ui_table_row do %>
      <%= ui_table_head(scope: "col") { "Fatura" } %>
    <% end %>
  <% end %>
  <%= ui_table_body do %>
    <%= ui_table_row do %>
      <%= ui_table_cell { "INV001" } %>
    <% end %>
  <% end %>
<% end %>

Or render the components directly:

<%= render Ui::TableComponent.new do %>
  <%= render Ui::Table::BodyComponent.new do %>
    <%= render Ui::Table::RowComponent.new do %>
      <%= render Ui::Table::CellComponent.new do %>
        INV001
      <% end %>
    <% end %>
  <% end %>

<%= render Ui::TableComponent.new do %>
  <%= render Ui::Table::BodyComponent.new do %>
    <%= render Ui::Table::RowComponent.new do %>
      <%= render Ui::Table::CellComponent.new do %>
        INV001
      <% end %>
    <% end %>
  <% end %>
<% end %>

Composition

The root wraps the table in a horizontally scrolling container.

Table (overflow container + <table>)
|-- Table::Caption
|-- Table::Header
|   `-- Table::Row > Table::Head (th)
|-- Table::Body
|   `-- Table::Row > Table::Cell (td)
`-- Table::Footer
    `-- Table::Row > Table::Cell

Examples

Invoices

The full anatomy: caption, header, body and footer, with aligned cells.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	Bank Transfer	$150.00
INV003	Paid	Credit Card	$350.00
INV004	Cancelled	Credit Card	$450.00
Total			$1,200.00

<%= ui_table(class: "max-w-xl") do %>
  <%= ui_table_caption { "A list of your recent invoices." } %>
  <%= ui_table_header do %>
    <%= ui_table_row do %>
      <%= ui_table_head(scope: "col", class: "w-[100px]") { "Invoice" } %>
      <%= ui_table_head(scope: "col") { "Status" } %>
      <%= ui_table_head(scope: "col") { "Method" } %>
      <%= ui_table_head(scope: "col", class: "text-right") { "Amount" } %>

<%= ui_table(class: "max-w-xl") do %>
  <%= ui_table_caption { "A list of your recent invoices." } %>
  <%= ui_table_header do %>
    <%= ui_table_row do %>
      <%= ui_table_head(scope: "col", class: "w-[100px]") { "Invoice" } %>
      <%= ui_table_head(scope: "col") { "Status" } %>
      <%= ui_table_head(scope: "col") { "Method" } %>
      <%= ui_table_head(scope: "col", class: "text-right") { "Amount" } %>
    <% end %>
  <% end %>
  <%= ui_table_body do %>
    <% [
      [ "INV001", "Paid", "Credit Card", "$250.00" ],
      [ "INV002", "Pending", "Bank Transfer", "$150.00" ],
      [ "INV003", "Paid", "Credit Card", "$350.00" ],
      [ "INV004", "Cancelled", "Credit Card", "$450.00" ]
    ].each do |invoice, status, method, amount| %>
      <%= ui_table_row do %>
        <%= ui_table_cell(class: "font-medium") { invoice } %>
        <%= ui_table_cell { status } %>
        <%= ui_table_cell { method } %>
        <%= ui_table_cell(class: "text-right") { amount } %>
      <% end %>
    <% end %>
  <% end %>
  <%= ui_table_footer do %>
    <%= ui_table_row do %>
      <%= ui_table_cell(colspan: 3) { "Total" } %>
      <%= ui_table_cell(class: "text-right") { "$1,200.00" } %>
    <% end %>
  <% end %>
<% end %>

Selected row

Use data: { state: "selected" } to highlight a row.

Default row

Selected row (data-state="selected")

<%= ui_table(class: "max-w-md") do %>
  <%= ui_table_body do %>
    <%= ui_table_row do %>
      <%= ui_table_cell { "Default row" } %>
    <% end %>
    <%= ui_table_row(data: { state: "selected" }, aria: { selected: "true" }) do %>
      <%= ui_table_cell { "Selected row (data-state=\"selected\")" } %>
    <% end %>

<%= ui_table(class: "max-w-md") do %>
  <%= ui_table_body do %>
    <%= ui_table_row do %>
      <%= ui_table_cell { "Default row" } %>
    <% end %>
    <%= ui_table_row(data: { state: "selected" }, aria: { selected: "true" }) do %>
      <%= ui_table_cell { "Selected row (data-state=\"selected\")" } %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name, **attrs and a block.

Helper	Element	Notes
`ui_table`	`div > table`	The container, with `overflow-x-auto`; extra classes land on the `<table>`.
`ui_table_header` / `ui_table_body` / `ui_table_footer`	`thead` / `tbody` / `tfoot`	The table's sections.
`ui_table_row`	`tr`	`data: { state: "selected" }` highlights the row.
`ui_table_head`	`th`	Pass `scope: "col"` or `scope: "row"`.
`ui_table_cell`	`td`	Takes `colspan`/`rowspan` through attrs.
`ui_table_caption`	`caption`	An accessible description, shown below the table (`caption-bottom`).