Blocks

Table

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

Usage

Compose table, table_header, table_body, table_row, table_head, table_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

live_example do
  sui.card(class: "p-0 overflow-hidden w-full") do
    sui.table do
      sui.table_header do
        sui.table_row do
          sui.table_head "Invoice"
          sui.table_head "Status"
          sui.table_head "Method"
          sui.table_head "Amount", class: "text-right"
        end
      end
      sui.table_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|
          sui.table_row do
            sui.table_cell inv[:id], class: "font-medium"
            sui.table_cell do
              sui.badge inv[:status], variant: (inv[:status] == "Paid" ? :default : :secondary)
            end
            sui.table_cell inv[:method]
            sui.table_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

live_example do
  sui.card(class: "p-0 overflow-hidden w-full") do
    sui.table do
      sui.table_caption "A list of your recent invoices."
      sui.table_header do
        sui.table_row do
          sui.table_head "Invoice"
          sui.table_head "Amount", class: "text-right"
        end
      end
      sui.table_body do
        sui.table_row { sui.table_cell("INV001") + sui.table_cell("$250.00", class: "text-right") }
        sui.table_row { sui.table_cell("INV002") + sui.table_cell("$150.00", class: "text-right") }
      end
      sui.table_footer do
        sui.table_row do
          sui.table_cell "Total"
          sui.table_cell "$400.00", class: "text-right"
        end
      end
    end
  end
end

API

Method	Renders	Notes
table	<table>	Wrapped in a `overflow-x-auto` div for horizontal scroll on narrow viewports.
table_header / body / footer	<thead> / <tbody> / <tfoot>	Footer gets a top border + muted bg.
table_row	<tr>	Hover highlight, supports `data-state="selected"`.
table_head	<th>	Muted foreground, left-aligned by default.
table_cell	<td>	First arg or block for content.
table_caption	<caption>	Renders below the table (CSS caption-bottom).