Table

A responsive table component for displaying tabular data.

No JavaScript Required

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	Editor	Active
Bob Johnson	bob@example.com	User	Inactive

Installation

Add the component to your project:

rails generate shadcn:component table

Usage

The Table component uses a slot-based API with nested components for header, body, footer, and caption.

<%= render Shadcn::TableComponent.new do |table| %>
  <% table.with_header do |header| %>
    <% header.with_row do |row| %>
      <% row.with_head { "Name" } %>
      <% row.with_head { "Email" } %>
      <% row.with_head { "Role" } %>
    <% end %>
  <% end %>
  <% table.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell { "John Doe" } %>
      <% row.with_cell { "john@example.com" } %>
      <% row.with_cell { "Admin" } %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell { "Jane Smith" } %>
      <% row.with_cell { "jane@example.com" } %>
      <% row.with_cell { "User" } %>
    <% end %>
  <% end %>
<% end %>

Examples

With Caption

Add a caption to describe the table contents.

A list of your recent transactions.
Transaction	Amount	Status
Payment	$250.00	Completed
Refund	$150.00	Processing

<%= render Shadcn::TableComponent.new do |table| %>
  <% table.with_caption { "A list of your recent transactions." } %>
  <% table.with_header do |header| %>
    <% header.with_row do |row| %>
      <% row.with_head { "Transaction" } %>
      <% row.with_head { "Amount" } %>
      <% row.with_head { "Status" } %>
    <% end %>
  <% end %>
  <% table.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell { "Payment" } %>
      <% row.with_cell { "$250.00" } %>
      <% row.with_cell { "Completed" } %>
    <% end %>
  <% end %>
<% end %>

With Footer

Use a footer row for totals or summary information.

Item	Quantity	Price
Product A	2	$20.00
Product B	1	$15.00
Total	3	$35.00

<%= render Shadcn::TableComponent.new do |table| %>
  <% table.with_header do |header| %>
    <% header.with_row do |row| %>
      <% row.with_head { "Item" } %>
      <% row.with_head { "Quantity" } %>
      <% row.with_head { "Price" } %>
    <% end %>
  <% end %>
  <% table.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell { "Product A" } %>
      <% row.with_cell { "2" } %>
      <% row.with_cell { "$20.00" } %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell { "Product B" } %>
      <% row.with_cell { "1" } %>
      <% row.with_cell { "$15.00" } %>
    <% end %>
  <% end %>
  <% table.with_footer do |footer| %>
    <% footer.with_row do |row| %>
      <% row.with_cell { "Total" } %>
      <% row.with_cell { "3" } %>
      <% row.with_cell { "$35.00" } %>
    <% end %>
  <% end %>
<% end %>

Invoices Table

A complete example with caption, footer, and custom cell styling.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$750.00

<%= render Shadcn::TableComponent.new do |table| %>
  <% table.with_caption { "A list of your recent invoices." } %>
  <% table.with_header do |header| %>
    <% header.with_row do |row| %>
      <% row.with_head { "Invoice" } %>
      <% row.with_head { "Status" } %>
      <% row.with_head { "Method" } %>
      <% row.with_head(class: "text-right") { "Amount" } %>
    <% end %>
  <% end %>
  <% table.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell(class: "font-medium") { "INV001" } %>
      <% row.with_cell { "Paid" } %>
      <% row.with_cell { "Credit Card" } %>
      <% row.with_cell(class: "text-right") { "$250.00" } %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell(class: "font-medium") { "INV002" } %>
      <% row.with_cell { "Pending" } %>
      <% row.with_cell { "PayPal" } %>
      <% row.with_cell(class: "text-right") { "$150.00" } %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell(class: "font-medium") { "INV003" } %>
      <% row.with_cell { "Unpaid" } %>
      <% row.with_cell { "Bank Transfer" } %>
      <% row.with_cell(class: "text-right") { "$350.00" } %>
    <% end %>
  <% end %>
  <% table.with_footer do |footer| %>
    <% footer.with_row do |row| %>
      <% row.with_cell(colspan: 3) { "Total" } %>
      <% row.with_cell(class: "text-right") { "$750.00" } %>
    <% end %>
  <% end %>
<% end %>

Selected Row

Highlight a selected row using the selected prop.

Name	Status
Item 1	Active
Item 2	Selected
Item 3	Active

<%= render Shadcn::TableComponent.new do |table| %>
  <% table.with_header do |header| %>
    <% header.with_row do |row| %>
      <% row.with_head { "Name" } %>
      <% row.with_head { "Status" } %>
    <% end %>
  <% end %>
  <% table.with_body do |body| %>
    <% body.with_row do |row| %>
      <% row.with_cell { "Item 1" } %>
      <% row.with_cell { "Active" } %>
    <% end %>
    <% body.with_row(selected: true) do |row| %>
      <% row.with_cell { "Item 2" } %>
      <% row.with_cell { "Selected" } %>
    <% end %>
    <% body.with_row do |row| %>
      <% row.with_cell { "Item 3" } %>
      <% row.with_cell { "Active" } %>
    <% end %>
  <% end %>
<% end %>

API Reference

TableComponent

Main table container with automatic overflow scrolling.

Slots

Slot	Type	Description
with_caption	`TableCaptionComponent`	Optional caption describing the table
with_header	`TableHeaderComponent`	Table header with column headings
with_body	`TableBodyComponent`	Table body with data rows
with_footer	`TableFooterComponent`	Optional footer for totals or summary

TableHeaderComponent

Contains header rows with column headings.

Slots

Slot	Type	Description
with_row	`TableRowComponent`	Header row containing heading cells

TableBodyComponent

Contains data rows.

Slots

Slot	Type	Description
with_row	`TableRowComponent`	Data row containing cells

TableFooterComponent

Contains footer rows, typically for totals.

Slots

Slot	Type	Description
with_row	`TableRowComponent`	Footer row containing cells

TableRowComponent

API Reference

Prop	Type	Default	Description
selected	`Boolean`	`false`	Highlights the row with selected state

Slots

Slot	Type	Description
with_head	`TableHeadComponent`	Header cell (use in header rows)
with_cell	`TableCellComponent`	Data cell (use in body/footer rows)

TableHeadComponent

Header cell with appropriate styling for column headings. Accepts standard HTML attributes like class, colspan, rowspan.

TableCellComponent

Data cell with appropriate styling. Accepts standard HTML attributes like class, colspan, rowspan.

TableCaptionComponent

Caption text describing the table's purpose or contents.

Accessibility

Uses semantic HTML table elements (<table>, <thead>, <tbody>, <tfoot>)
Header cells use <th> elements for proper screen reader association
Caption provides context for assistive technologies
Responsive overflow container with horizontal scrolling on small screens
Row hover states provide visual feedback
Selected rows use data-state="selected" attribute for programmatic access

On This Page

Installation Usage Examples API Reference Accessibility