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

Summary

Javascript Enhanced

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

Sticky Left Column

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12	Column 13	Column 14	Column 15
Value 1	Value 2	Value 3	Value 4	Value 5	Value 6	Value 7	Value 8	Value 9	Value 10	Value 11	Value 12	Value 13	Value 14	Value 15
Value 1	Value 2	Value 3	Value 4	Value 5	Value 6	Value 7	Value 8	Value 9	Value 10	Value 11	Value 12	Value 13	Value 14	Value 15
Value 1	Value 2	Value 3	Value 4	Value 5	Value 6	Value 7	Value 8	Value 9	Value 10	Value 11	Value 12	Value 13	Value 14	Value 15

The stickyLeftColumn prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the <th> and <td>.

<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
  <thead>
    <tr>
      <th id="1">Column 1</th>
      <th id="2">Column 2</th>
      <th id="3">Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
      <th>Column 11</th>
      <th>Column 12</th>
      <th>Column 13</th>
      <th>Column 14</th>
      <th>Column 15</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="1">Value 1</td>
      <td id="2">Value 2</td>
      <td id="3">Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
      <td>Value 6</td>
      <td>Value 7</td>
      <td>Value 8</td>
      <td>Value 9</td>
      <td>Value 10</td>
      <td>Value 11</td>
      <td>Value 12</td>
      <td>Value 13</td>
      <td>Value 14</td>
      <td>Value 15</td>

    </tr>
    <tr>
      <td id="1">Value 1</td>
      <td id="2">Value 2</td>
      <td id="3">Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
      <td>Value 6</td>
      <td>Value 7</td>
      <td>Value 8</td>
      <td>Value 9</td>
      <td>Value 10</td>
      <td>Value 11</td>
      <td>Value 12</td>
      <td>Value 13</td>
      <td>Value 14</td>
      <td>Value 15</td>

    </tr>
    <tr>
      <td id="1">Value 1</td>
      <td id="2">Value 2</td>
      <td id="3">Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
      <td>Value 6</td>
      <td>Value 7</td>
      <td>Value 8</td>
      <td>Value 9</td>
      <td>Value 10</td>
      <td>Value 11</td>
      <td>Value 12</td>
      <td>Value 13</td>
      <td>Value 14</td>
      <td>Value 15</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

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

Cell 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

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

Row Shift

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

Cell Shift

	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: "&nbsp;" }) %>
      <%= 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 %>

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

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

Table with Sub Components (Table Elements)

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

Table with Sub Components (Divs)

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

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

Outer Padding

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

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	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 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
truncate	array	1 2 3 4 5
left	array	0 xxs xs sm md lg xl auto initial inherit
top	array	0 xxs xs sm md lg xl auto initial inherit
right	array	0 xxs xs sm md lg xl auto initial inherit
bottom	array	0 xxs xs sm md lg xl auto initial inherit
vertical_align	array	baseline super top middle bottom sub text-top text-bottom
height	array	auto xs sm md lg xl xxl xxxl
min_height	array	auto xs sm md lg xl xxl xxxl
max_height	array	auto xs sm md lg xl xxl xxxl
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
group_hover	boolean
id	string
data	hashprop
aria	hashprop
html_options	hashprop
children	proc
style	hashprop

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
sticky_left_column	array
vertical_border	boolean		false
striped	boolean		false
tag	enum	table div	table
outer_padding	enum	none xxs xs sm md lg xl

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

min_width

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

truncate

left

top

right

bottom

vertical_align

height

min_height

max_height

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

group_hover

id

data

aria

html_options

children

style

size

single_line

disable_hover

data_table

container

responsive

collapse

text

sticky