Blocks

Table

A responsive, accessible table. Wraps native <table> semantics with shadcn styling.

Installation

bin/rails g shadcnrb:component table

Usage

Compose sui.table do |t| with t.header, t.body, t.row, t.head, t.cell. Wrap in a card for the bordered look, or leave plain.

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

<%= sui.card(class: "p-0 overflow-hidden w-full") do %>
  <%= sui.table do |t| %>
    <%= t.header do %>
      <%= t.row do %>
        <%= t.head "Invoice" %>
        <%= t.head "Status" %>
        <%= t.head "Method" %>
        <%= t.head "Amount", class: "text-right" %>
      <% end %>
    <% end %>
    <%= t.body do %>
      <% [
        {id: "INV001", status: "Paid",    method: "Credit Card",    amount: "$250.00"},
        {id: "INV002", status: "Pending", method: "PayPal",         amount: "$150.00"},
        {id: "INV003", status: "Unpaid",  method: "Bank Transfer",  amount: "$350.00"}
      ].each do |inv| %>
        <%= t.row do %>
          <%= t.cell inv[:id], class: "font-medium" %>
          <%= t.cell do %>
            <%= sui.badge inv[:status], variant: (inv[:status] == "Paid" ? :default : :secondary) %>
          <% end %>
          <%= t.cell inv[:method] %>
          <%= t.cell inv[:amount], class: "text-right" %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

With caption and footer

A list of your recent invoices.
Invoice	Amount
INV001	$250.00
INV002	$150.00
Total	$400.00

<%= sui.card(class: "p-0 overflow-hidden w-full") do %>
  <%= sui.table do |t| %>
    <%= t.caption "A list of your recent invoices." %>
    <%= t.header do %>
      <%= t.row do %>
        <%= t.head "Invoice" %>
        <%= t.head "Amount", class: "text-right" %>
      <% end %>
    <% end %>
    <%= t.body do %>
      <%= t.row { t.cell("INV001") + t.cell("$250.00", class: "text-right") } %>
      <%= t.row { t.cell("INV002") + t.cell("$150.00", class: "text-right") } %>
    <% end %>
    <%= t.footer do %>
      <%= t.row do %>
        <%= t.cell "Total" %>
        <%= t.cell "$400.00", class: "text-right" %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

API

Method	Renders	Notes
`sui.table`	`<table>`	Wrapped in an `overflow-x-auto` div for horizontal scroll; yields a `t` proxy.
`t.header / body / footer`	`<thead> / <tbody> / <tfoot>`	Footer gets a top border + muted bg.
`t.row`	`<tr>`	Hover highlight, supports `data-state="selected"`.
`t.head`	`<th>`	Muted foreground, left-aligned by default.
`t.cell`	`<td>`	First arg or block for content.
`t.caption`	`<caption>`	Renders below the table (CSS caption-bottom).