Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.
Table can leverage the max-width property. Learn more in our visual guidelines.
<%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
Use table size "md" to add padding around each row to increase reading comfortability.
<%= pb_rails("table", props: { size: "md" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
Use table size "lg" to add padding around each row to maximize reading comfortability.
<%= pb_rails("table", props: { size: "lg"} ) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
React: Use sticky on a table to allow the table header to be fixed in place when the user scrolls up and down on the page.
Rails: Pass sticky: true to props.
If the table header is not sticking in the right place you will need to pass a inline top style to the thead.
React Example: <thead style={{ top: "-16px" }}>
Rails Example: <thead style="top: -16px">
Sticky may not work if any parent/ancestor of the sticky element has any of the overflow properties set. Additionally, specifying a height on the overflowing container provides measurement for this feature to work properly. In some cases, it may be necessary to set the same parent/ancestor container to position: static as well.
<%= pb_rails("table", props: { sticky: true }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
|
Territory
|
Full Name
|
Age
|
Job Title | |
|---|---|---|---|---|
| North | John | Doe | 30 | Engineer |
| South | Alice | Smith | 28 | Designer |
| East | Mike | Johnson | 35 | Manager |
| West | Sarah | Brown | 29 | Developer |
| Central | David | Wilson | 32 | Analyst |
The table_header subcomponent creates <th> elements and optionally accepts:
colspan (number) for setting column spansort_menu accepts sort options as an array of item objects.
presence of sort_menu enables the sort link within the headersort_dropdown (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
colspan will render sort options within a dropdown by default, without requiring sort_dropdown explicitly. Alternatively, the default sort dropdown can be prevented on headers with colspan by setting sort_dropdown: false, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)id (string) is required for headers that have a dropdown (for popover reference); otherwise they are optionalThis example uses a custom sort method that may need to be modified or replaced within your project.
<%# Example data for demonstration purposes %> <% data_rows = [ { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' }, { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' }, { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' }, { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' }, { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' } ] %> <%# Example sort method for demonstration purposes %> <% if params["sort"] %> <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %> <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %> <% data_rows.sort! do |a, b| value_a = a[sort_param] value_b = b[sort_param] value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/) value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/) sort_direction * (value_a <=> value_b) end %> <% end %> <%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %> <thead> <tr> <%= pb_rails("table/table_header", props: { text: "Territory", id: "territory", sort_menu: [ { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" }, { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" } ], }) %> <%= pb_rails("table/table_header", props: { id: "name", text: "Full Name", colspan: 2, sort_menu: [ { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" }, { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" }, { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" }, { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" } ], }) %> <%= pb_rails("table/table_header", props: { text: "Age", id: "age", sort_menu: [ { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" }, { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" } ], }) %> <%= pb_rails("table/table_header", props: { text: "Job Title" }) %> </tr> </thead> <tbody> <% data_rows.each do |row| %> <tr> <% row.each do |key, value| %> <%= pb_rails("background", props: { background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"), text_align: (value.is_a?(Integer) ? "right" : ""), tag: "td" }) do %> <%= value %> <% end %> <% end %> </tr> <% end %> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
Pass our text_align global prop to any table/table_row subcomponent to change the text alignment of all cells within that row.
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.
<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Column 1"}) %> <%= pb_rails("table/table_header", props: { text: "Column 2"}) %> <%= pb_rails("table/table_header", props: { text: "Column 3"}) %> <%= pb_rails("table/table_header", props: { text: "Column 4"}) %> <%= pb_rails("table/table_header", props: { text: "Column 5"}) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> <%= pb_rails("table/table_row", props: { text_align: "center" }) do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> <%= pb_rails("table/table_row", props: { text_align: "right" }) do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> <% end %> <% end %>
| Column 1 | Column 2 | Column 3 | Rating | Money |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | 3 | $57.32 |
| Value 1 | Value 2 | Value 3 | 2 | $5,657.08 |
| Value 1 | Value 2 | Value 3 | 4 | $358.77 |
Pass our text_align global prop to any table/table_cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.
<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Column 1"}) %> <%= pb_rails("table/table_header", props: { text: "Column 2"}) %> <%= pb_rails("table/table_header", props: { text: "Column 3"}) %> <%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center" }) %> <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %> <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %> <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "4", text_align: "center" }) %> <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %> <% end %> <% end %> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
|
Value 1a
Value 1a Value 1a | Value 2a | Value 3a | Value 4a | Value 5a |
|
Value 1b
Value 1b Value 1b | Value 2b | Value 3b | Value 4b | Value 5b |
|
Value 1c
Value 1c Value 1c | Value 2c | Value 3c | Value 4c | Value 5c |
Pass our vertical_align global prop to any table/table_row subcomponent to change the vertical alignment of all cells within that row.
<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Column 1" }) %> <%= pb_rails("table/table_header", props: { text: "Column 2" }) %> <%= pb_rails("table/table_header", props: { text: "Column 3" }) %> <%= pb_rails("table/table_header", props: { text: "Column 4" }) %> <%= pb_rails("table/table_header", props: { text: "Column 5" }) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell") do %> Value 1a <br /> Value 1a <br /> Value 1a <% end %> <%= pb_rails("table/table_cell", props: { text: "Value 2a" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 3a" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 4a" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 5a" }) %> <% end %> <%= pb_rails("table/table_row", props: { vertical_align: "middle" }) do %> <%= pb_rails("table/table_cell") do %> Value 1b <br /> Value 1b <br /> Value 1b <% end %> <%= pb_rails("table/table_cell", props: { text: "Value 2b" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 3b" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 4b" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 5b" }) %> <% end %> <%= pb_rails("table/table_row", props: { vertical_align: "bottom" }) do %> <%= pb_rails("table/table_cell") do %> Value 1c <br /> Value 1c <br /> Value 1c <% end %> <%= pb_rails("table/table_cell", props: { text: "Value 2c" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 3c" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 4c" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 5c" }) %> <% end %> <% end %> <% end %>
| | Price |
|---|---|
| Total |
$12 $46 $25 ------- $83 |
| Espresso Drinks | Ingredients |
|---|---|
| Cappuccino |
Espresso Steamed Milk Milk Foam |
| Macchiato |
Espresso Steamed Milk |
| Mocha |
Espresso Hot Chocolate Steamed Milk |
Pass our vertical_align global prop to any table/table_cell subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.
<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: " " }) %> <%= pb_rails("table/table_header", props: { text: "Price" }) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Total", vertical_align: "bottom" }) %> <%= pb_rails("table/table_cell") do %> $12<br/> $46<br/> $25<br/> -------<br/> $83 <% end %> <% end %> <% end %> <% end %> <br/> <%= pb_rails("table", props: { size: "sm" }) do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Espresso Drinks" }) %> <%= pb_rails("table/table_header", props: { text: "Ingredients" }) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Cappuccino", vertical_align: "top" }) %> <%= pb_rails("table/table_cell") do %> Espresso<br/> Steamed Milk<br/> Milk Foam <% end %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Macchiato", vertical_align: "top" }) %> <%= pb_rails("table/table_cell") do %> Espresso<br/> Steamed Milk <% end %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Mocha", vertical_align: "top" }) %> <%= pb_rails("table/table_cell") do %> Espresso<br/> Hot Chocolate<br/> Steamed Milk <% end %> <% end %> <% end %> <% end %>
| Product Colors | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Product 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Product 2 | Value 2 | Value 3 | Value 4 | Value 5 |
| Product 3 | Value 2 | Value 3 | Value 4 | Value 5 |
| None | Value 2 | Value 3 | Value 4 | Value 5 |
| Status Colors | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Success | Value 2 | Value 3 | Value 4 | Value 5 |
| Warning | Value 2 | Value 3 | Value 4 | Value 5 |
| Error | Value 2 | Value 3 | Value 4 | Value 5 |
| None | Value 2 | Value 3 | Value 4 | Value 5 |
| Cateogry Colors | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Category Color 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Category Color 2 | Value 2 | Value 3 | Value 4 | Value 5 |
| Category Color 3 | Value 2 | Value 3 | Value 4 | Value 5 |
| None | Value 2 | Value 3 | Value 4 | Value 5 |
Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.
Note: Only use category colors for categories. Do not mix it with product or status colors.
<%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Product Colors</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <%= pb_rails("table/table_row", props: { side_highlight_color: "product_1_highlight" }) do %> <td>Product 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "product_2_highlight" }) do %> <td>Product 2</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "product_3_highlight" }) do %> <td>Product 3</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "none" }) do %> <td>None</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> </tbody> <% end %> <br/> <%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Status Colors</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <%= pb_rails("table/table_row", props: { side_highlight_color: "success" }) do %> <td>Success</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "warning" }) do %> <td>Warning</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "error" }) do %> <td>Error</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "none" }) do %> <td>None</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> </tbody> <% end %> <br/> <%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Cateogry Colors</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <%= pb_rails("table/table_row", props: { side_highlight_color: "category_1" }) do %> <td>Category Color 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "category_2" }) do %> <td>Category Color 2</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "category_3" }) do %> <td>Category Color 3</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> <%= pb_rails("table/table_row", props: { side_highlight_color: "none" }) do %> <td>None</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> <% end %> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", container: false}) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", disable_hover: true }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md"}) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
| Value 1 Value 1 Value 1 |
Value 2 | Value 3 Value 3 |
Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "md", single_line: true }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1<br/>Value 1<br/>Value 1</td> <td>Value 2</td> <td>Value 3<br/>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
Tighter spacing in first- and last-child cells of each row for data-heavy tables.
<%= pb_rails("table", props: { data_table: true }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("title", props: { size: 4, text: "Not Responsive" }) %> <%= pb_rails("table", props: { responsive: "none" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %> <br> <%= pb_rails("title", props: { size: 4, text: "Collapse Mobile" }) %> <%= pb_rails("table", props: { collapse: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %> <br> <%= pb_rails("title", props: { size: 4, text: "Collapse Tablet" }) %> <%= pb_rails("table", props: { collapse: "md" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %> <br> <%= pb_rails("title", props: { size: 4, text: "Collapse Desktop" }) %> <%= pb_rails("table", props: { collapse: "lg" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 |
If there is one button on each row of the table, ideally, it should use the secondary variant and be placed at the end of the row
<%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th></th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 |
If there are two actions on each of the row, one should ideally one should use the secondary variant and the other use the link variant. The button using the secondary variant should be placed at the end.
<%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th></th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"> <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %> <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %> </td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"> <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %> <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %> </td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"> <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %> <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %> </td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 | |
If there are more than two actions on each row, then they should be contained in secondary circle icon button with the ellipsis-h icon (horizontal ellipsis) at the end of the row
<%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th></th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 4 | Value 5 | |
| Value 1 | Value 2 | Value 4 | Value 5 | |
| Value 1 | Value 2 | Value 4 | Value 5 |
If the button is towards the middle of the table, it should likely use button variant link
<%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 |
|
| Value 1 | Value 2 | Value 3 | Value 4 |
|
| Value 1 | Value 2 | Value 3 | Value 4 |
|
Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon
<%= pb_rails("table", props: { size: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th></th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td> <%= pb_rails("flex", props: { justify: "end" }) do %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %> <% end %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %> <% end %> <% end %> </td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td> <%= pb_rails("flex", props: { justify: "end" }) do %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %> <% end %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %> <% end %> <% end %> </td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"> <%= pb_rails("flex", props: { justify: "end" }) do %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %> <% end %> <%= pb_rails("body", props: {classname: "flex-item"}) do %> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %> <% end %> <% end %> </td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> <%= pb_rails("background", props: { background_color: "error_subtle", tag: "tr" }) do %> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <% end %> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "tr" }) do %> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <% end %> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> </tbody> <% end %> <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %> <colgroup> <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %> <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %> <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %> </colgroup> <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <% end %> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
<%= pb_rails("table", props: { size: "sm", vertical_border: true }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
Optionally pass the striped (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.
<%= pb_rails("table", props: { size: "sm", striped: true }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td>Value 5</td> </tr> </tbody> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
| Value 1 | Value 2 | Value 3 | Value 4 | Value 5 |
You can optionally build your table using our sub-components, which map to their respective html table elements:
table_head = thead
table_body = tbody
table_row = tr
table_header = th
table_cell = td
<%= pb_rails("table", props: { size: "sm" }) do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Column 1"}) %> <%= pb_rails("table/table_header", props: { text: "Column 2"}) %> <%= pb_rails("table/table_header", props: { text: "Column 3"}) %> <%= pb_rails("table/table_header", props: { text: "Column 4"}) %> <%= pb_rails("table/table_header", props: { text: "Column 5"}) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> <% end %> <% end %>
Optionally build your table with divs by passing div to the tag prop of all* your sub-components.
*NOTE: The tag prop defaults to table, which returns html elements. If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use div as their tag in order for the table to render properly.
<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %> <%= pb_rails("table/table_head", props: {tag:"div"}) do %> <%= pb_rails("table/table_row", props: {tag:"div"}) do %> <%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %> <% end %> <% end %> <%= pb_rails("table/table_body", props: {tag:"div"}) do %> <%= pb_rails("table/table_row", props: {tag:"div"}) do %> <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %> <% end %> <%= pb_rails("table/table_row", props: {tag:"div"}) do %> <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %> <% end %> <%= pb_rails("table/table_row", props: {tag:"div"}) do %> <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %> <% end %> <% end %> <% end %>
| Column 1 | Column 2 | Column 3 | Column 4 | |
|---|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 | |
| Value 1 | Value 2 | Value 3 | Value 4 |
Pass any of our spacing tokens to the outerPadding / outer_padding prop to customize a table's outer padding (both the left padding of the first column and the right padding of the last column).
<%= pb_rails("table", props: { outer_padding: "sm", size: "sm" }) do %> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th></th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td> </tr> </tbody> <% end %>
| Props | Type | Values |
|---|---|---|
max_width |
array
|
0%
xs
sm
md
lg
xl
xxl
0
none
100%
|
min_width |
array
|
0%
xs
sm
md
lg
xl
xxl
0
none
100%
|
width |
array
|
0%
xs
sm
md
lg
xl
xxl
0
none
100%
|
z_index |
array
|
1
2
3
4
5
6
7
8
9
10
|
number_spacing |
array
|
tabular
|
shadow |
array
|
none
deep
deeper
deepest
|
line_height |
array
|
tightest
tighter
tight
normal
loose
looser
loosest
|
display |
array
|
block
inline_block
inline
flex
inline_flex
none
|
cursor |
array
|
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
|