Patternfly Logo

Examples

Basic table

This is the table caption
Repositories Branches Pull requests Workspaces Last commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Accessibility

AttributeApplied toOutcome
role="grid".pf-c-tableIdentifies the element that serves as the grid widget container. Required
aria-label.pf-c-tableProvides an accessible name for the table when a descriptive <caption> or <h*> is not available. Required in the absence of <caption> or <h*>
data-label="[td description]"<td>This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.

Usage

ClassApplied toOutcome
.pf-c-table<table>Initiates a table element. Required
.pf-c-table__caption<caption>Initiates a table caption.
.pf-m-center<th>, <td>Modifies cell to center its contents.

Sortable

Workspaces
Last commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Accessibility

AttributeApplied toOutcome
aria-sort=[ascending or descending].pf-c-table__sortIndicates if columns in a table are sorted in ascending or descending order. For each table, authors SHOULD apply aria-sort to only one header at a time. Required

Usage

ClassApplied toOutcome
.pf-c-table__sort<th>Initiates a table header sort cell. Required for sortable table columns
.pf-c-table__button<button>, <a>Initiates a table header sort cell button. If sorting a table row generates a unique URL that can be used as the href value for this element, use an <a>. Otherwise, use a <button>. Required for sortable table columns
.pf-c-table__button-content<div>Initiates a table header sort cell button content container. Required for sortable table columns Note: this is only necessary because <button> does not supportdisplay: grid.
.pf-c-table__sort-indicator.pf-c-table__sort > .pf-c-table__button > spanInitiates a sort indicator. Required for sortable table columns
.pf-m-selected.pf-c-table__sortModifies for sort selected state. Required for sortable table columns
.pf-m-help.pf-c-table__sort, .pf-c-table thModifies a sortable table header to accommodate a help tooltip. Required for sortable table columns with help tooltips
.fa-arrows-alt-v.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fasInitiates icon within unsorted, sortable table header. Required for sortable table columns
.fa-long-arrow-alt-up.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fasInitiates icon within ascending sorted and selected, sortable table header. Required for sortable table columns
.fa-long-arrow-alt-down.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fasInitiates icon within descending sorted and selected, sortable table header. Required for sortable table columns

With checkboxes and actions

Repositories Branches Pull requests Workspaces Last commit
Node 1
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago

Single select radio

Repositories Branches Pull requests Workspaces Last commit
Node 1
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago

When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a <th>, rather than a <td>. In this example, 'Node 1' and 'Node 2 siemur/test-space' are <th>s.

When header cells are empty or they contain interactive elements, <th> should be replaced with <td>.

Thead accessibility

AttributeApplied toOutcome
aria-label="[descriptive text]".pf-c-table__check inputProvides an accessible name for the checkbox or radio input. Required

Tbody accessibility

AttributeApplied toOutcome
aria-labelledby="[row_header_id]" or aria-label="[descriptive text].pf-c-table__check inputProvides an accessible name for the checkbox or radio input. Required
idrow header <th> > *Provides an accessible description for the checkbox or radio. Required if using aria-labelledby for .pf-c-table__check input

Usage

ClassApplied toOutcome
.pf-c-table__check<th>, <td>Initiates a checkbox or radio input table cell.
.pf-c-table__action<th>, <td>Initiates an action table cell.
.pf-c-table__inline-edit-action<th>, <td>Initiates an inline edit action table cell.

Expandable

10 25 Link 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 25 Link 4
Expandable row content has no padding.

Note: To apply padding to .pf-c-table__expandable-row, wrap the content in .pf-c-table__expandable-row-content. For no padding add .pf-m-no-padding to .pf-c-table__expandable-row > <td>

Accessibility

AttributeApplied toOutcome
hidden.pf-c-table__expandable-rowIndicates that the expandable content is hidden. Required
aria-expanded="true".pf-c-table__toggle > .pf-c-buttonIndicates that the row is visible. Required
aria-label="[descriptive text]".pf-c-table__toggle > .pf-c-buttonProvides an accessible name for toggle button. Required
aria-labelledby="[title_cell_id] [button_id]".pf-c-table__toggle > .pf-c-buttonProvides an accessible description for toggle button. Required
id="[button_id]".pf-c-table__toggle > .pf-c-buttonProvides a reference for toggle button description. Required
aria-controls="[id of element the button controls]".pf-c-table__toggle > .pf-c-buttonIdentifies the expanded content controlled by the toggle button. Required

Usage

ClassApplied toOutcome
.pf-c-table__toggle-icon<span>Initiates the table toggle icon wrapper.
.pf-c-table__expandable-row<tr>Initiates an expandable row.
.pf-c-table__expandable-row-content.pf-c-table__expandable-row > <td> > <div>Initiates an expandable row content wrapper.
.pf-m-expanded.pf-c-table__toggle > .pf-c-button, .pf-c-table__expandable-rowModifies for expanded state.
.pf-m-no-padding.pf-c-table__expandable-row > <td>Modifies the expandable row to have no padding.

With compound expansion

Workspaces Last commit
siemur/test-space 20 minutes Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
siemur/test-space 1 day ago Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
siemur/test-space 2 days ago Open in Github
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active
Date Status
Item one May 9, 2018 Active
Item two May 9, 2018 Warning
Item three May 9, 2018 Active
Item four May 9, 2018 Active
Item five May 9, 2018 Active

Accessibility

AttributeApplied toOutcome
hidden.pf-c-table__expandable-rowIndicates that the expandable content is hidden. Required
aria-expanded="true".pf-c-table__compound-expansion-toggle > .pf-c-buttonIndicates that the row is visible. Required
aria-controls="[id of element the button controls]".pf-c-table__compound-expansion-toggle > .pf-c-buttonIdentifies the expanded content controlled by the toggle button. Required

Usage

ClassApplied toOutcome
.pf-m-expanded<tbody>, .pf-c-table__compound-expansion-toggle > .pf-c-buttonModifies a tbody with a row and an expandable row.
.pf-c-table__compound-expansion-toggle<td>Modifies a <td> on active/focus.

Compact

Contributor Position Location Last seen Numbers Icons
Sam Jones CSS guru Not too sure May 9, 2018 0556 Action link
Amy Miller Visual design Raleigh May 9, 2018 9492 Action link
Steve Wilson Visual design lead Westford May 9, 2018 9929 Action link
Emma Jackson Interaction design Westford May 9, 2018 2217 Action link

Usage

ClassApplied toOutcome
.pf-m-compact.pf-c-tableModifies for a compact table.

Compact with no borders

Contributor Position Location Last seen Numbers Icons
Sam Jones CSS guru Not too sure May 9, 2018 0556 Action link
Amy Miller Visual design Raleigh May 9, 2018 9492 Action link
Steve Wilson Visual design lead Westford May 9, 2018 9929 Action link
Emma Jackson Interaction design Westford May 9, 2018 2217 Action link

Usage

ClassApplied toOutcome
.pf-m-no-border-rows.pf-c-table.pf-m-compactModifies to remove borders between rows. Note: Can not be used with .pf-m-expandable.

Compact expandable

Repositories Branches Pull requests

Node 1

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 2

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 3

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 4

10 25 Link
This content has no padding.

Node 5

10 25 Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage

ClassApplied toOutcome
.pf-m-expandable.pf-c-table.pf-m-compactIndicates that the table has expandable rows. Note: Can not be used with .pf-m-no-border-rows.

With width modifiers

Workspaces Last commit
Node 1
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago
10 25 5 2 days ago

Usage

ClassApplied toOutcome
.pf-m-width-[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90]<th>, <td>Percentage based modifier for th and td widths. Recommended for sortable title cell
.pf-m-width-max<th>, <td>Percentage based modifier for th and td maximum width.
.pf-m-fit-content<th>, <td>Percentage based modifier for th and td minimum width with no text wrapping.

With hidden/visible breakpoint modifiers

Repositories Branches Pull requests Workspaces Last commit
Visible only on md breakpoint 10 Hidden only on md breakpoint 5 Hidden on xs breakpoint
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Usage

ClassApplied toOutcome
.pf-m-hidden{-on-[breakpoint]}.pf-c-table tr > *Hides a table cell at a given breakpoint, or hides it at all breakpoints with .pf-m-hidden. Note: Needs to apply to all cells in the column you want to hide.
.pf-m-visible{-on-[breakpoint]}.pf-c-table tr > *Shows a table cell at a given breakpoint.

Controlling text

To better control table cell behavior, PatternFly provides a series of modifiers to help contextually control layout. By default, thead cells are set to truncate, whereas tbody cells are set to wrap. Both th and td cells use a set of shared css properties mapped to customizable css variable values. Because only the shared css variables are changed by the modifier selector and not the properties, the modifier can be applied to any parent element up until .pf-c-table itself [thead, tbody, tr, th, td, .pf-c-table__text].

ClassApplied toOutcome
.pf-m-wrapthead, tbody, tr, th, td, .pf-c-table__textSets table cell content to wrap. If applied to thead, tbody or tr, then all child cells will be affected. This is the default behavior for tbody cells.
.pf-m-truncatethead, tbody, tr, th, td, .pf-c-table__textSets text to truncate based on a minimum width and available space adjacent table cells. If applied to thead, tbody or tr, then all child cells will be affected. This is the default behavior for thead cells.
.pf-m-nowrapthead, tbody, tr, th, td, .pf-c-table__textUnsets min/max width and sets whitespace to nowrap. If applied to thead, tbody or tr, then all child cells will be affected. This is specifically beneficial for cell's whose thead th cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell's content above all other cell's contents.
.pf-m-fit-contentthead, tbody, tr, th, td, .pf-c-table__textFit column width to cell content. If applied to thead, tbody or tr, then all child cells will be affected.
.pf-m-break-wordthead, tbody, tr, th, td, .pf-c-table__textBreaks long strings wherever necessary as defined by the table layout. If applied to thead, tbody or tr, then all child cells will be affected.

Modifiers without text wrapper

Truncate (width 20%) Break word Wrapping table header text. This thtext will wrap instead of truncate. Fit content
This text will truncate instead of wrap in table layout and wrap gracefully in grid layout. http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org

By default, theadcells will truncate and tbodycells will wrap. Use .pf-m-wrapon a thto change its behavior.

This cell's content will adjust itself to the parent th width. This modifier only affects table layouts. No wrap

The table-text element

By default, truncation and wrapping settings do not affect the grid layout, but text will fallback gracefully by passively wrapping long strings. Truncation and wrapping settings will persist with the addition of a .pf-c-table__text wrapper on table cell content. In addition to .pf-c-table__text, all PatternFly layouts can be used in table cells and contain table text elements.

Table text element

This table contains .pf-c-table__text  examples. The .pf-c-table__text  element can be using alone or in a nested configuration.
Selector/element Result
th.pf-m-truncate
This table cell contains a single `.pf-c-table__text`  wrapper with the parent table cell applying `.pf-m-truncate`. The child `.pf-c-table__text`  element will inherit the modifier settings and apply to the grid layout.
.pf-l-stack
Because .pf-m-grid  applies a grid layout to .pf-c-table, child elements will stack in the grid layout. To prevent this, wrap multiple elements with a div or use a PatternFly layout.

The .pf-c-table__text element  can additionally be nested, like in this example. The next .pf-c-table__textelement has a very long url whose width needs be constrained.

This .pf-c-table__text element  applies its own built in grid layout .pf-m-stack  as well as a gutter .pf-m-gutter .

.pf-l-flex

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

.pf-l-flex
 5
 9
 2
 11

This is paragraph that we want to wrap. It doesn't need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here.

.pf-l-grid
Item 1
Item 2
Item 3
Item 4

This is paragraph that we want to wrap. It doesn't need a modifier and has no extra long strings. Any modifier available for the flex layout can be used here.

Usage

ClassApplied toOutcome
.pf-c-table__textth > *, td > *Initiates a table text element.
.pf-m-truncatethead, tbody, tr, th, td, .pf-c-table__textModifies text to truncate.
.pf-m-nowrapthead, tbody, tr, th, td, .pf-c-table__textModifies text to not wrap.
.pf-m-wrapthead, tbody, tr, th, td, .pf-c-table__textModifies text to wrap.
.pf-m-fit-contentthead, tr, th, .pf-c-table__textModifies th to fit its contents.
.pf-m-break-wordthead, tbody, tr, th, td, .pf-c-table__textModifies text strings to break.

th truncation

Repositories Branches Pull requests Workspaces Last commit
Long lines of text will shrink adjacent column widths. 10 25 5 2 days ago
This example is not responsive. Adjacent tbodycells will shrink as a result of this text being a longer string and adjacent text being shorter in length. Truncation can be overridden in thcells with the addition of .pf-m-wrap, .pf-m-nowrapor .pf-m-fit-content. 10 25 5 2 days ago

Long strings in table cells will push content. Add a width modifier to thead th to limit string length or add .pf-m-truncate to tbody td.

Width constrained

Width 40 Branches Pull requests Fit content th Last commit
Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%. 10 25 5 2 days ago
This string will truncate in table mode only. Since this is a long string of text and the other cells contain short strings (narrower than their table header), we'll need to control width this table header's width. Let's set width to 40%. 10 25 5 2 days ago
Repositories Branches Pull requests Workspaces Last commit
Repository 1 10 25 5 2 days ago
Repository 2 10 25 5 2 days ago
Repository 3 10 25 5 2 days ago
Repository 4 10 25 5 2 days ago

Usage

ClassApplied toOutcome
.pf-m-wrap<th>, <td>Modifies content to wrap.

Documentation

Overview

Because the table component is not used for layout and presents tabular data only, it requires the use of role="grid". Expandable table content (.pf-c-table__expandable-content) is placed within a singular <td> per expandable row, that can span multiple columns.

Role="grid"

Applying role="grid" to tables enhances accessible interaction while in table layout, however the responsive, css grid based layout can cause unexpected interactions. Therefore, for css grid layout, it is recommended that role="grid" be removed.

Sortable tables

Table columns may shift when expanding/collapsing. To address this, set .pf-m-fit-content, or assign a width .pf-m-width-[width] to the corresponding <th> defining the column or <td> within the column. Width values are [10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90] or max.

Table header cells

By default, all table header cells are set to white-space: nowrap. If a <th>'s content needs to wrap, apply .pf-m-wrap.

Implementation support

  • One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
  • One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
  • One action button, positioned in the last cell of a non-expandable row.
  • Tabular data.
  • Compact presentation modifier (not compatible with expandable table).

Responsive layout modifiers

ClassApplied toOutcome
.pf-m-grid-md, .pf-m-grid-lg, .pf-m-grid-xl, .pf-m-grid-2xl.pf-c-tableChanges tabular layout to responsive, grid based layout at suffixed breakpoint.
.pf-m-grid.pf-c-tableChanges tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value.
.pf-m-sticky-header.pf-c-tableMakes the table cells in <thead> sticky to the top of the table on scroll.

CSS variables

.pf-c-table--pf-global--Color--100
#151515
.pf-c-table--pf-global--Color--200
#6a6e73
.pf-c-table--pf-global--BorderColor--100
#d2d2d2
.pf-c-table--pf-global--primary-color--100
#06c
.pf-c-table--pf-global--link--Color
#06c
.pf-c-table--pf-global--link--Color--hover
#004080
.pf-c-table--pf-global--BackgroundColor--100
#fff
.pf-c-table--pf-c-table--BackgroundColor
#fff
.pf-c-table--pf-c-table--BorderColor
#d2d2d2
.pf-c-table--pf-c-table--border-width--base
1px
.pf-c-table--pf-c-table-caption--FontSize
0.875rem
.pf-c-table--pf-c-table-caption--Color
#6a6e73
.pf-c-table--pf-c-table-caption--PaddingTop
1rem
.pf-c-table--pf-c-table-caption--PaddingRight
1.5rem
.pf-c-table--pf-c-table-caption--PaddingBottom
1rem
.pf-c-table--pf-c-table-caption--PaddingLeft
1.5rem
.pf-c-table--pf-c-table-caption--xl--PaddingRight
1rem
.pf-c-table--pf-c-table-caption--xl--PaddingLeft
1rem
.pf-c-table--pf-c-table--thead--cell--FontSize
0.875rem
.pf-c-table--pf-c-table--thead--cell--FontWeight
700
.pf-c-table--pf-c-table--tbody--cell--PaddingTop
1.5rem
.pf-c-table--pf-c-table--tbody--cell--PaddingBottom
1.5rem
.pf-c-table--pf-c-table--cell--FontSize
1rem
.pf-c-table--pf-c-table--cell--FontWeight
400
.pf-c-table--pf-c-table--cell--Color
#151515
.pf-c-table--pf-c-table--cell--PaddingTop
1rem
.pf-c-table--pf-c-table--cell--PaddingRight
1rem
.pf-c-table--pf-c-table--cell--PaddingBottom
1rem
.pf-c-table--pf-c-table--cell--PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingRight
1rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingLeft
1.5rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingRight
1.5rem
.pf-c-table--pf-c-table--cell--MinWidth
0
.pf-c-table--pf-c-table--cell--MaxWidth
none
.pf-c-table--pf-c-table--cell--Width
auto
.pf-c-table--pf-c-table--cell--Overflow
visible
.pf-c-table--pf-c-table--cell--TextOverflow
clip
.pf-c-table--pf-c-table--cell--WhiteSpace
normal
.pf-c-table--pf-c-table--cell--WordBreak
normal
.pf-c-table--pf-c-table--cell--m-help--MinWidth
11ch
.pf-c-table--pf-c-table--m-truncate--cell--MaxWidth
1px
.pf-c-table--pf-c-table--m-truncate--cell--MinWidth
calc(5ch + 1rem + 1rem)
.pf-c-table--pf-c-table--cell--hidden-visible--Display
table-cell
.pf-c-table--pf-c-table__toggle--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__toggle--c-button__toggle-icon--Rotate
270deg
.pf-c-table--pf-c-table__toggle--c-button__toggle-icon--Transition
.2s ease-in 0s
.pf-c-table--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate
360deg
.pf-c-table--pf-c-table__button--BackgroundColor
transparent
.pf-c-table--pf-c-table__button--Color
#151515
.pf-c-table--pf-c-table__button--hover--Color
#151515
.pf-c-table--pf-c-table__button--focus--Color
#151515
.pf-c-table--pf-c-table__button--active--Color
#151515
.pf-c-table--pf-c-table__button--OutlineOffset
calc(3px * -1)
.pf-c-table--pf-c-table--m-compact__toggle--PaddingTop
0
.pf-c-table--pf-c-table--m-compact__toggle--PaddingBottom
0
.pf-c-table--pf-c-table__check--input--MarginTop
0.25rem
.pf-c-table--pf-c-table__check--input--FontSize
1rem
.pf-c-table--pf-c-table__action--PaddingTop
0
.pf-c-table--pf-c-table__action--PaddingRight
0
.pf-c-table--pf-c-table__action--PaddingBottom
0
.pf-c-table--pf-c-table__action--PaddingLeft
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingTop
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingRight
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingBottom
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingLeft
0
.pf-c-table--pf-c-table__expandable-row--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-table--pf-c-table__expandable-row--MaxHeight
28.125rem
.pf-c-table--pf-c-table__expandable-row-content--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-table--pf-c-table__expandable-row-content--PaddingTop
1.5rem
.pf-c-table--pf-c-table__expandable-row-content--PaddingBottom
1.5rem
.pf-c-table--pf-c-table__expandable-row--after--Top
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--Bottom
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--border-width--base
3px
.pf-c-table--pf-c-table__expandable-row--after--BorderLeftWidth
0
.pf-c-table--pf-c-table__expandable-row--after--BorderColor
#06c
.pf-c-table--pf-c-table__icon-inline--MarginRight
0.5rem
.pf-c-table--pf-c-table__sort--MinWidth
calc(6ch + 1rem + 1rem + 1rem)
.pf-c-table--pf-c-table__sort__button--PaddingTop
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingRight
0.5rem
.pf-c-table--pf-c-table__sort__button--PaddingBottom
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingLeft
0.5rem
.pf-c-table--pf-c-table__sort__button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginLeft
calc(0.5rem * -1)
.pf-c-table--pf-c-table__sort__button--Color
#151515
.pf-c-table--pf-c-table__sort--m-selected__button--Color
#06c
.pf-c-table--pf-c-table__sort--m-help--MinWidth
15ch
.pf-c-table--pf-c-table__sort-indicator--Color
#d2d2d2
.pf-c-table--pf-c-table__sort-indicator--MarginLeft
1rem
.pf-c-table--pf-c-table__sort--m-selected__sort-indicator--Color
#06c
.pf-c-table--pf-c-table__sort__button--hover__sort-indicator--Color
#151515
.pf-c-table--pf-c-table__sort__button--active__sort-indicator--Color
#151515
.pf-c-table--pf-c-table__sort__button--focus__sort-indicator--Color
#151515
.pf-c-table--pf-c-table--th--m-help--MinWidth
11ch
.pf-c-table--pf-c-table__column-help--MarginLeft
0.25rem
.pf-c-table--pf-c-table__column-help--TranslateY
0.125rem
.pf-c-table--pf-c-table__column-help--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__column-help--c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__column-help--c-button--PaddingRight
0.5rem
.pf-c-table--pf-c-table__column-help--c-button--PaddingLeft
0.5rem
.pf-c-table--pf-c-table__compound-expansion-toggle__button--Color
#06c
.pf-c-table--pf-c-table__compound-expansion-toggle__button--hover--Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--focus--Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--active--Color
#004080
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--border-width--base
1px
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderColor
#d2d2d2
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--Bottom
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--before--Left
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--border-width--base
3px
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--BorderColor
#06c
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth
0
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--Top
calc(1px * -1)
.pf-c-table--pf-c-table__compound-expansion-toggle__button--after--Left
calc(1px * -1)
.pf-c-table--pf-c-table--m-compact-th--PaddingTop
calc(0.5rem + 0.25rem)
.pf-c-table--pf-c-table--m-compact-th--PaddingBottom
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingTop
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingRight
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingBottom
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--PaddingLeft
0.5rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--PaddingLeft
1rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--PaddingRight
1rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft
1.5rem
.pf-c-table--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight
1.5rem
.pf-c-table--pf-c-table--m-compact--FontSize
0.875rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingTop
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingRight
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingBottom
1.5rem
.pf-c-table--pf-c-table--m-compact__expandable-row-content--PaddingLeft
1.5rem
.pf-c-table--pf-c-table--nested--first-last-child--PaddingRight
4rem
.pf-c-table--pf-c-table--nested--first-last-child--PaddingLeft
4rem
.pf-c-table--pf-c-table__expandable-row--m-expanded--BorderBottomColor
#d2d2d2
.pf-c-table tr > *--pf-hidden-visible--visible--Visibility
visible
.pf-c-table tr > *--pf-hidden-visible--hidden--Display
none
.pf-c-table tr > *--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-table tr > *--pf-hidden-visible--Display
table-cell
.pf-c-table tr > *--pf-hidden-visible--Visibility
visible
.pf-c-table tr > *--pf-hidden-visible--visible--Display
table-cell
.pf-c-table tr > .pf-m-hidden--pf-hidden-visible--Display
none
.pf-c-table tr > .pf-m-hidden--pf-hidden-visible--Visibility
hidden
.pf-c-table tr > *:first-child--pf-c-table--cell--PaddingLeft
1rem
.pf-c-table tr > *:last-child--pf-c-table--cell--PaddingRight
1rem
.pf-c-table tr > *.pf-m-help--pf-c-table--cell--MinWidth
11ch
.pf-c-table thead--pf-c-table--cell--FontSize
0.875rem
.pf-c-table thead--pf-c-table--cell--FontWeight
700
.pf-c-table thead--pf-c-table--cell--MinWidth
calc(5ch + 1rem + 1rem)
.pf-c-table thead--pf-c-table--cell--MaxWidth
1px
.pf-c-table thead--pf-c-table--cell--Overflow
hidden
.pf-c-table thead--pf-c-table--cell--TextOverflow
ellipsis
.pf-c-table thead--pf-c-table--cell--WhiteSpace
nowrap
.pf-c-table tbody--pf-c-table--cell--PaddingTop
1.5rem
.pf-c-table tbody--pf-c-table--cell--PaddingBottom
1.5rem
.pf-c-table .pf-m-wrap--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-m-wrap--pf-c-table--cell--MaxWidth
none
.pf-c-table .pf-m-wrap--pf-c-table--cell--Overflow
visible
.pf-c-table .pf-m-wrap--pf-c-table--cell--TextOverflow
clip
.pf-c-table .pf-m-wrap--pf-c-table--cell--WhiteSpace
normal
.pf-c-table .pf-m-nowrap--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-m-nowrap--pf-c-table--cell--MaxWidth
none
.pf-c-table .pf-m-nowrap--pf-c-table--cell--Overflow
visible
.pf-c-table .pf-m-nowrap--pf-c-table--cell--TextOverflow
clip
.pf-c-table .pf-m-nowrap--pf-c-table--cell--WhiteSpace
nowrap
.pf-c-table .pf-c-table__icon--pf-c-table--cell--MinWidth
fit-content
.pf-c-table .pf-c-table__icon--pf-c-table--cell--MaxWidth
fit-content
.pf-c-table .pf-c-table__icon--pf-c-table--cell--Width
1%
.pf-c-table .pf-c-table__icon--pf-c-table--cell--Overflow
visible
.pf-c-table .pf-c-table__icon--pf-c-table--cell--TextOverflow
clip
.pf-c-table .pf-c-table__icon--pf-c-table--cell--WhiteSpace
nowrap
.pf-c-table .pf-m-break-word--pf-c-table--cell--WordBreak
break-word
.pf-c-table .pf-m-break-word--pf-c-table--cell--WhiteSpace
normal
.pf-c-table__text--pf-c-table--cell--MaxWidth
100%
.pf-c-table__text.pf-m-truncate--pf-c-table--cell--MinWidth
100%
.pf-c-table__sort .pf-c-table__text--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-c-table__toggle--pf-c-table--cell--PaddingBottom
0
.pf-c-table .pf-c-table__check--pf-c-table--cell--MinWidth
0
.pf-c-table .pf-c-table__check--pf-c-table--cell--Width
1%
.pf-c-table__toggle--pf-c-table--cell--PaddingRight
0
.pf-c-table__toggle--pf-c-table--cell--PaddingLeft
0
.pf-c-table__check--pf-c-table--cell--FontSize
1rem
.pf-c-table__action--pf-c-table--cell--PaddingTop
0
.pf-c-table__action--pf-c-table--cell--PaddingRight
0
.pf-c-table__action--pf-c-table--cell--PaddingBottom
0
.pf-c-table__action--pf-c-table--cell--PaddingLeft
0
.pf-c-table__inline-edit-action--pf-c-table--cell--PaddingLeft
0
.pf-c-table__inline-edit-action--pf-c-table--cell--PaddingRight
0
.pf-c-table__compound-expansion-toggle--pf-c-table__button--Color
#06c
.pf-c-table__compound-expansion-toggle--pf-c-table__button--hover--Color
#004080
.pf-c-table__compound-expansion-toggle--pf-c-table__button--focus--Color
#004080
.pf-c-table__compound-expansion-toggle--pf-c-table__button--active--Color
#004080
.pf-c-table__compound-expansion-toggle:hover--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth
1px
.pf-c-table__compound-expansion-toggle:hover--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth
1px
.pf-c-table__compound-expansion-toggle:hover--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth
3px