Table

Tables display structured data in rows and columns.

Basic Table

A simple table with header and body.

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	Editor
Bob Wilson	bob@example.com	Viewer

<%= render Rvk::TableComponent.new do |table| %>
  <% table.with_header do %>
    <tr>
      <%= render Rvk::Table::HeaderCellComponent.new.with_content("Name") %>
      <%= render Rvk::Table::HeaderCellComponent.new.with_content("Email") %>
      <%= render Rvk::Table::HeaderCellComponent.new.with_content("Role") %>
    </tr>
  <% end %>

  <% table.with_body do %>
    <%= render Rvk::Table::RowComponent.new do %>
      <%= render Rvk::Table::CellComponent.new { "John Doe" } %>
      <%= render Rvk::Table::CellComponent.new { "john@example.com" } %>
      <%= render Rvk::Table::CellComponent.new { "Admin" } %>
    <% end %>
  <% end %>
<% end %>

Rich Content

Tables can contain badges, avatars, and actions.

User	Status	Role
JD John Doe	Active	Admin
JS Jane Smith	Pending	Editor
BW Bob Wilson	Inactive	Viewer

<%= render Rvk::Table::CellComponent.new do %>
  <div class="flex items-center gap-3">
    <%= render Rvk::AvatarComponent.new(initials: "JD", size: :sm) %>
    <span class="font-medium">John Doe</span>
  </div>
<% end %>

<%= render Rvk::Table::CellComponent.new do %>
  <%= render Rvk::BadgeComponent.new(variant: :success, pill: true).with_content("Active") %>
<% end %>

Striped Rows

Add striped styling to rows.

Product	Price	Stock
Widget A	$29.99	150
Widget B	$49.99	85
Widget C	$19.99	200
Widget D	$99.99	42

<%= render Rvk::TableComponent.new(striped: true) do |table| %>
  ...
<% end %>

Props

Prop	Type	Default	Description
striped	Boolean	false	Add alternating row backgrounds

Sub-components

Component	Description
Rvk::Table::HeaderCellComponent	Table header cell (<th>)
Rvk::Table::RowComponent	Table row (<tr>)
Rvk::Table::CellComponent	Table data cell (<td>)