Data Visualization




Table

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 on our Max Width Global Props page.

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.

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.

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.

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 data-sticky-ids you want to be sticky. Make sure to add the corresponding data-sticky-id to the <th> and <td>.

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

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 data-sticky-ids you want to be sticky. Make sure to add the corresponding data-sticky-id to the <th> and <td>.

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

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 data-sticky-ids are used for all columns across multiple tables. Using the same columns data-sticky-ids on multiple tables can lead to issues when using props.

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.

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.

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.

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.

Cell Shift

&nbsp; 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.

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.

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

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

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

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

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.

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

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

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.

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

Table with Actions in the Middle

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

If the button is towards the middle of the table, it should likely use button variant link

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

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

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

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.

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

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.

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

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.

Table with Dynamic 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.

Follow this example to make the icons dynamic following the state of the collapsible.

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.

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

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

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.

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.

Table with Selectable Rows

Column 1 Column 2 Column 3 Column 4 Column 5
picture of a misty forest Value 2 Value 3 Value 4 Value 5
picture of a misty forest Value 2 Value 3 Value 4 Value 5
picture of a misty forest Value 2 Value 3 Value 4 Value 5

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

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.

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

Variant with Filter

Table Title Here

No Filter Selected
9 Results
Territory ID Name Title Department Branch Start Date
1 Jennifer Associate Scrum Master Business Technology Philadelphia
Dec 31, 2024
2 Nick UX Engineer II Business Technology Philadelphia
Jan 1, 2025
3 Nida Senior UX Engineer Business Technology Philadelphia
Jan 2, 2025
4 Justin Director of User Experience Engineering Business Technology Philadelphia
Jan 3, 2025
5 Edward UX Designer II Business Technology Philadelphia
Jan 4, 2025
6 Elisa UX Engineer Business Technology Philadelphia
Jan 5, 2025
7 Gary UX Engineer Business Technology Philadelphia
Jan 6, 2025
8 Barkley Nitro Quality Ninja Business Technology Philadelphia
Jan 7, 2025
9 Aaron Associate Nitro Quality Ninja Business Technology Philadelphia
Jan 8, 2025

Set the variant prop to with_filter to render a Table with a filter. The variant automatically handles:

  • Card wrapper with standard responsive margins
  • Optional title prop to render title above the card
  • Filter component rendering with Design defaults
  • SectionSeparator between filter and table
  • Flex layout for proper alignment

Required Props

  • variant: "with_filter": Enables the filter variant
  • filter_content: The filter's body content (inputs, buttons, etc.) built with pb_rails string concatenation
  • filter_props: A hash containing Filter-specific props like results, sort_menu, etc.

Optional Props

  • title: Displays a title above the card
  • All standard Table props (size, collapse, etc.) can be used, but defaults are already set to match Design guidelines

Default Filter Props

The Table kit automatically sets these Filter defaults (which you can override via filter_props):

  • background: false
  • max_height: "50vh"
  • min_width: "xs"
  • popover_props: { width: "350px" }

Alternatively, you can pass pre-rendered filter markup via the filter prop (e.g. for manual submission or custom filter helpers)—scroll down for that approach.

IMPORTANT NOTE:
The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.

If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrated in our Table Filter Card Building Block as seen here.

Variant with Filter (External Filter)

Table with External Filter

No Filter Selected
3 Results
Name Role
Alex Engineer
Sam Designer
Jordan Manager

Use the "with_filter" variant with an external filter (Option B): pass pre-rendered filter markup via the filter prop. Same layout as Variant with Filter (card, title, separator, flex); only the filter slot is supplied by you. Use this when you need:

  • Manual filter submission – Apply / Filter button instead of automatic application
  • Full control – Over filter props, template, sort menu, and submission
  • Custom or app-specific filter helpers – Any helper that returns filter markup (e.g. search/filter forms)

Required props

  • variant: "with_filter"
  • filter – Pre-rendered filter HTML (e.g. from capture { ... })

When filter is present, filter_content and filter_props are ignored.

How to do it

  1. Render your filter (e.g. pb_rails("filter", ...) or any helper that returns filter markup).
  2. Capture the output with capture do ... end.
  3. Pass it to the Table as the filter prop.

Example (generic pattern):

<% filter_output = capture do %>
  <%= pb_rails("filter", props: { template: "single", results: 10, background: false }) do %>
    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
    <%= pb_rails("button", props: { text: "Apply" }) %>
  <% end %>
<% end %>

<%= pb_rails("table", props: {
  variant: "with_filter",
  title: "My Table",
  filter: filter_output,
}) do %>
  <%# table_head / table_body ... %>
<% end %>

For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.

Variant with Filter and Pagination

Table Title Here

No Filter Selected
26 Results
  • 1
  • 3
  • 4
  • 5
    • Territory ID Name Title Department Branch Start Date
    1 Jennifer Associate Scrum Master Business Technology Philadelphia
    Dec 31, 2024
    2 Nick UX Engineer II Business Technology Philadelphia
    Jan 1, 2025
    3 Nida Senior UX Engineer Business Technology Philadelphia
    Jan 2, 2025
    4 Justin Director of User Experience Engineering Business Technology Philadelphia
    Jan 3, 2025
    5 Edward UX Designer II Business Technology Philadelphia
    Jan 4, 2025
    6 Elisa UX Engineer Business Technology Philadelphia
    Jan 5, 2025
    7 Gary UX Engineer Business Technology Philadelphia
    Jan 6, 2025
    8 Barkley Nitro Quality Ninja Business Technology Philadelphia
    Jan 7, 2025
    9 Aaron Associate Nitro Quality Ninja Business Technology Philadelphia
    Jan 8, 2025
    10 Sarah Senior Product Manager Business Technology New York
    Jan 9, 2025
    11 Michael Software Engineer III Business Technology Austin
    Jan 10, 2025
    12 Emma Data Analyst II Customer Development Philadelphia
    Jan 11, 2025
    13 David QA Engineer Business Technology New York
    Jan 12, 2025
    14 Lisa UX Researcher Business Technology Philadelphia
    Jan 13, 2025
    15 James DevOps Engineer Business Technology Austin
    Jan 14, 2025
    16 Anna Product Designer Business Technology Philadelphia
    Jan 15, 2025
    17 Robert Backend Engineer Business Technology New York
    Jan 16, 2025
    18 Maria Frontend Developer Business Technology Austin
    Jan 17, 2025
    19 William Tech Lead Business Technology Philadelphia
    Jan 18, 2025
    20 Jessica Scrum Master Business Technology New York
    Jan 19, 2025
    21 Daniel Software Architect Business Technology Austin
    Jan 20, 2025
    22 Laura Business Analyst Customer Development Philadelphia
    Jan 21, 2025
    23 Chris Security Engineer Business Technology New York
    Jan 22, 2025
    24 Ashley UX Engineer III Business Technology Austin
    Jan 23, 2025
    25 Kevin Platform Engineer Business Technology Philadelphia
    Jan 24, 2025
    26 Michelle Content Designer Business Technology New York
    Jan 25, 2025
  • 1
  • 3
  • 4
  • 5

    • The with_filter variant can also be used with the Pagination kit as shown here. Simply set up your Pagination as normal, and pass the Pagination kit to the prop pagination as shown.

    IMPORTANT NOTE: This is NOT a working example of pagination, please set up your use case with the relevant data in your controller. For more information on the Pagination Kit and how to use it, see the documentation here

    Variant with Filter (with Card and Title Props)

    Table Title Here

    No Filter Selected
    9 Results
    Territory ID Name Title Department Branch Start Date
    1 Jennifer Associate Scrum Master Business Technology Philadelphia
    Dec 31, 2024
    2 Nick UX Engineer II Business Technology Philadelphia
    Jan 1, 2025
    3 Nida Senior UX Engineer Business Technology Philadelphia
    Jan 2, 2025
    4 Justin Director of User Experience Engineering Business Technology Philadelphia
    Jan 3, 2025
    5 Edward UX Designer II Business Technology Philadelphia
    Jan 4, 2025
    6 Elisa UX Engineer Business Technology Philadelphia
    Jan 5, 2025
    7 Gary UX Engineer Business Technology Philadelphia
    Jan 6, 2025
    8 Barkley Nitro Quality Ninja Business Technology Philadelphia
    Jan 7, 2025
    9 Aaron Associate Nitro Quality Ninja Business Technology Philadelphia
    Jan 8, 2025

    The with_filter variant also offers 2 additional optional props:

    card_props: An object containing Card-specific props.
    title_props: An object containing Title-specific props.

    Default Card Props

    The Table kit automatically sets these Card defaults (which you can override via card_props):

    • padding:"none"

    Default Title Props

    The Table kit automatically sets these Title defaults (which you can override via title_props):

    • size:3
    • paddingY:"md"

    List

    Default

    • List Item
    • List Item
    • List Item
    • List Item
    • List Item

    Large

    • List Item
    • List Item
    • List Item
    • List Item
    • List Item

    Ordered

    1. List Item
    2. List Item
    3. List Item
    4. List Item
    5. List Item

    Borderless

    • List Item
    • List Item
    • List Item
    • List Item
    • List Item

    Horizontal Padding

    • List Item
    • List Item
    • List Item
    • List Item
    • List Item

    Layout Left

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    Layout Right

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    • Label

      Caption
      $

      2,000

      .50

    Filter

    Default

    name

    John Wick

    city

    San Francisco

    Results:

    1
    sort by:
    No Filter Selected

    Results:

    0
    sort by:

    To display the "No Filters Selected" text, the filters prop must be null. As a suggestion, check the values of each key in your filters object. If they are all falsy, return null.

    No Background

    name

    John Wick

    city

    Las Vegas

    3 Results
    name

    John Wick

    city

    Las Vegas

    Results:

    3
    sort by:

    To remove the background from a filter, add the prop background with a value of false.

    Single

    name

    John Wick

    546 Results

    No Sort

    name

    John Wick

    546 Results

    To display results, use templates single or default.

    Filter Only

    name

    John Wick


    Sort Only


    Max Width for Popover Inside of Filter

    name

    John Wick

    city

    San Francisco

    Results:

    1
    sort by:

    Filter can leverage the max-width property. Learn more in our visual guidelines.

    Max Height for Popover Inside of Filter

    name

    John Wick

    city

    San Francisco

    Results:

    1
    sort by:

    Filter Placement

    name

    John Wick


    Click the filter button above to toggle the popover.

    To change the filter's popover position, use the placement prop with one of the positions:
    "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"

    Popover Props

    name

    John Wick

    city

    San Francisco

    Results:

    1
    sort by:

    This kit uses the Popover kit under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional popover_props prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see here.

    Within Turbo Frames

    name

    John Wick

    city

    San Francisco

    Results:

    1
    sort by:

    By default, the filter popover attaches to the <body>. To attach it elsewhere, like inside a Turbo Frame, pass the append_to prop through popover_props. Set it to "parent" to place the tooltip inside its parent element, or pass any CSS selector (#id or .class) to specify a custom container.

    Distribution Bar

    Default




    Custom Colors


    You can customize the order of the colors you would like to use by using the colors prop. Only the data and status colors will work for Playbook charts. See the design page for reference.

    Legend

    Default

    Windows
    Doors
    Roofing
    Siding
    Solar
    Gutters
    Insulation
    Other

    With Prefix Text

    10 Windows

    Colors

    Data 8
    Warning
    Product 6 (highlight)
    Category 7

    By default legend kit uses data_1 color.
    Pass the color prop and use any desired value from $data_colors, $status_colors, $product_colors and $category_colors list.

    Custom Colors

    Custom Legend Color 1
    Custom Legend Color 2
    Custom Legend Color 3

    The color prop also allows for use of custom colors passed in as HEX codes.

    PB Gauge Chart

    Default


    In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

    Disable Animation


    With Title


    With Units


    Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

    Full Circle


    With Min and Max Labels


    By default, Highcharts set min to 0 and max to 100 but this can be customized if needed as shown here.

    Sizing


    The Gauge chart resizes dynamically to fit whatever element it's placed within.

    Note: set overflow to hidden on the parent element when nesting gauges inside of flex items to best respond to shrinking screens.

    Height


    Custom Color


    Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.

    For React, pass the option plotOptions.solidgauge.borderColor with a Playbook token like colors. + data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8. HEX colors are also available eg: #CA0095

    For Rails, the option plotOptions.solidgauge.borderColor can only be used with HEX values as shown.

    Complex Example

    Abandoned Calls

    Total Abandoned

    39

    calls

    of 390
    % Abandoned

    We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

    PB Bar Graph

    Default


    In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

    Legend


    Legend Position

    align | verticalAlign

    layout

    x | y


    Highcharts provides many options for customizing the legend display. This example showcases the following:

    align can be used to align the legend left, right or center (defaults to center)

    verticalAlign can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom

    layout determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.

    x offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)

    y offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

    Height




    By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.

    Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

    Spline


    A spline can be added by including a separate chart data with the type: 'spline' attribute.
    A color can also be specified for the spline.

    Color Overrides


    Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values.

    Stacked


    Negative Numbers


    Secondary Y-Axis


    Horizontal Bar Graph


    PB Circle Chart

    Default


    In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

    Rounded Corners


    Accepts Any Block

    83

    Color Overrides


    Custom data colors allow for color customization to match the needs of business requirements.

    For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables.

    For Rails, only HEX colors can be used eg: #CA0095

    Data with Labels


    Data with Legend


    Legend Position

    align | verticalAlign

    layout

    x | y


    Layout options from Highcharts:

    align Type: String | Values: left | center | right (defaults to center)
    verticalAlign Type: String | Values: top | middle | bottom (defaults to bottom)
    layout Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
    x Type: Number (defaults to 0)
    y Type: Number (defaults to 0)

    layout determines the position of the legend items
    layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.

    x offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right

    y offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

    With Title


    Inner Circle Size Options


    Tooltip Customization


    Tooltip options from Highcharts:

    headerFormat Type: String | when set to null will disable the header.
    pointFormat Type: String | defines the HTML template for each data point and supports custom HTML when useHTML is enabled.
    useHTML Type: boolean (default false) | enables HTML rendering in tooltips.
    {point.name} and {point.y} are useful values that can be referenced for each point in the graph.

    PB Line Graph

    Default


    In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

    Legend


    Legend Position

    align | verticalAlign

    layout

    x | y


    Highcharts provides many options for customizing the legend display. This example showcases the following:

    align can be used to align the legend left, right or center (defaults to center)

    verticalAlign can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom

    layout determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.

    x offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)

    y offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

    Legend NonClickable


    Height


    By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.

    Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

    Color Overrides


    Custom data colors allow for color customization to match the needs of business requirements.

    For React, import 'colors' from Playbook, then set custom colors in the colors array using the desired color variables. Hex colors are also available.

    For Rails, HEX values are required.

    Contribute to Playbook

    When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.
    Contribute on GitHub
    Power Logo
    As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

    Power

    Tech @ Power
    Open Positions
    About Power

    Connect

    Github
    Connect Chat
    © 2026-27, ALL RIGHTS RESERVED