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!
Components
Component | Built using | Source |
---|---|---|
Table | Phlex | |
TableBody | Phlex | |
TableCaption | Phlex | |
TableCell | Phlex | |
TableFooter | Phlex | |
TableHead | Phlex | |
TableHeader | Phlex | |
TableRow | Phlex |
Component | Built using | Source |
---|---|---|
Table | Phlex | |
TableBody | Phlex | |
TableCaption | Phlex | |
TableCell | Phlex | |
TableFooter | Phlex | |
TableHead | Phlex | |
TableHeader | Phlex | |
TableRow | Phlex |