Playbook Design System

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

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the sticky_left_column.

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

Sticky Right 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 sticky_right_column prop works in the same way as the above sticky_left_column prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the <th> and <td>.

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the sticky_right_column prop.

<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_right_column: ["13", "14", "15"] }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>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 id="13">Column 13</th>
      <th id="14">Column 14</th>
      <th id="15">Column 15</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>
      <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 id="13">Value 13</td>
      <td id="14">Value 14</td>
      <td id="15">Value 15</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>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 id="13">Value 13</td>
      <td id="14">Value 14</td>
      <td id="15">Value 15</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>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 id="13">Value 13</td>
      <td id="14">Value 14</td>
      <td id="15">Value 15</td>
    </tr>
  </tbody>
<% end %>

Sticky Left and Right Columns

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 sticky_left_column and sticky_right_column props can be used together on the same table as needed.

Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
  <thead>
    <tr>
      <th id="a">Column 1</th>
      <th>Column 2</th>
      <th>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 id="b">Column 15</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="a">Value 1</td>
      <td>Value 2</td>
      <td>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 id="b">Value 15</td>
    </tr>
    <tr>
      <td id="a">Value 1</td>
      <td>Value 2</td>
      <td>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 id="b">Value 15</td>
    </tr>
    <tr>
      <td id="a">Value 1</td>
      <td>Value 2</td>
      <td>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 id="b">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: "info_subtle", tag: "col" }) %>
    <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
  </colgroup>
  <thead>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </thead>
  <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 %>

Table with Collapsible

Column 1	Column 2	Column 3	Column 4	Column 5
Value 1	Value 2	Value 3	Value 4	Value 5
Nested content inside a Table Row
Value 1	Value 2	Value 3	Value 4	Value 5
Value 1	Value 2	Value 3	Value 4	Value 5

The collapsible prop can be used on any Table Row to add a collapsible area. Use the additional collapsible_content prop to add any content to the collapsible Row.
Please be aware that you will need to pass in an id to any table rows you want to be collapsible. Make sure every id is unique if you are using multipe collapsibles.

<% content = capture do %>
    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
    <% end %>
<% end %>

<%= 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"}) %>
          <%= pb_rails("table/table_header", props: { text: ""}) %>
       <% end %>
  <% end %>
  <%= pb_rails("table/table_body") do %>
      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) 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"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% end %>
  <% end %>
<% end %>

Table with Collapsible with Custom Click

Column 1	Column 2	Column 3	Column 4	Column 5
Value 1	Value 2	Value 3	Value 4	Value 5
Nested content inside a Table Row
Value 1	Value 2	Value 3	Value 4	Value 5
Nested content inside a Table Row
Value 1	Value 2	Value 3	Value 4	Value 5
Nested content inside a Table Row

When using the collapsible prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the toggle_cell_id prop to pass in the id of the Cell you want to use as the trigger.
NOTE: toggle_cell_id and the id on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an id to any Table Rows you want to be collapsible. Make sure every id is unique if you are using multipe collapsibles.

<% content = capture do %>
    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
    <% end %>
<% end %>

<%= 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"}) %>
        <%= pb_rails("table/table_header", props: { text: ""}) %>
       <% end %>
  <% end %>
  <%= pb_rails("table/table_body") do %>
      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) 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"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% end %>
     <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) 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"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% end %>
    <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) 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"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% end %>
  <% end %>
<% end %>

Table with Collapsible with Custom Content

Column 1	Column 2	Column 3	Column 4	Column 5
Value 1	Value 2	Value 3	Value 4	Value 5
Expanded Custom Layout
Value 1	Value 2	Value 3	Value 4	Value 5
Value 1	Value 2	Value 3	Value 4	Value 5

<% content = capture do %>
    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
        <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
        <%= pb_rails("flex", props: { justify: "between" }) do %>
            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
            <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
        <% end %>
    <% end %>
<% end %>

<%= 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"}) %>
          <%= pb_rails("table/table_header", props: { text: ""}) %>
       <% end %>
  <% end %>
  <%= pb_rails("table/table_body") do %>
      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) 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"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% end %>
  <% end %>
<% end %>

Table with Collapsible with Nested Rows

Column 1

Column 2

Column 3

Column 4

Column 5

Value 1

Value 2

Value 3

Value 4

Value 5

Expanded

Value 1

Value 2

Value 3

Value 4

Value 5

Value 1

Value 2

Value 3

Value 4

Value 5

The collapsible_content can display any content, including nested Table Rows.

Additionally, the collapsible_side_highlight can also be removed by setting it to false if needed. This prop is set to true by default.

NOTE: We advise against using the disable_hover Table prop when nesting Table Rows within a Table.

<% content = capture do %>
    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
        <%= pb_rails("background", props: { tag: "tr" }) do %>
            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
        <% end %>
    <% end %>
<% end %>

<%= 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"}) %>
          <%= pb_rails("table/table_header", props: { text: ""}) %>
       <% end %>
  <% end %>
  <%= pb_rails("table/table_body") do %>
      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) 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"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% end %>
  <% end %>
<% end %>

Table with Collapsible with Nested Table

Column 1

Column 2

Column 3

Column 4

Column 5

Value 1

Value 2

Value 3

Value 4

Value 5

Alt Header	Alt Header	Alt Header	Alt Header
Expanded	Expanded	Expanded	Pill
Expanded	Expanded	Expanded	Pill
Expanded	Expanded	Expanded	Pill

Value 1

Value 2

Value 3

Value 4

Value 5

Value 1

Value 2

Value 3

Value 4

Value 5

The collapsible_content can also be used to display nested Tables within each Row.

NOTE: We advise against using the disable_hover Table prop when nesting Tables within a Table.

<% content = capture do %>
    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
        <%= pb_rails("table/table_head") do %>
            <%= pb_rails("background", props: { tag: "tr" }) do %>
                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
            <% end %>
        <% end %>
        <%= pb_rails("table/table_body") do %>
            <%= pb_rails("table/table_row") do %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>
                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
                <% end %>
            <% end %>
            <%= pb_rails("table/table_row") do %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>
                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
                <% end %>
            <% end %>
            <%= pb_rails("table/table_row") do %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
                <%= pb_rails("table/table_cell") do %>
                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
                <% end %>
            <% end %>
        <% end %>
    <% end %>
<% end %>

<%= 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"}) %>
          <%= pb_rails("table/table_header", props: { text: ""}) %>
       <% end %>
  <% end %>
  <%= pb_rails("table/table_body") do %>
      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) 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"}) %>
          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
          <% end %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% 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"}) %>
          <%= pb_rails("table/table_cell", props: { text: ""}) %>
      <% end %>
  <% end %>
<% end %>

Table with Clickable Rows

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

Clickable table rows do not require any additional props. This doc example showcases how to set them up using html_options/htmlOptions and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

<%= 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" }) %>
        <%= pb_rails("table/table_header", props: { text: "" }) %>
      <% end %>
    <% end %>
    <%= pb_rails("table/table_body") do %>
      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) 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" }) %>
        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
        <% end %>
      <% end %>
  
      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) 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" }) %>
        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
        <% end %>
      <% end %>
  
      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) 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" }) %>
        <%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>

Table with Selectable Rows

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

Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.

<% checkboxes = [
  { name: 'Coffee', id: 'coffee', checked: false },
  { name: 'Ice Cream', id: 'ice-cream', checked: false },
  { name: 'Chocolate', id: 'chocolate', checked: true }
] %>

<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
    <%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
        <%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
    <% end %>
<% end %>

<%= pb_rails("table", props: { size: "sm" }) do %>
    <%= pb_rails("table/table_head") do %>
        <%= pb_rails("table/table_row") do %>
            <%= pb_rails("table/table_header") do %>
                <%= pb_rails("checkbox", props: {
                    checked: true,
                    value: "checkbox-value",
                    name: "main-checkbox-selectable",
                    indeterminate: true,
                    id: "checkbox-selectable"
                }) %>
            <% end %>
            <%= 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 %>
        <% checkboxes.each_with_index do |checkbox, index| %>
            <%= pb_rails("table/table_row") do %>
                <%= pb_rails("table/table_cell") do %>
                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
                <% end %>
                <%= pb_rails("table/table_cell") do %>
                    <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
                <% end %>
                <%= 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 %>
<% end %>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
        const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
        const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
        const deleteButton = document.getElementById('delete-button');

        const updateDeleteButton = () => {
            const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
            deleteButton.style.display = anyChecked ? 'block' : 'none';
        };
    
        const updateMainCheckbox = () => {
          // Count the number of checked child checkboxes
          const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
          // Determine if the main checkbox should be in an indeterminate state
          const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
          
          // Set the main checkbox states
          mainCheckbox.indeterminate = indeterminate;
          mainCheckbox.checked = checkedCount > 0;
    
          // Determine the icon class to add and remove based on the number of checked checkboxes
          const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
          const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
          
          // Add and remove the icon class to the main checkbox wrapper
          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
          mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
          
          // Toggle the visibility of the checkbox icon based on the indeterminate state
          mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
          mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);

          updateDeleteButton();
        };
    
        mainCheckbox.addEventListener('change', function() {
          childCheckboxes.forEach(cb => cb.checked = this.checked);
          updateMainCheckbox();
        });
    
        childCheckboxes.forEach(cb => {
          cb.addEventListener('change', updateMainCheckbox);
        });
    });
</script>

Header Style Borderless

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

Customize your header by removing the header borders with the header_style: "borderless" prop.

<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) 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 %>

Header Style Floating

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

Further customize your header by using the table with background kit logic to give your table header a custom background color. Use the header_style: "floating" prop to visually nest the borderless table within a card or collapsible with a matching background color (the background_color passed to Background kit should match the background or background_color for the element in which it is nested).

<%= pb_rails("card", props: { background: "light" })  do %>
    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
        <%= pb_rails("table/table_head") do %>
            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) 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 %>
<% end %>

Props	Type	Values
gap	array	none xxs xs sm md lg xl
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 grid
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
sticky_right_column	array
vertical_border	boolean		false
striped	boolean		false
tag	enum	table div	table
outer_padding	enum	none xxs xs sm md lg xl
header_style	enum	default borderless floating	default

Table

Troubleshooting CSS Problems

Not Responsive

Collapse Mobile

Collapse Tablet

Collapse Desktop

Available Props

gap

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

sticky_left_column

sticky_right_column

vertical_border

striped