Table

Uma tabela responsiva construída sobre os elementos semânticos nativos.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add table --yes

O item table do registry instala estes arquivos:

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

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Cada parte renderiza o elemento HTML correspondente (thead, tbody, th, …). Use scope: nos cabeçalhos e ui_table_caption para descrever a tabela.

<%= 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 %>

Ou renderize os componentes diretamente:

<%= 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 %>

Composição

A raiz envolve a tabela em um container com rolagem horizontal.

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

Exemplos

Faturas

A anatomia completa: caption, header, body e footer com células alinhadas.

Uma lista das suas faturas recentes.
Fatura	Situação	Forma	Valor
INV001	Paga	Cartão de crédito	R$ 250,00
INV002	Pendente	Transferência	R$ 150,00
INV003	Paga	Cartão de crédito	R$ 350,00
INV004	Cancelada	Cartão de crédito	R$ 450,00
Total			R$ 1.200,00

<%= ui_table(class: "max-w-xl") do %>
  <%= ui_table_caption { "Uma lista das suas faturas recentes." } %>
  <%= ui_table_header do %>
    <%= ui_table_row do %>
      <%= ui_table_head(scope: "col", class: "w-[100px]") { "Fatura" } %>
      <%= ui_table_head(scope: "col") { "Situação" } %>
      <%= ui_table_head(scope: "col") { "Forma" } %>
      <%= ui_table_head(scope: "col", class: "text-right") { "Valor" } %>

<%= ui_table(class: "max-w-xl") do %>
  <%= ui_table_caption { "Uma lista das suas faturas recentes." } %>
  <%= ui_table_header do %>
    <%= ui_table_row do %>
      <%= ui_table_head(scope: "col", class: "w-[100px]") { "Fatura" } %>
      <%= ui_table_head(scope: "col") { "Situação" } %>
      <%= ui_table_head(scope: "col") { "Forma" } %>
      <%= ui_table_head(scope: "col", class: "text-right") { "Valor" } %>
    <% end %>
  <% end %>
  <%= ui_table_body do %>
    <% [
      [ "INV001", "Paga", "Cartão de crédito", "R$ 250,00" ],
      [ "INV002", "Pendente", "Transferência", "R$ 150,00" ],
      [ "INV003", "Paga", "Cartão de crédito", "R$ 350,00" ],
      [ "INV004", "Cancelada", "Cartão de crédito", "R$ 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") { "R$ 1.200,00" } %>
    <% end %>
  <% end %>
<% end %>

Linha selecionada

Use data: { state: "selected" } para destacar uma linha.

Linha padrão

Linha selecionada (data-state="selected")

<%= ui_table(class: "max-w-md") do %>
  <%= ui_table_body do %>
    <%= ui_table_row do %>
      <%= ui_table_cell { "Linha padrão" } %>
    <% end %>
    <%= ui_table_row(data: { state: "selected" }, aria: { selected: "true" }) do %>
      <%= ui_table_cell { "Linha selecionada (data-state=\"selected\")" } %>
    <% end %>

<%= ui_table(class: "max-w-md") do %>
  <%= ui_table_body do %>
    <%= ui_table_row do %>
      <%= ui_table_cell { "Linha padrão" } %>
    <% end %>
    <%= ui_table_row(data: { state: "selected" }, aria: { selected: "true" }) do %>
      <%= ui_table_cell { "Linha selecionada (data-state=\"selected\")" } %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Todas as partes aceitam class / class_name, **attrs e bloco.

Helper	Elemento	Notas
`ui_table`	`div > table`	Container com `overflow-x-auto`; classes extras vão na `<table>`.
`ui_table_header` / `ui_table_body` / `ui_table_footer`	`thead` / `tbody` / `tfoot`	Seções da tabela.
`ui_table_row`	`tr`	`data: { state: "selected" }` destaca a linha.
`ui_table_head`	`th`	Passe `scope: "col"` ou `scope: "row"`.
`ui_table_cell`	`td`	Aceita `colspan`/`rowspan` como atributos.
`ui_table_caption`	`caption`	Descrição acessível, exibida abaixo da tabela (`caption-bottom`).