Table
A table is used to display large data sets that can be easily laid out in a simple grid with column headers.
Overview
Use the <pf-table> elements the way you would native HTML table elements.
Installation
npm install @patternfly/elementsUsage
Basic
Simple table using composable components
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'.
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.
Details of the dependency: io.quarkus:quarkus-hibernate-orm
Additional details...
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:
- add the
expandable="compound"attribute to the row - set the
compound-expandattribute on each<pf-td>in the row to a string that's unique to that cell - 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.
Branches...
Pull requests...
Workspaces
Branches...
Pull requests...
Workspaces
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-captionelement and a combination ofpf-tr,pf-thead, orpf-tbodyelements.
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
{@default |
—
|
--pf-c-table--cell--PaddingRight |
Cell right padding
{@default |
—
|
--pf-c-table--cell--PaddingBottom |
Cell bottom padding
{@default |
—
|
--pf-c-table--cell--PaddingLeft |
Cell left padding
{@default |
—
|
--pf-c-table__favorite--c-button--MarginTop |
Favorite button top margin
{@default |
—
|
--pf-c-table__favorite--c-button--MarginRight |
Favorite button right margin
{@default |
—
|
--pf-c-table__favorite--c-button--MarginBottom |
Favorite button bottom margin
{@default |
—
|
--pf-c-table__favorite--c-button--MarginLeft |
Favorite button left margin
{@default |
—
|
CSS Shadow Parts
None
