Skip to content
Versions 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 Critical Information Exposure 5.1/10 CVE-20222-41678 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-2024 Red Hat, Inc. Deploys by Netlify