Table

Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).

Summary
Javascript Enhanced
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" }

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 demonstrating in our Table Filter Card Building Block as seen here.

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



    Available Props

    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
    max

    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

    column_gap
    string

    row_gap
    string

    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

    variant
    enum
    default
    with_filter
    default

    filter_props
    hashprop

    filter_content
    string

    pagination
    string

    title
    string

    Contribute to Playbook

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

    Power

    Tech @ Power
    Open Positions
    About Power

    Connect

    Github
    Connect Chat
    © 2025-26, ALL RIGHTS RESERVED