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

The

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 #fff
--pf-c-table--BorderColor #d2d2d2
--pf-c-table--border-width--base 1px
--pf-c-table-caption--FontSize 0.875rem
--pf-c-table-caption--Color #6a6e73
--pf-c-table-caption--PaddingTop 1rem
--pf-c-table-caption--PaddingRight 1.5rem
--pf-c-table-caption--PaddingBottom 1rem
--pf-c-table-caption--PaddingLeft 1.5rem
--pf-c-table-caption--xl--PaddingRight 1rem
--pf-c-table-caption--xl--PaddingLeft 1rem
--pf-c-table--thead--cell--FontSize 0.875rem
--pf-c-table--thead--cell--FontWeight 700
--pf-c-table--tbody--cell--PaddingTop 1.5rem
--pf-c-table--tbody--cell--PaddingBottom 1.5rem
--pf-c-table--tr--BoxShadow--top--base 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--cell--Padding--base 1rem
--pf-c-table--cell--FontSize 1rem
--pf-c-table--cell--FontWeight 400
--pf-c-table--cell--Color #151515
--pf-c-table--cell--PaddingTop 1rem
--pf-c-table--cell--PaddingRight 1rem
--pf-c-table--cell--PaddingBottom 1rem
--pf-c-table--cell--PaddingLeft 1rem
--pf-c-table--cell--first-last-child--PaddingLeft 1rem
--pf-c-table--cell--first-last-child--PaddingRight 1rem
--pf-c-table--cell--first-last-child--xl--PaddingLeft 1.5rem
--pf-c-table--cell--first-last-child--xl--PaddingRight 1.5rem
--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft 1rem
--pf-c-table--cell--MinWidth 0
--pf-c-table--cell--MaxWidth none
--pf-c-table--cell--Width auto
--pf-c-table--cell--Overflow visible
--pf-c-table--cell--TextOverflow clip
--pf-c-table--cell--WhiteSpace normal
--pf-c-table--cell--WordBreak normal
--pf-c-table--cell--m-border-right--before--BorderRightWidth 1px
--pf-c-table--cell--m-border-right--before--BorderRightColor #d2d2d2
--pf-c-table--cell--m-border-left--before--BorderLeftWidth 1px
--pf-c-table--cell--m-border-left--before--BorderLeftColor #d2d2d2
--pf-c-table--cell--m-help--MinWidth 11ch
--pf-c-table--m-truncate--cell--MaxWidth 1px
--pf-c-table--m-truncate--cell--MinWidth calc(5ch + 1rem + 1rem)
--pf-c-table--cell--hidden-visible--Display grid
--pf-c-table__toggle--c-button--MarginTop calc(0.375rem * -1)
--pf-c-table__toggle--c-button--MarginBottom calc(0.375rem * -1)
--pf-c-table__toggle--c-button__toggle-icon--Rotate 270deg
--pf-c-table__toggle--c-button__toggle-icon--Transition .2s ease-in 0s
--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate 360deg
--pf-c-table__button--BackgroundColor transparent
--pf-c-table__button--Color #151515
--pf-c-table__button--hover--Color #151515
--pf-c-table__button--focus--Color #151515
--pf-c-table__button--active--Color #151515
--pf-c-table__button--OutlineOffset calc(3px * -1)
--pf-c-table--m-compact__toggle--PaddingTop 0
--pf-c-table--m-compact__toggle--PaddingBottom 0
--pf-c-table__check--input--MarginTop 0.25rem
--pf-c-table__check--input--FontSize 1rem
--pf-c-table--cell--m-favorite--Color #d2d2d2
--pf-c-table__favorite--c-button--Color #d2d2d2
--pf-c-table__favorite--c-button--FontSize 0.875rem
--pf-c-table__favorite--c-button--MarginTop calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginRight calc(1rem * -1)
--pf-c-table__favorite--c-button--MarginBottom calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginLeft calc(1rem * -1)
--pf-c-table__favorite--m-favorited--c-button--Color #f0ab00
--pf-c-table__sort--m-favorite__button__text--Color #6a6e73
--pf-c-table__sort--m-favorite__button--hover__text--Color #151515
--pf-c-table__sort--m-favorite__button--focus__text--Color #151515
--pf-c-table__sort--m-favorite__button--active__text--Color #151515
--pf-c-table__draggable--c-button--MarginTop calc(0.375rem * -1)
--pf-c-table__draggable--c-button--MarginRight calc(1rem * -1)
--pf-c-table__draggable--c-button--MarginBottom calc(0.375rem * -1)
--pf-c-table__draggable--c-button--MarginLeft calc(1rem * -1)
--pf-c-table__tr--m-ghost-row--Opacity .4
--pf-c-table__tr--m-ghost-row--BackgroundColor #fff
--pf-c-table__action--PaddingTop 0
--pf-c-table__action--PaddingRight 0
--pf-c-table__action--PaddingBottom 0
--pf-c-table__action--PaddingLeft 0
--pf-c-table__inline-edit-action--PaddingTop 0
--pf-c-table__inline-edit-action--PaddingRight 0
--pf-c-table__inline-edit-action--PaddingBottom 0
--pf-c-table__inline-edit-action--PaddingLeft 0
--pf-c-table__expandable-row--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row--MaxHeight 28.125rem
--pf-c-table__expandable-row-content--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-table__expandable-row-content--PaddingTop 1.5rem
--pf-c-table__expandable-row-content--PaddingBottom 1.5rem
--pf-c-table__expandable-row--after--Top calc(1px * -1)
--pf-c-table__expandable-row--after--Bottom calc(1px * -1)
--pf-c-table__expandable-row--after--border-width--base 3px
--pf-c-table__expandable-row--after--BorderLeftWidth 0
--pf-c-table__expandable-row--after--BorderColor #06c
--pf-c-table__icon-inline--MarginRight 0.5rem
--pf-c-table__sort--MinWidth calc(6ch + 1rem + 1rem + 1rem)
--pf-c-table__sort__button--PaddingTop 0.375rem
--pf-c-table__sort__button--PaddingRight 0.5rem
--pf-c-table__sort__button--PaddingBottom 0.375rem
--pf-c-table__sort__button--PaddingLeft 0.5rem
--pf-c-table__sort__button--MarginTop calc(0.375rem * -1)
--pf-c-table__sort__button--MarginBottom calc(0.375rem * -1)
--pf-c-table__sort__button--MarginLeft calc(0.5rem * -1)
--pf-c-table__sort__button--Color #151515
--pf-c-table__sort--m-selected__button--Color #06c
--pf-c-table__sort--m-help--MinWidth 15ch
--pf-c-table__sort__button__text--Color currentcolor
--pf-c-table__sort__button--hover__text--Color currencolor
--pf-c-table__sort__button--focus__text--Color currentcolor
--pf-c-table__sort__button--active__text--Color currentcolor
--pf-c-table__sort-indicator--Color #d2d2d2
--pf-c-table__sort-indicator--MarginLeft calc(6ch + 1rem + 1rem + 1rem)
--pf-c-table__sort--m-selected__sort-indicator--Color #06c
--pf-c-table__sort__button--hover__sort-indicator--Color #151515
--pf-c-table__sort__button--active__sort-indicator--Color #151515
--pf-c-table__sort__button--focus__sort-indicator--Color #151515
--pf-c-table--th--m-help--MinWidth 11ch
--pf-c-table__column-help--MarginLeft 0.25rem
--pf-c-table__column-help--TranslateY 0.125rem
--pf-c-table__column-help--c-button--MarginTop calc(0.375rem * -1)
--pf-c-table__column-help--c-button--MarginBottom calc(0.375rem * -1)
--pf-c-table__column-help--c-button--PaddingRight 0.5rem
--pf-c-table__column-help--c-button--PaddingLeft 0.5rem
--pf-c-table__compound-expansion-toggle__button--Color #06c
--pf-c-table__compound-expansion-toggle__button--hover--Color #004080
--pf-c-table__compound-expansion-toggle__button--focus--Color #004080
--pf-c-table__compound-expansion-toggle__button--active--Color #004080
--pf-c-table__compound-expansion-toggle__button--before--border-width--base 1px
--pf-c-table__compound-expansion-toggle__button--before--BorderColor #d2d2d2
--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth 0
--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth 0
--pf-c-table__compound-expansion-toggle__button--before--Bottom calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--before--Left calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--after--border-width--base 3px
--pf-c-table__compound-expansion-toggle__button--after--BorderColor #06c
--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth 0
--pf-c-table__compound-expansion-toggle__button--after--Top calc(1px * -1)
--pf-c-table__compound-expansion-toggle__button--after--Left calc(1px * -1)
--pf-c-table--m-compact-th--PaddingTop calc(0.5rem + 0.25rem)
--pf-c-table--m-compact-th--PaddingBottom 0.5rem
--pf-c-table--m-compact--cell--PaddingTop 0.5rem
--pf-c-table--m-compact--cell--PaddingRight 0.5rem
--pf-c-table--m-compact--cell--PaddingBottom 0.5rem
--pf-c-table--m-compact--cell--PaddingLeft 0.5rem
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft 1rem
--pf-c-table--m-compact--cell--first-last-child--PaddingRight 1rem
--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft 1.5rem
--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight 1.5rem
--pf-c-table--m-compact--FontSize 0.875rem
--pf-c-table--m-compact__expandable-row-content--PaddingTop 1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingRight 1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingBottom 1.5rem
--pf-c-table--m-compact__expandable-row-content--PaddingLeft 1.5rem
--pf-c-table--nested--first-last-child--PaddingRight 1rem
--pf-c-table--nested--first-last-child--PaddingLeft 1rem
--pf-c-table__expandable-row--m-expanded--BorderBottomColor #d2d2d2
--pf-c-table--tr--m-hoverable--BoxShadow--top 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-hoverable--BackgroundColor transparent
--pf-c-table--tr--m-hoverable--BoxShadow 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-hoverable--OutlineOffset calc(-1 * 0.25rem)
--pf-c-table--tr--m-hoverable--hover--BoxShadow 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 #fff
--pf-c-table--tr--m-hoverable--focus--BoxShadow 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 #fff
--pf-c-table--tr--m-hoverable--active--BoxShadow 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 #fff
--pf-c-table--tr--m-hoverable--m-selected--BoxShadow 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 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-selected--BackgroundColor #fff
--pf-c-table--tr--m-selected--BoxShadow 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tr--m-selected--OutlineOffset calc(-1 * 0.25rem)
--pf-c-table--tr--m-selected--after--BorderLeftWidth 3px
--pf-c-table--tr--m-selected--after--BorderLeftColor #06c
--pf-c-table--tr--m-selected--m-selected--BoxShadow 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow 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 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 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-hoverable--BoxShadow 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-hoverable--BackgroundColor transparent
--pf-c-table--tbody--m-hoverable--OutlineOffset calc(-1 * 0.25rem)
--pf-c-table--tbody--m-hoverable--hover--BoxShadow 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 #fff
--pf-c-table--tbody--m-hoverable--focus--BoxShadow 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 #fff
--pf-c-table--tbody--m-hoverable--active--BoxShadow 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 #fff
--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor #73bcf7
--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow 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 #fff
--pf-c-table--tbody--m-selected--BoxShadow--top 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-selected--BoxShadow 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
--pf-c-table--tbody--m-selected--OutlineOffset calc(-1 * 0.25rem)
--pf-c-table--tbody--m-selected--after--BorderLeftWidth 3px
--pf-c-table--tbody--m-selected--after--BorderLeftColor #06c
--pf-c-table--tbody--m-selected--m-selected--BoxShadow 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow 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 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 -0.1875rem
--pf-c-table--thead--m-nested-column-header--tr--PaddingTop 0.25rem
--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom 0.25rem
--pf-c-table__subhead--Color #6a6e73
--pf-c-table--m-striped__tr--BackgroundColor #fafafa
--pf-c-table--cell--PaddingTop 1rem
--pf-c-table--cell--PaddingRight 1rem
--pf-c-table--cell--PaddingBottom 1rem
--pf-c-table--cell--PaddingLeft 1rem
--pf-c-table__favorite--c-button--MarginTop calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginRight calc(1rem * -1)
--pf-c-table__favorite--c-button--MarginBottom calc(0.375rem * -1)
--pf-c-table__favorite--c-button--MarginLeft calc(1rem * -1)
--pf-global--FontWeight--bold 700
--pf-global--FontWeight--normal 400
--pf-c-table--cell--Padding--base —
--pf-global--FontSize--md 1rem
--pf-global--Color--light-300 #d2d2d2
--pf-global--palette--gold-400 #f0ab00
--pf-global--Transition all 250ms cubic-bezier(0.42, 0, 0.58, 1)
--pf-c-table--border-width--base —
--pf-c-table--cell--PaddingRight —
--pf-c-table--cell--PaddingLeft —
--pf-c-table__sort-indicator--MarginLeft —
--pf-c-table__sort__button--PaddingTop —
--pf-c-table__sort__button--PaddingBottom —
--pf-c-table__sort__button--PaddingLeft —
--pf-global--disabled-color--200 #d2d2d2
--pf-global--spacer--form-element 0.375rem
--pf-global--link--Color--hover #004080
--pf-global--BorderWidth--sm 1px
--pf-global--BorderWidth--lg 3px
--pf-global--primary-color--100 #06c
--pf-c-table__compound-expansion-toggle__button--before--border-width--base —
--pf-global--spacer--sm 0.5rem
--pf-global--spacer--md 1rem
--pf-global--FontSize--sm 0.875rem
--pf-global--spacer--lg 1.5rem
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft —
--pf-c-table--m-compact--cell--first-last-child--PaddingRight —
--pf-global--BorderColor--100 #d2d2d2
--pf-c-table--tr--m-hoverable--BoxShadow--top —
--pf-c-table--tbody--m-hoverable--BoxShadow--top —
--pf-global--active-color--400 #73bcf7
--pf-global--BackgroundColor--100 #fff
--pf-c-table--tr--BoxShadow--top--base —
--pf-c-table--tbody--m-selected--BoxShadow--top —
--pf-c-table__expandable-row--after--border-width--base —
--pf-global--active-color--100 #06c
--pf-c-table--tr--m-selected--BoxShadow--top —
--pf-global--BoxShadow--sm-bottom 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-global--spacer--xs 0.25rem
--pf-global--Color--200 #6a6e73
--pf-global--BackgroundColor--light-200 —
--pf-global--Color--100 #151515
--pf-c-table--m-grid--cell--PaddingTop 0
--pf-c-table--m-grid--cell--PaddingRight 0
--pf-c-table--m-grid--cell--PaddingBottom 0
--pf-c-table--m-grid--cell--PaddingLeft 0

CSS Shadow Parts

None

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