Table
A responsive table component.
Usage
Without builder
Name | Status | Role | |
---|---|---|---|
INV-0001 | Active | Credit Card | $100.00 |
INV-0002 | Active | Bank Transfer | $230.00 |
INV-0003 | Pending | PayPal | $350.00 |
INV-0004 | Inactive | Credit Card | $100.00 |
Total | $780.00 |
Table do TableCaption { "Employees at Acme inc." } TableHeader do TableRow do TableHead { "Name" } TableHead { "Email" } TableHead { "Status" } TableHead(class: "text-right") { "Role" } end end TableBody do invoices.each do |invoice| TableRow do TableCell(class: 'font-medium') { invoice.identifier } TableCell { render_status_badge(invoice.status) } TableCell { invoice.method } TableCell(class: "text-right") { format_amount(invoice.amount) } end end end TableFooter do TableRow do TableHead(class: "font-medium", colspan: 3) { "Total" } TableHead(class: "font-medium text-right") { format_amount(invoices.sum(&:amount)) } end end end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Table
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Table
to app/components/ruby_ui/table.rb
# frozen_string_literal: true module RubyUI class Table < Base def view_template(&block) div(class: "relative w-full overflow-auto") do table(**attrs, &block) end end private def default_attrs { class: "w-full caption-bottom text-sm" } end end end
Copied!
Copy failed!
2
Add RubyUI::TableBody
to app/components/ruby_ui/table/table_body.rb
# frozen_string_literal: true module RubyUI class TableBody < Base def view_template(&) tbody(**attrs, &) end private def default_attrs { class: "[&_tr:last-child]:border-0" } end end end
Copied!
Copy failed!
3
Add RubyUI::TableCaption
to app/components/ruby_ui/table/table_caption.rb
# frozen_string_literal: true module RubyUI class TableCaption < Base def view_template(&) caption(**attrs, &) end private def default_attrs { class: "mt-4 text-sm text-muted-foreground" } end end end
Copied!
Copy failed!
4
Add RubyUI::TableCell
to app/components/ruby_ui/table/table_cell.rb
# frozen_string_literal: true module RubyUI class TableCell < Base def view_template(&) td(**attrs, &) end private def default_attrs { class: "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]" } end end end
Copied!
Copy failed!
5
Add RubyUI::TableFooter
to app/components/ruby_ui/table/table_footer.rb
# frozen_string_literal: true module RubyUI class TableFooter < Base def view_template(&) tfoot(**attrs, &) end private def default_attrs { class: "border-t bg-muted bg-opacity-50 font-medium[& amp;>tr]:last:border-b-0" } end end end
Copied!
Copy failed!
6
Add RubyUI::TableHead
to app/components/ruby_ui/table/table_head.rb
# frozen_string_literal: true module RubyUI class TableHead < Base def view_template(&) th(**attrs, &) end private def default_attrs { class: "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]" } end end end
Copied!
Copy failed!
7
Add RubyUI::TableHeader
to app/components/ruby_ui/table/table_header.rb
# frozen_string_literal: true module RubyUI class TableHeader < Base def view_template(&) thead(**attrs, &) end private def default_attrs { class: "[&_tr]:border-b" } end end end
Copied!
Copy failed!
8
Add RubyUI::TableRow
to app/components/ruby_ui/table/table_row.rb
# frozen_string_literal: true module RubyUI class TableRow < Base def view_template(&) tr(**attrs, &) end private def default_attrs { class: "border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted" } end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Table | Phlex | |
TableBody | Phlex | |
TableCaption | Phlex | |
TableCell | Phlex | |
TableFooter | Phlex | |
TableHead | Phlex | |
TableHeader | Phlex | |
TableRow | Phlex |