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/elements
Usage
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-expand
attribute 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
-
The
-
The default slot can hold an optional
pf-caption
element and a combination ofpf-tr
,pf-thead
, orpf-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