Table
Declarative index tables in the spirit of form_for: describe the columns, and the table draws the chrome — sortable headers, empty states, companion rows and pagination.
Sortable, numeric and aligned
Click a sortable header to toggle ?sort and ?direction. The note under Ada is a companion row.
<%= table_for @things, paginate: @pager do |table| %>
<% table.column "Name", :name, sort: :name, width: "34%" %>
<% table.column "Role", :role, sort: :role, width: "22%" %>
<% table.column "Score", :score, numeric: true, width: "14%" %>
<% table.column "Centred", :role, align: :center, width: "16%" %>
<% table.column "Right", :score, align: :right, width: "14%" %>
<% table.details { |thing| thing.note } %>
<% end %>No people yet.
<%= table_for [], paginate: @pager do |table| %>
<% table.empty "No people yet." %>
<% table.column "Name", :name %>
<% table.column "Role", :role %>
<% end %>Deferred
The first render never touches the collection. Reload to watch the skeleton swap for the rows without the columns shifting.
| Name | Role | Score | Right |
|---|---|---|---|
<%= table_for @things, defer: true, paginate: @pager, id: "preview_table", row_id: ->(thing) { "deferred_thing_#{thing.id}" } do |table| %>
<% table.column "Name", :name, width: "34%" %>
<% table.column "Role", :role, width: "26%" %>
<% table.column "Score", :score, numeric: true, width: "20%" %>
<% table.column "Right", :score, align: :right, width: "20%" %>
<% end %>Deferred, with skeleton shapes
Each column declares its skeleton: — :item, :badge, :icon, or a lambda given the skeleton builder — so the skeleton rows are the height and shape of the rows that replace them.
| Name | Role | Status | Skills | |
|---|---|---|---|---|
<%= table_for @things, defer: true, paginate: false, id: "people_table", columns: "unmagic/components/browser/examples/table/people_columns" %>| Metric | Value |
|---|---|
| Requests | 1,204 |
| Errors | 3 |
<%= table_tag [ "Metric", "Value" ],
[ [ "Requests", { content: "1,204", class: "is-right is-numeric" } ],
[ "Errors", { content: "3", class: "is-right is-numeric" } ] ],
widths: [ "70%", "30%" ] %>