Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

Table

A table is used to display large data sets that can be easily laid out in a simple grid with column headers.

This is an initial release, with a subset of upstream PatternFly's features. APIs can be expected to change.

Overview

Use the <pf-table> elements the way you would native HTML table elements.

Installation

npm install @patternfly/elements

Usage

Basic

Simple table using composable components

Repositories Branches Pull requests Workspaces Last commit one two three four five one - 2 four - 2 five - 2 one - 3 two - 3 three - 3 four - 3 five - 3
View HTML Source 
<pf-table>
  <pf-thead>
    <pf-tr>
<pf-th>Repositories</pf-th>
<pf-th>Branches</pf-th>
<pf-th>Pull requests</pf-th>
<pf-th>Workspaces</pf-th>
<pf-th>Last commit</pf-th>
    </pf-tr>
  </pf-thead>
  <pf-tr>
    <pf-th>one</pf-th>
    <pf-td>two</pf-td>
    <pf-td>three</pf-td>
    <pf-td>four</pf-td>
    <pf-td>five</pf-td>
  </pf-tr>
  <pf-tr>
    <pf-th>one - 2</pf-th>
    <pf-td></pf-td>
    <pf-td></pf-td>
    <pf-td>four - 2</pf-td>
    <pf-td>five - 2</pf-td>
  </pf-tr>
  <pf-tr>
    <pf-th>one - 3</pf-th>
    <pf-td>two - 3</pf-td>
    <pf-td>three - 3</pf-td>
    <pf-td>four - 3</pf-td>
    <pf-td>five - 3</pf-td>
  </pf-tr>
</pf-table>

<script type="module">
import '@patternfly/elements/pf-table/pf-table.js';
</script>

Sortable

To make a table sortable, add the sortable attribute to <pf-th> elements in the table header (<pf-thead>). When the user clicks on a header, the header element fires a request-sort event. If you are using a JavaScript framework like Lit or React to manage your table's rows, call the event's preventDefault() method so that the table element will not rearrange the DOM nodes, then re-render your rows based on the event's direction property, which is either 'asc' or 'desc'.

Dependency # Direct Vulnerabilities # Transitive Vulnerabilities Highest CVSS Score Highest Severity Red Hat Remediation Available io.quarkus:quarkus-hibernate-orm 1 6 7.4/10 SNYK-JAVA-ORGGRAALVMSDK-5457933 io.quarkus:quarkus-orm 2 6 5.1/10 ANYK-JAVA-ORGGRAALVMSDK-5457933 io.quarkus:quarkus 1 7 6.4/10 ZNYK-JAVA-ORGGRAALVMSDK-5457933 io.quarkus:quarkus 3 5 8.9/10 ZNYK-JAVA-ORGGRAALVMSDK-5457933
View HTML Source 
<pf-table>
  <pf-thead>
    <pf-tr>
<pf-th>Dependency</pf-th>
<pf-th sortable># Direct Vulnerabilities</pf-th>
<pf-th sortable># Transitive Vulnerabilities</pf-th>
<pf-th sortable>Highest CVSS Score</pf-th>
<pf-th sortable>Highest Severity</pf-th>
<pf-th>Red Hat Remediation Available</pf-th>
    </pf-tr>
  </pf-thead>
  <pf-tr id="1">
    <pf-th>
<a href="#" target="_blank">io.quarkus:quarkus-hibernate-orm</a>
    </pf-th>
    <pf-td>1</pf-td>
    <pf-td>6</pf-td>
    <pf-td>7.4/10</pf-td>
    <pf-td>
<a href="#" target="_blank">SNYK-JAVA-ORGGRAALVMSDK-5457933</a>
    </pf-td>
    <pf-td>
<pf-icon icon="circle-check" size="md"></pf-icon>
    </pf-td>
  </pf-tr>
  <pf-tr id="2">
    <pf-th>
<a href="#" target="_blank">io.quarkus:quarkus-orm</a>
    </pf-th>
    <pf-td>2</pf-td>
    <pf-td>6</pf-td>
    <pf-td>5.1/10</pf-td>
    <pf-td>
<a href="#" target="_blank">ANYK-JAVA-ORGGRAALVMSDK-5457933</a>
    </pf-td>
    <pf-td>
<pf-icon icon="circle-check" size="md"></pf-icon>
    </pf-td>
  </pf-tr>
  <pf-tr id="3">
    <pf-th>
<a href="#" target="_blank">io.quarkus:quarkus</a>
    </pf-th>
    <pf-td>1</pf-td>
    <pf-td>7</pf-td>
    <pf-td>6.4/10</pf-td>
    <pf-td>
<a href="#" target="_blank">ZNYK-JAVA-ORGGRAALVMSDK-5457933</a>
    </pf-td>
    <pf-td>
<pf-icon icon="circle-check" size="md"></pf-icon>
    </pf-td>
  </pf-tr>
  <pf-tr id="4">
    <pf-th>
<a href="#" target="_blank">io.quarkus:quarkus</a>
    </pf-th>
    <pf-td>3</pf-td>
    <pf-td>5</pf-td>
    <pf-td>8.9/10</pf-td>
    <pf-td>
<a href="#" target="_blank">ZNYK-JAVA-ORGGRAALVMSDK-5457933</a>
    </pf-td>
    <pf-td>
<pf-icon icon="circle-check" size="md"></pf-icon>
    </pf-td>
  </pf-tr>
</pf-table>

<script type="module">
import '@patternfly/elements/pf-icon/pf-icon.js';
import '@patternfly/elements/pf-table/pf-table.js';
</script>

Expandable rows

To make a row expandable, add the expandable attribute to it, and slot content into the expansion slot.

Dependency # Direct Vulnerabilities # Transitive Vulnerabilities Highest CVSS Score Highest Severity Red Hat Remediation Available io.quarkus:quarkus-hibernate-orm 1 6 7.4/10 SNYK-JAVA-ORGGRAALVMSDK-5457933

Details of the dependency: io.quarkus:quarkus-hibernate-orm

Severity Description CVSS Score ID Remediation Medium Information Exposure 5.1/10 CVE-20222-41678
1.2.3-redhat-003
Critical Information Exposure 5.1/10 CVE-20222-41678
1.2.3-redhat-003
Show Transitives with Vulnerabilities

Additional details...

 io.quarkus:quarkus-orm 2 6 5.1/10 ANYK-JAVA-ORGGRAALVMSDK-5457933 io.quarkus:quarkus 1 7 6.4/10 ZNYK-JAVA-ORGGRAALVMSDK-5457933
View HTML Source 
<pf-table>
  <pf-thead>
    <pf-tr>
<pf-th>Dependency</pf-th>
<pf-th sortable># Direct Vulnerabilities</pf-th>
<pf-th># Transitive Vulnerabilities</pf-th>
<pf-th>Highest CVSS Score</pf-th>
<pf-th>Highest Severity</pf-th>
<pf-th>Red Hat Remediation Available</pf-th>
    </pf-tr>
  </pf-thead>

<pf-tr id="1" expandable>
<pf-td>
<a href="#" target="_blank">io.quarkus:quarkus-hibernate-orm</a>
</pf-td>
<pf-td>1</pf-td>
<pf-td>6</pf-td>
<pf-td>7.4/10</pf-td>
<pf-td>
<a href="#" target="_blank">SNYK-JAVA-ORGGRAALVMSDK-5457933</a>
</pf-td>
<pf-td>
<pf-icon icon="circle-check" size="md"></pf-icon>
</pf-td>


<p slot="expansion">Details of the dependency: <strong>io.quarkus:quarkus-hibernate-orm</strong></p>
<pf-table slot="expansion">
<pf-tr>
<pf-th>Severity</pf-th>
<pf-th>Description</pf-th>
<pf-th>CVSS Score</pf-th>
<pf-th>ID</pf-th>
<pf-th>Remediation</pf-th>
</pf-tr>
<pf-tr>
<pf-td>
<pf-label color="orange">Medium</pf-label>
</pf-td>
<pf-td>Information Exposure</pf-td>
<pf-td>5.1/10</pf-td>
<pf-td>CVE-20222-41678</pf-td>
<pf-td>
<div class="icon-container">
<pf-icon icon="circle-check" size="md"></pf-icon>
<a href="#">1.2.3-redhat-003</a>
<pf-icon icon="question-circle" size="md"></pf-icon>
</div>
</pf-td>
</pf-tr>
<pf-tr>
<pf-td>
<pf-label color="red">Critical</pf-label>
</pf-td>
<pf-td>Information Exposure</pf-td>
<pf-td>5.1/10</pf-td>
<pf-td>CVE-20222-41678</pf-td>
<pf-td>
<div class="icon-container">
<pf-icon icon="circle-check" size="md"></pf-icon>
<a href="#">1.2.3-redhat-003</a>
<pf-icon icon="question-circle" size="md"></pf-icon>
</div>
</pf-td>
</pf-tr>
<pf-tr id="child" expandable>
<pf-td>
Show Transitives with Vulnerabilities
</pf-td>
<p slot="expansion">Additional details...</p>
</pf-tr>
</pf-table>


</pf-tr>


<pf-tr id="2">
<pf-td>
<a href="#" target="_blank">io.quarkus:quarkus-orm</a>
</pf-td>
<pf-td>2</pf-td>
<pf-td>6</pf-td>
<pf-td>5.1/10</pf-td>
<pf-td>
<a href="#" target="_blank">ANYK-JAVA-ORGGRAALVMSDK-5457933</a>
</pf-td>
<pf-td>
<pf-icon icon="circle-check" size="md"></pf-icon>
</pf-td>
</pf-tr>
<pf-tr id="3">
<pf-td>
<a href="#" target="_blank">io.quarkus:quarkus</a>
</pf-td>
<pf-td>1</pf-td>
<pf-td>7</pf-td>
<pf-td>6.4/10</pf-td>
<pf-td>
<a href="#" target="_blank">ZNYK-JAVA-ORGGRAALVMSDK-5457933</a>
</pf-td>
<pf-td>
<pf-icon icon="circle-check" size="md"></pf-icon>
</pf-td>
</pf-tr>
</pf-table>


<script type="module">
import '@patternfly/elements/pf-table/pf-table.js';
import '@patternfly/elements/pf-label/pf-label.js';
</script>

Compound expandable rows

To make a row expandable with sections assigned to certain cells, follow these three steps:

  1. add the expandable="compound" attribute to the row
  2. set the compound-expand attribute on each <pf-td> in the row to a string that's unique to that cell
  3. slot the content for each expandable <pf-td> into the row, into the slot name you specified in step 2.

See the HTML code below for an example.

Repositories Branches Pull requests Workspaces Last commit siemur/test-space 10

Branches...

4

Pull requests...

4

Workspaces

Open in GitHub siemur/test-space-2 3

Branches...

4

Pull requests...

4

Workspaces

Open in GitHub
View HTML Source 
<pf-table>
  <pf-thead>
    <pf-tr>
<pf-th>Repositories</pf-th>
<pf-th>Branches</pf-th>
<pf-th>Pull requests</pf-th>
<pf-th>Workspaces</pf-th>
<pf-th>Last commit</pf-th>
<pf-th></pf-th>
    </pf-tr>
  </pf-thead>

<pf-tr expandable="compound">
<pf-td>
<a href="#">siemur/test-space</a>
</pf-td>
<pf-td compound-expand="branches">
<pf-icon set="fas" icon="code-branch"></pf-icon>
10
</pf-td>
<p slot="branches">Branches...</p>
<pf-td compound-expand="pull-requests">
<pf-icon set="fas" icon="code-branch"></pf-icon>
4
</pf-td>
<p slot="pull-requests">Pull requests...</p>
<pf-td compound-expand="workspaces">
<pf-icon set="fas" icon="cube"></pf-icon>
4
</pf-td>
<p slot="workspaces">Workspaces</p>
<pf-td>
<time>20 minutes ago</time>
</pf-td>
<pf-td>
<a href="#">Open in GitHub</a>
</pf-td>
</pf-tr>


<pf-tr expandable="compound">
<pf-td>
<a href="#">siemur/test-space-2</a>
</pf-td>
<pf-td compound-expand="branches">
<pf-icon set="fas" icon="code-branch"></pf-icon>
3
</pf-td>
<p slot="branches">Branches...</p>
<pf-td compound-expand="pull-requests">
<pf-icon set="fas" icon="code-branch"></pf-icon>
4
</pf-td>
<p slot="pull-requests">Pull requests...</p>
<pf-td compound-expand="workspaces">
<pf-icon set="fas" icon="cube"></pf-icon>
4
</pf-td>
<p slot="workspaces">Workspaces</p>
<pf-td>
<time>20 minutes ago</time>
</pf-td>
<pf-td>
<a href="#">Open in GitHub</a>
</pf-td>
</pf-tr>


</pf-table>


<script type="module">
import '@patternfly/elements/pf-table/pf-table.js';
import '@patternfly/elements/pf-icon/pf-icon.js';
</script>

Slots

Default Slot

The default slot can hold an optional pf-caption element and a combination of pf-tr, pf-thead, or pf-tbody elements.

Attributes

None

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-table--BackgroundColor

Table background color

 #fff
--pf-c-table--BorderColor

Table border color

 #d2d2d2
--pf-c-table--border-width--base

Table border base width

 1px
--pf-c-table-caption--FontSize

Table caption font size

 0.875rem
--pf-c-table-caption--Color

Table caption color

 #6a6e73
--pf-c-table-caption--PaddingTop

Table caption top padding

 1rem
--pf-c-table-caption--PaddingRight

Table caption right padding

 1.5rem
--pf-c-table-caption--PaddingBottom

Table caption bottom padding

 1rem
--pf-c-table-caption--PaddingLeft

Table caption left padding

 1.5rem
--pf-c-table-caption--xl--PaddingRight

Table XL caption right padding

 1rem
--pf-c-table-caption--xl--PaddingLeft

Table XL caption left padding

 1rem
--pf-c-table--thead--cell--FontSize

Table head cell font size

 0.875rem
--pf-c-table--thead--cell--FontWeight

Table head cell font weight

 700
--pf-c-table--tbody--cell--PaddingTop

Table body cell padding top

 1.5rem
--pf-c-table--tbody--cell--PaddingBottom

Table body cell padding bottom

 1.5rem
--pf-c-table--tr--BoxShadow--top--base

Table row top base box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--cell--Padding--base

Table cell base padding

 1rem
--pf-c-table--cell--FontSize

Table cell font size

 1rem
--pf-c-table--cell--FontWeight

Table cell font weight

 400
--pf-c-table--cell--Color

Table cell color

 #151515
--pf-c-table--cell--PaddingTop

Table cell top padding

 1rem
--pf-c-table--cell--PaddingRight

Table cell right padding

 1rem
--pf-c-table--cell--PaddingBottom

Table cell bottom padding

 1rem
--pf-c-table--cell--PaddingLeft

Table cell left padding

 1rem
--pf-c-table--cell--first-last-child--PaddingLeft

Table cell last child left padding

 1rem
--pf-c-table--cell--first-last-child--PaddingRight

Table cell last child right padding

 1rem
--pf-c-table--cell--first-last-child--xl--PaddingLeft

Table XL cell last child left padding

 1.5rem
--pf-c-table--cell--first-last-child--xl--PaddingRight

Table XL cell last child right padding

 1.5rem
--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft

Table row first cell offset reset cell left padding

 1rem
--pf-c-table--cell--MinWidth

Table cell min width

 0
--pf-c-table--cell--MaxWidth

Table cell max width

 none
--pf-c-table--cell--Width

Table cell width

 auto
--pf-c-table--cell--Overflow

Table cell overflow

 visible
--pf-c-table--cell--TextOverflow

Table cell text overflow

 clip
--pf-c-table--cell--WhiteSpace

Table cell white space

 normal
--pf-c-table--cell--WordBreak

Table cell word break

 normal
--pf-c-table--cell--m-border-right--before--BorderRightWidth

Table cell before right border width

 1px
--pf-c-table--cell--m-border-right--before--BorderRightColor

Table cell before right border color

 #d2d2d2
--pf-c-table--cell--m-border-left--before--BorderLeftWidth

Table cell before left border width

 1px
--pf-c-table--cell--m-border-left--before--BorderLeftColor

Table cell before left border color

 #d2d2d2
--pf-c-table--cell--m-help--MinWidth

Help cell minimum width

 11ch
--pf-c-table--m-truncate--cell--MaxWidth

Help cell maximum width

 1px
--pf-c-table--m-truncate--cell--MinWidth

Truncated cell minimum width

 calc(5ch + 1rem + 1rem)
--pf-c-table--cell--hidden-visible--Display

Cell visible display

 grid
--pf-c-table__toggle--c-button--MarginTop

Toggle button top margin

 calc(0.375rem * -1)
--pf-c-table__toggle--c-button--MarginBottom

Toggle button bottom margin

 calc(0.375rem * -1)
--pf-c-table__toggle--c-button__toggle-icon--Rotate

Toggle button icon rotation

 270deg
--pf-c-table__toggle--c-button__toggle-icon--Transition

Toggle button icon transition

 .2s ease-in 0s
--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate

Expanded toggle button icon rotation

 360deg
--pf-c-table__button--BackgroundColor

Button background color

 transparent
--pf-c-table__button--Color

Button color

 #151515
--pf-c-table__button--hover--Color

Button hover color

 #151515
--pf-c-table__button--focus--Color

Button focus color

 #151515
--pf-c-table__button--active--Color

Button active color

 #151515
--pf-c-table__button--OutlineOffset

Button outline offset

 calc(3px * -1)
--pf-c-table--m-compact__toggle--PaddingTop

Compact toggle top padding

 0
--pf-c-table--m-compact__toggle--PaddingBottom

Compacy toggle bottom padding

 0
--pf-c-table__check--input--MarginTop

Check input top margin

 0.25rem
--pf-c-table__check--input--FontSize

Check input font size

 1rem
--pf-c-table--cell--m-favorite--Color

Favorite cell color

 #d2d2d2
--pf-c-table__favorite--c-button--Color

Favorite button color

 #d2d2d2
--pf-c-table__favorite--c-button--FontSize

Favorite button font size

 0.875rem
--pf-c-table__favorite--c-button--MarginTop

Favorite button top margin

 calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginRight

Favorite button right margin

 calc(1rem * -1)
--pf-c-table__favorite--c-button--MarginBottom

Favorite button bottom margin

 calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginLeft

Favorite button left margin

 calc(1rem * -1)
--pf-c-table__favorite--m-favorited--c-button--Color

Favorited button color

 #f0ab00
--pf-c-table__sort--m-favorite__button__text--Color

Favorite sort button text color

 #6a6e73
--pf-c-table__sort--m-favorite__button--hover__text--Color

Favorite sort button hover text color

 #151515
--pf-c-table__sort--m-favorite__button--focus__text--Color

Favorite sort button focus text color

 #151515
--pf-c-table__sort--m-favorite__button--active__text--Color

Favorite sort button active text color

 #151515
--pf-c-table__draggable--c-button--MarginTop

Draggable button top margin

 calc(0.375rem * -1)
--pf-c-table__draggable--c-button--MarginRight

Draggable button right margin

 calc(1rem * -1)
--pf-c-table__draggable--c-button--MarginBottom

Draggable button bottom margin

 calc(0.375rem * -1)
--pf-c-table__draggable--c-button--MarginLeft

Draggable button left margin

 calc(1rem * -1)
--pf-c-table__tr--m-ghost-row--Opacity

Ghost row opacity

 .4
--pf-c-table__tr--m-ghost-row--BackgroundColor

Ghost row background color

 #fff
--pf-c-table__action--PaddingTop

Action top padding

 0
--pf-c-table__action--PaddingRight

Action right padding

 0
--pf-c-table__action--PaddingBottom

Action bottom padding

 0
--pf-c-table__action--PaddingLeft

Action left padding

 0
--pf-c-table__inline-edit-action--PaddingTop

Inline edit action top padding

 0
--pf-c-table__inline-edit-action--PaddingRight

Inline edit action right padding

 0
--pf-c-table__inline-edit-action--PaddingBottom

Inline edit action bottom padding

 0
--pf-c-table__inline-edit-action--PaddingLeft

Inline edit action left padding

 0
--pf-c-table__expandable-row--Transition

Expandable row transition

 all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row--MaxHeight

Expandable row max height

 28.125rem
--pf-c-table__expandable-row-content--Transition

Expandable row content transition

 all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row-content--PaddingTop

Expandable row content top padding

 1.5rem
--pf-c-table__expandable-row-content--PaddingBottom

Expandable row content bottom padding

 1.5rem
--pf-c-table__expandable-row--after--Top

Expandable row after top

 calc(1px * -1)
--pf-c-table__expandable-row--after--Bottom

Expandable row after bottom

 calc(1px * -1)
--pf-c-table__expandable-row--after--border-width--base

Expandable row after base border width

 3px
--pf-c-table__expandable-row--after--BorderLeftWidth

Expandable row after left border width

 0
--pf-c-table__expandable-row--after--BorderColor

Expandable row after border color

 #06c
--pf-c-table__icon-inline--MarginRight

Inline icon right margin

 0.5rem
--pf-c-table__sort--MinWidth

Sort button minimum width

 calc(6ch + 1rem + 1rem + 1rem)
--pf-c-table__sort__button--PaddingTop

Sort button top padding

 0.375rem
--pf-c-table__sort__button--PaddingRight

Sort button right padding

 0.5rem
--pf-c-table__sort__button--PaddingBottom

Sort button bottom padding

 0.375rem
--pf-c-table__sort__button--PaddingLeft

Sort button left padding

 0.5rem
--pf-c-table__sort__button--MarginTop

Sort button top margin

 calc(0.375rem * -1)
--pf-c-table__sort__button--MarginBottom

Sort button bottom margin

 calc(0.375rem * -1)
--pf-c-table__sort__button--MarginLeft

Sort button left margin

 calc(0.5rem * -1)
--pf-c-table__sort__button--Color

Sort button color

 #151515
--pf-c-table__sort--m-selected__button--Color

Selected sort button color

 #06c
--pf-c-table__sort--m-help--MinWidth

Help button minimum width

 15ch
--pf-c-table__sort__button__text--Color

Sort button text color

 currentcolor
--pf-c-table__sort__button--hover__text--Color

Sort button hover text color

 currencolor
--pf-c-table__sort__button--focus__text--Color

Sort button focus text color

 currentcolor
--pf-c-table__sort__button--active__text--Color

Sort button active text color

 currentcolor
--pf-c-table__sort-indicator--Color

Sort inidcator color

 #d2d2d2
--pf-c-table__sort-indicator--MarginLeft

Sort inidcator left margin

 calc(6ch + 1rem + 1rem + 1rem)
--pf-c-table__sort--m-selected__sort-indicator--Color

Selected sort inidcator color

 #06c
--pf-c-table__sort__button--hover__sort-indicator--Color

Sort button hover sort indicator color

 #151515
--pf-c-table__sort__button--active__sort-indicator--Color

Sort button hover active sort indicator color

 #151515
--pf-c-table__sort__button--focus__sort-indicator--Color

Sort button hover focus sort indicator color

 #151515
--pf-c-table--th--m-help--MinWidth

Header cell help minimum width

 11ch
--pf-c-table__column-help--MarginLeft

Help column left magin

 0.25rem
--pf-c-table__column-help--TranslateY

Help column translate y axis

 0.125rem
--pf-c-table__column-help--c-button--MarginTop

Help column button top margin

 calc(0.375rem * -1)
--pf-c-table__column-help--c-button--MarginBottom

Help column button bottom margin

 calc(0.375rem * -1)
--pf-c-table__column-help--c-button--PaddingRight

Help column button right padding

 0.5rem
--pf-c-table__column-help--c-button--PaddingLeft

Help column button left margin

 0.5rem
--pf-c-table__compound-expansion-toggle__button--Color

Compound expansion toggle button color

 #06c
--pf-c-table__compound-expansion-toggle__button--hover--Color

Compound expansion hover toggle button color

 #004080
--pf-c-table__compound-expansion-toggle__button--focus--Color

Compound expansion focus toggle button color

 #004080
--pf-c-table__compound-expansion-toggle__button--active--Color

Compound expansion active toggle button color

 #004080
--pf-c-table__compound-expansion-toggle__button--before--border-width--base

Compound expansion toggle button before border width

 1px
--pf-c-table__compound-expansion-toggle__button--before--BorderColor

Compound expansion toggle button before border color

 #d2d2d2
--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth

Compound expansion toggle button before right border width

 0
--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth

Compound expansion toggle button before left border width

 0
--pf-c-table__compound-expansion-toggle__button--before--Bottom

Compound expansion toggle button before bottom

 calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--before--Left

Compound expansion toggle button before left

 calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--after--border-width--base

Compound expansion toggle button after base border width

 3px
--pf-c-table__compound-expansion-toggle__button--after--BorderColor

Compound expansion toggle button after border color

 #06c
--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth

Compound expansion toggle button after top border width

 0
--pf-c-table__compound-expansion-toggle__button--after--Top

Compound expansion toggle button after top

 calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--after--Left

Compound expansion toggle button after left

 calc(1px * -1)
--pf-c-table--m-compact-th--PaddingTop

Compact header cell top padding

 calc(0.5rem + 0.25rem)
--pf-c-table--m-compact-th--PaddingBottom

Compact header cell bottom padding

 0.5rem
--pf-c-table--m-compact--cell--PaddingTop

Compact cell top padding

 0.5rem
--pf-c-table--m-compact--cell--PaddingRight

Compact cell right padding

 0.5rem
--pf-c-table--m-compact--cell--PaddingBottom

Compact cell bottom padding

 0.5rem
--pf-c-table--m-compact--cell--PaddingLeft

Compact cell left padding

 0.5rem
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft

Compact cell first child left padding

 1rem
--pf-c-table--m-compact--cell--first-last-child--PaddingRight

Compact XLcell first child right padding

 1rem
--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft

Compact cell first child XL left padding

 1.5rem
--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight

Compact cell first child XL right padding

 1.5rem
--pf-c-table--m-compact--FontSize

Compact font size

 0.875rem
--pf-c-table--m-compact__expandable-row-content--PaddingTop

Compact expandable row content top padding

 1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingRight

Compact expandable row content right padding

 1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingBottom

Compact expandable row content bottom padding

 1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingLeft

Compact expandable row content left padding

 1.5rem
--pf-c-table--nested--first-last-child--PaddingRight

Nested first child right padding

 1rem
--pf-c-table--nested--first-last-child--PaddingLeft

Nested first child left padding

 1rem
--pf-c-table__expandable-row--m-expanded--BorderBottomColor

Expandable row expanded bottom border color

 #d2d2d2
--pf-c-table--tr--m-hoverable--BoxShadow--top

Hoverable table row top box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-hoverable--BackgroundColor

Hoverable table row background color

 transparent
--pf-c-table--tr--m-hoverable--BoxShadow

Hoverable table row box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-hoverable--OutlineOffset

Hoverable table row outline offset

 calc(-1 * 0.25rem)
--pf-c-table--tr--m-hoverable--hover--BoxShadow

Hoverable table row hover box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tr--m-hoverable--hover--BackgroundColor

Hoverable table row hover background color

 #fff
--pf-c-table--tr--m-hoverable--focus--BoxShadow

Hoverable table row focus box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tr--m-hoverable--focus--BackgroundColor

Hoverable table row focus background color

 #fff
--pf-c-table--tr--m-hoverable--active--BoxShadow

Hoverable table row active box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tr--m-hoverable--active--BackgroundColor

Hoverable table row active background color

 #fff
--pf-c-table--tr--m-hoverable--m-selected--BoxShadow

Hoverable table row selected box shadow

 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tr--m-selected--BoxShadow--top

Selected table row top box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-selected--BackgroundColor

Selected table row background color

 #fff
--pf-c-table--tr--m-selected--BoxShadow

Selected table row box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-selected--OutlineOffset

Selected table row outline offset

 calc(-1 * 0.25rem)
--pf-c-table--tr--m-selected--after--BorderLeftWidth

Selected table row after left border width

 3px
--pf-c-table--tr--m-selected--after--BorderLeftColor

Selected table row after left border color

 #06c
--pf-c-table--tr--m-selected--m-selected--BoxShadow

Selected table row box shadow

 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow

Selected table row hover box shadow

 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow

Selected table row hover box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-hoverable--BoxShadow--top

Hoverable table body top box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-hoverable--BoxShadow

Hoverable table body box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-hoverable--BackgroundColor

Hoverable table body background color

 transparent
--pf-c-table--tbody--m-hoverable--OutlineOffset

Hoverable table body outline offset

 calc(-1 * 0.25rem)
--pf-c-table--tbody--m-hoverable--hover--BoxShadow

Hoverable table body hover box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-hoverable--hover--BackgroundColor

Hoverable table body hover background color

 #fff
--pf-c-table--tbody--m-hoverable--focus--BoxShadow

Hoverable table body focus box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-hoverable--focus--BackgroundColor

Hoverable table body focus background color

 #fff
--pf-c-table--tbody--m-hoverable--active--BoxShadow

Hoverable table body active box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-hoverable--active--BackgroundColor

Hoverable table body active background color

 #fff
--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor

Hoverable table body expanded border color

 #73bcf7
--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow

Hoverable table body selected table row box shadow

 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-selected--BackgroundColor

Selected table body background color

 #fff
--pf-c-table--tbody--m-selected--BoxShadow--top

Selected table body top box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-selected--BoxShadow

Selected table body box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-selected--OutlineOffset

Selected table body outline offset

 calc(-1 * 0.25rem)
--pf-c-table--tbody--m-selected--after--BorderLeftWidth

Selected table body after left border width

 3px
--pf-c-table--tbody--m-selected--after--BorderLeftColor

Selected table body after left border color

 #06c
--pf-c-table--tbody--m-selected--m-selected--BoxShadow

Selected table body selected box shadow

 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow

Selected table body hover selected box shadow

 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow

Selected table body hover box shadow

 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--thead--m-nested-column-header--button--OutlineOffset

Table head nested column header button outline offset

 -0.1875rem
--pf-c-table--thead--m-nested-column-header--tr--PaddingTop

Table head nested column header row top padding

 0.25rem
--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom

Table head nested column header row bottom padding

 0.25rem
--pf-c-table__subhead--Color

Subhead color

 #6a6e73
--pf-c-table--m-striped__tr--BackgroundColor

Striped row background color

 #fafafa
--pf-c-table--cell--PaddingTop

Cell top padding

 1rem
--pf-c-table--cell--PaddingRight

Cell right padding

 1rem
--pf-c-table--cell--PaddingBottom

Cell bottom padding

 1rem
--pf-c-table--cell--PaddingLeft

Cell left padding

 1rem
--pf-c-table__favorite--c-button--MarginTop

Favorite button top margin

 calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginRight

Favorite button right margin

 calc(1rem * -1)
--pf-c-table__favorite--c-button--MarginBottom

Favorite button bottom margin

 calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginLeft

Favorite button left margin

 calc(1rem * -1)

CSS Shadow Parts

None

© 2018-2025 Red Hat, Inc. Deploys by Netlify