Table - Rails UI Components

Name	Status	Amount
Item 1	Active	$100

Usage

<%= ui.table do %>
  <%= ui.table_thead do %>
    <%= ui.table_tr do %>
      <%= ui.table_th "Column 1" %>
      <%= ui.table_th "Column 2" %>
    <% end %>
  <% end %>
  <%= ui.table_tbody do %>
    <%= ui.table_tr do %>
      <%= ui.table_td "Data 1" %>
      <%= ui.table_td "Data 2" %>
    <% end %>
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
`bordered`	`Boolean`	`false`	Whether to show borders on the table.
`full`	`Boolean`	`true`	Whether the table should take full width.
`size`	`Symbol` `:xs` \| `:sm` \| `:md` \| `:lg`	`:md`	Size of table cells and text.
`hovered`	`Boolean`	`false`	Whether to highlight rows on hover.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`table_thead`	`ui.table_thead`	Table header section containing column headers.
`table_tbody`	`ui.table_tbody`	Table body section containing data rows.
`table_tfoot`	`ui.table_tfoot`	Table footer section for summary or total rows.
`table_tr`	`ui.table_tr`	Table row element.
`table_th`	`ui.table_th`	Table header cell element.
`table_td`	`ui.table_td`	Table data cell element.

Examples

Basic Table

Payment	Status	Amount	Actions
Payment Name		$1,200.00
Total		$2,400.00

<%= ui.table size: :md, hovered: true do %>
  <%= ui.table_thead do %>
    <%= ui.table_tr do %>
      <%= ui.table_th "Payment" %>
      <%= ui.table_th "Status" %>
      <%= ui.table_th "Amount" %>
      <%= ui.table_th "Actions" %>
    <% end %>
  <% end %>
  <%= ui.table_tbody do %>
    <%= ui.table_tr do %>
      <%= ui.table_td "Payment Name" %>
      <%= ui.table_td { ui.badge title: "Paid", variant: :green } %>
      <%= ui.table_td "$1,200.00" %>
      <%= ui.table_td(actions: true) do %>
        <%= ui.group do %>
          <%= ui.btn "Show", size: :sm, variant: :outline %>
          <%= ui.btn "Edit", size: :sm, variant: :outline %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <%= ui.table_tfoot do %>
    <%= ui.table_tr do %>
      <%= ui.table_td "Total", colspan: 2 %>
      <%= ui.table_td "$2,400.00", colspan: 2 %>
    <% end %>
  <% end %>
<% end %>

Bordered Table with Sticky Column

Payment	Status	Amount	Actions
Payment Name	Paid	$1,200.00

<%= ui.table size: :xs, bordered: true, hovered: true do %>
  <%= ui.table_thead do %>
    <%= ui.table_tr do %>
      <%= ui.table_th(sticky: :left) { "Payment" } %>
      <%= ui.table_th { "Status" } %>
      <%= ui.table_th { "Amount" } %>
      <%= ui.table_th { "Actions" } %>
    <% end %>
  <% end %>
  <%= ui.table_tbody do %>
    <%= ui.table_tr do %>
      <%= ui.table_td "Payment Name", sticky: :left %>
      <%= ui.table_td "Paid" %>
      <%= ui.table_td "$1,200.00" %>
      <%= ui.table_td(actions: true) do %>
        <%= ui.btn "Edit", size: :xs, variant: :outline %>
      <% end %>
    <% end %>
  <% end %>
<% end %>