Table

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).

See this kit in action in our sample UI

Small

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 %>

Medium

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 %>

Large

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 %>

Sticky Header

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">

Troubleshooting CSS Problems

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 %>

Table Header

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 span
sort_menu accepts sort options as an array of item objects. presence of sort_menu enables the sort link within the header
sort_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
- passing a valid 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 optional

Disclaimer

This 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 %>

Row Alignment

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

This is to be used to shift the whole 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 %>
  <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 align="center">
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr align="right">
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>

Column Alignment

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

You can individually align a piece of table data, but a more practical use would be applied to align a column.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

<%= pb_rails("table") do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th align="center">Rating</th>
      <th align="right">Money</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td align="center">3</td>
      <td align="right">$57.32</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td align="center">2</td>
      <td align="right">$5,657.08</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td align="center">4</td>
      <td align="right">$358.77</td>
    </tr>
  </tbody>
<% end %>

Shift Row

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

<%= pb_rails("table") 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 1a
        <br/>
        Value 1a
        <br/>
        Value 1a
      </td>
      <td>Value 2a</td>
      <td>Value 3a</td>
      <td>Value 4a</td>
      <td>Value 5a</td>
    </tr>
    <tr shift="middle">
      <td>
        Value 1b
        <br/>
        Value 1b
        <br/>
        Value 1b
      </td>
      <td>Value 2b</td>
      <td>Value 3b</td>
      <td>Value 4b</td>
      <td>Value 5b</td>
    </tr>
    <tr shift="down">
      <td>
        Value 1c
        <br/>
        Value 1c
        <br/>
        Value 1c
      </td>
      <td>Value 2c</td>
      <td>Value 3c</td>
      <td>Value 4c</td>
      <td>Value 5c</td>
    </tr>
  </tbody>
<% end %>

Shift Column Data

	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

You can individually shift a piece of table data, or shift an entire column.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

<%= pb_rails("table") do %>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td shift="down">Total</td>
      <td>
        $12
        <br/>
        $46
        <br/>
        $25
        <br/>
        -------
        <br/>
        $83
      </td>
    </tr>
  </tbody>
<% end %>
<br/>
<%= pb_rails("table") do %>
  <thead>
    <tr>
      <th>Espresso Drinks</th>
      <th>Ingredients</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td shift="up">Cappuccino</td>
      <td>
        Espresso
        <br/>
        Steamed Milk
        <br/>
        Milk Foam
      </td>
    </tr>
    <tr>
      <td shift="up">Macchiato</td>
      <td>
        Espresso
        <br/>
        Steamed Milk
      </td>
    </tr>
    <tr>
      <td shift="up">Mocha</td>
      <td>
        Espresso
        <br/>
        Hot Chocolate
        <br/>
        Steamed Milk
      </td>
    </tr>
  </tbody>
<% end %>

Side Highlight

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 %>

Table Container Off

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 %>

Disable Hover

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 %>

Multi-line

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 %>

Force Single Line

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 %>

Data Table

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 %>

Responsive Tables

Not Responsive

Column 1	Column 2	Column 3	Column 4	Column 5
Value 1	Value 2	Value 3	Value 4	Value 5

Collapse Mobile

Column 1	Column 2	Column 3	Column 4	Column 5
Value 1	Value 2	Value 3	Value 4	Value 5

Collapse Tablet

Column 1	Column 2	Column 3	Column 4	Column 5
Value 1	Value 2	Value 3	Value 4	Value 5

Collapse Desktop

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 %>

Table with 1 Action

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 %>

Table with 2 Actions

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 %>

Table with 2+ Actions

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 %>

Table with Actions in the Middle

Column 1	Column 2	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 %>

Table with Icon Buttons

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 %>

Table With Background Kit

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 %>

Vertical Borders

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 %>

UI Samples using Table Kit

Get the full picture. See how this kit is used in our samples.

Conference Statistics

Crm Client List

Music App

Available Props

Props	Type	Values
max_width	array	xs sm md lg xl xxl 0 none
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 verticalText alias copy move noDrop notAllowed grab grabbing eResize nResize neResize nwResize sResize seResize swResize wResize ewResize nsResize neswResize nwseResize colResize rowResize allScroll zoomIn zoomOut
flex_direction	array	row column rowReverse columnReverse
flex_wrap	array	wrap nowrap wrapReverse
justify_content	array	start end center spaceBetween spaceAround spaceEvenly
justify_self	array	auto start end center stretch
align_items	array	flexStart flexEnd start end center baseline stretch
align_content	array	start end center spaceBetween spaceAround spaceEvenly
align_self	array	auto start end center stretch baseline
flex	array	auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none
flex_grow	array	1 0
flex_shrink	array	1 0
order	array	1 2 3 4 5 6 7 8 9 10 11 12
position	array	relative absolute fixed sticky
hover	array
border_radius	array	none xs sm md lg xl rounded
text_align	array	start end left right center justify justify-all match-parent
overflow	array	visible hidden scroll auto
overflow_x	array	visible hidden scroll auto
overflow_y	array	visible hidden scroll auto
margin	array	none xxs xs sm md lg xl
margin_bottom	array	none xxs xs sm md lg xl
margin_left	array	none xxs xs sm md lg xl
margin_right	array	none xxs xs sm md lg xl
margin_top	array	none xxs xs sm md lg xl
margin_x	array	none xxs xs sm md lg xl
margin_y	array	none xxs xs sm md lg xl
padding	array	none xxs xs sm md lg xl
padding_bottom	array	none xxs xs sm md lg xl
padding_left	array	none xxs xs sm md lg xl
padding_right	array	none xxs xs sm md lg xl
padding_top	array	none xxs xs sm md lg xl
padding_x	array	none xxs xs sm md lg xl
padding_y	array	none xxs xs sm md lg xl
classname	string
dark	boolean
id	string
data	hashprop
aria	hashprop
children	proc

Props	Type	Values	Default
size	enum	sm md lg	md
single_line	boolean		false
disable_hover	boolean		false
data_table	boolean		false
container	boolean		true
responsive	enum	collapse scroll none	collapse
collapse	enum	sm md lg	sm
text	string
sticky	boolean		false
vertical_border	boolean		false

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat

Table

See this kit in action in our sample UI

Troubleshooting CSS Problems

Not Responsive

Collapse Mobile

Collapse Tablet

Collapse Desktop

UI Samples using Table Kit

Conference Statistics

Crm Client List

Music App

Available Props

max_width

z_index

number_spacing

shadow

line_height

display

cursor

flex_direction

flex_wrap

justify_content

justify_self

align_items

align_content

align_self

flex

flex_grow

flex_shrink

order

position

hover

border_radius

text_align

overflow

overflow_x

overflow_y

margin

margin_bottom

margin_left

margin_right

margin_top

margin_x

margin_y

padding

padding_bottom

padding_left

padding_right

padding_top

padding_x

padding_y

classname

dark

id

data

aria

children

size

single_line

disable_hover

data_table

container

responsive

collapse

text

sticky

vertical_border

Contribute to Playbook

Power

Connect