Table Composable
Note: Table lives in its own package at @patternfly/react-table!
PatternFly has two implementations of a React table.
The first is the newer TableComposable
component. It takes a more explicit and declarative approach, and its implementation more closely mirrors that of an HTML table. Generally, updates and new feature requests are implemented in the TableComposable
.
The second is the original Table
component. It is configuration based and takes a less declarative and more implicit approach about laying out the table structure, such as the rows and cells within it. The documentation for the older table implementation can be found under the React legacy tab.
For most common use cases, we recommend using TableComposable
. Both implementations are supported and fully maintained.
TableComposable examples
The TableComposable
component differs from the regular Table
component, in that it allows you to compose the table by nesting the relevant Thead
, Tbody
, Tr
, Th
and Td
components within it. For a less declarative and more implicit approach, use the Table
component instead.
Some general notes:
- Provide
dataLabel
prop to theTd
components so that in mobile view the cell has a label to provide context. - If you want a table caption, simply place a
<Caption>My caption</Caption>
as the first child within aTableComposable
. - You can set the
TableComposable
variant tocompact
Composable: Basic
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 |
Composable: Custom row wrapper, header tooltips & popovers
- If you add the
noWrap
prop toThead
, it won't wrap it if there is no space - You can add the
textCenter
prop toTh
orTd
to center the contents - You can pass
className
,style
and more toTr
To add a header tooltip or popover to Th
, pass a ThInfoType
object via the info
prop.
Repositories | Branches | Pull requests | Workspaces | Last commit | ||
---|---|---|---|---|---|---|
one | two | |||||
one - 2 | ||||||
one - 3 | two - 3 |
Composable: Sortable & wrapping headers
To make a column sortable, pass a ThSortType
object via the sort
prop on a column's Th
.
ThSortType
includes an OnSort
event handler which has the following signature:
type OnSort = (
event: React.MouseEvent,
columnIndex: number,
sortByDirection: SortByDirection,
extraData: IExtraColumnData
) => void;
The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the Sortable - responsive
demo in the React demos
tab.
Branches table header that goes on for a long time. | Workspaces table header that goes on for a long time. | Last commit table header that goes on for a long time. | ||
---|---|---|---|---|
one | two | a | four | five |
a | two | k | four | five |
p | two | b | four | five |
Composable: Sortable - custom control
Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the Sortable - responsive
demo in the React demos
tab.
one | two | a | four | five |
a | two | k | four | five |
p | two | b | four | five |
Composable: Selectable with checkbox
To make a row selectable, the table needs a selection column. The selection column is just another column, but with selection specific props added. We add it as the first header cell and also as the first body cell for each row.
To make a column sortable, pass a ThSelectType
object via the select
prop on a column's Th
.
To make a row sortable, pass a TdSelectType
object via the select
prop on each rows's first Td
.
Both the TdSelectType
and the ThSelectType
expect an OnSelect
event handler with the following signature:
OnSelect:
type OnSelect = (
event: React.FormEvent<HTMLInputElement>,
isSelected: boolean,
rowIndex: number,
rowData: IRowData,
extraData: IExtraData
) => void;
Note: This example has a shift + select
feature where holding shift while
checking checkboxes will check intermediate rows' checkboxes.
Repositories | Branches | Pull requests | Workspaces | Last commit | |
---|---|---|---|---|---|
one | two | a | four | five | |
a | two | k | four | five | |
b | two | k | four | five | |
c | two | k | four | five | |
d | two | k | four | five | |
e | two | b | four | five |
Composable: Selectable radio input
Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props.
Repositories | Branches | Pull requests | Workspaces | Last commit | |
---|---|---|---|---|---|
one | two | a | four | five | |
a | two | k | four | five | |
p | two | b | four | five |
Composable: Row click handler, hoverable & selected rows
This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.
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 |
Composable: Actions
This example demonstrates adding actions as the last column. The header's last cell is an empty cell, and each body row's last cell is an action cell.
To make a cell an action cell, render an ActionsColumn
component inside a row's last Td
and pass an array of IAction
objects via the items
prop of ActionsColumn
.
If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the ActionsColumn
can be passed a menuAppendTo
prop to adjust where the actions menu is appended.
Repositories | Branches | Pull requests | Workspaces | Last commit | ||
---|---|---|---|---|---|---|
one | two | a | four | five | ||
a | two | k | four | five | ||
p | two | b | four | five | ||
4 | 2 | b | four | five | ||
5 | 2 | b | four | five |
Composable: Actions Overflow
Useing an OverflowMenu
in the actions column, allowing the actions to condense into a dropdown if necessary for space.
Repositories | Branches | Pull requests | Workspaces | Last commit | |
---|---|---|---|---|---|
one | two | a | four | five | |
a | two | k | four | five | |
p | two | b | four | five | |
4 | 2 | b | four | five | |
5 | 2 | b | four | five |
Composable: Expandable
To make a parent/child row pair expandable:
- Make the first cell in every row an expandable cell by passing
TdExpandType
object to theexpand
prop on theTd
- Wrap the content of each child row cell in
ExpandableRowContent
. - Enclose each parent/child row pair in a
Tbody
component with anisExpanded
prop.
The TdExpandType
expects an OnCollapse
event handler that has the following signature:
type OnCollapse = (
event: React.MouseEvent,
rowIndex: number,
isOpen: boolean,
rowData: IRowData,
extraData: IExtraData
) => void;
Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.
Repositories | Branches | Pull requests | Workspaces | Last commit | |
---|---|---|---|---|---|
one | two | a | four | five | |
parent 1 | two | k | four | five | |
parent 2 | two | b | four | five | |
parent 3 | 2 | b | four | five | |
parent 4 | 2 | b | four | five | |
parent 5 | 2 | b | four | five | |
parent 6 | 2 | b | four | five | |
Composable: Compound expandable
To make a parent/child row pair compound expandable:
- Pass a
TdCompoundExpandType
object to thecompoundExpand
prop on anyTd
that has an expandable child row - Wrap the content of each child row cell in
ExpandableRowContent
. - Each child
Tr
has anisExpanded
prop.
The TdCompoundExpandType
expects an OnExpand
event handler with the following signature
export type OnExpand = (
event: React.MouseEvent,
rowIndex: number,
colIndex: number,
isOpen: boolean,
rowData: IRowData,
extraData: IExtraData
) => void;
Repositories | Branches | Pull requests | Workspaces | Last commit | |
---|---|---|---|---|---|
siemur/test-space | 20 minutes | Open in GitHub | |||
siemur/test-space-2 | 20 minutes | Open in GitHub |
Composable: Cell width, breakpoint modifiers
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 |
Composable: Controlling text
Truncate (width 20%) | Break word | Wrapping table header text. This th text will wrap instead of truncate. | Fit content | No wrap |
---|---|---|---|---|
This text will truncate instead of wrap. | http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org | By default, | This cell's content will adjust itself to the parent th width. This modifier only affects table layouts. | No wrap |
Composable: Modifiers with table text
Truncating text | Wrapping table header text. This th text will wrap instead of truncate. |
---|---|
This text will truncate instead of wrap. | This is a link that needs to be on one line and fully readable. |
Composable: Empty state
Repositories | Branches | Pull requests | Workspaces | Last commit | |||
---|---|---|---|---|---|---|---|
No results foundClear all filters and try again. |
Composable: Favoritable (implemented with sortable)
To make a row favoritable, the table needs a favoritable column.
Pass a TdFavoritesType
object via the favorites
prop on each rows's first Td
in the favoritable column.
The TdFavoritesType
expects an OnFavorite
event handler with the following signature:
type OnFavorite = (
event: React.MouseEvent,
isFavorited: boolean,
rowIndex: number,
rowData: IRowData,
extraData: IExtraData
) => void;
To make a favoritable column sortable, pass a ThSortType
object to the favoritable column's Th
with isFavorites
set to true.
Repositories | Branches | Pull requests | Workspaces | Last commit | |
---|---|---|---|---|---|
one | two | a | four | five | |
a | two | k | four | five | |
p | two | b | four | five |
Composable: Tree table
To enable a tree table:
Pass the
isTreeTable
prop to theTableComposable
componentUse a
TreeRowWrapper
rather thanTr
Pass the following
props
to each row (both theTreeRowWrapper
and thetreeRow
in the first column):isExpanded
- Flag indicating the node is expanded and its children are visibleisDetailsExpanded
- (optional) Flag indicating the row's details are visible in responsive viewisHidden
- Flag indicating the node's parent is expanded and this node is visiblearia-level
- number representing how many levels deep this node is nestedaria-posinset
- number representing where in the order this node sits amongst its siblingsaria-setsize
- number representing the number of children this node hasisChecked
- (optional) if this row uses checkboxes, flag indicating the checkbox checkedicon
- (optional) ReactNode icon to display before the row titletoggleAriaLabel
- (optional) accessible label for the expand/collapse children rows toggle arrowcheckAriaLabel
- (optional) accessible label for the checkboxshowDetailsAriaLabel
- (optional) accessible label for the show row details button in the responsive view
The first
Td
in each row will pass the following to thetreeRow
prop:onCollapse
- Callback when user expands/collapses a row to reveal/hide the row's children.onCheckChange
- (optional) Callback when user changes the checkbox on a row.onToggleRowDetails
- (optional) Callback when user shows/hides the row details in responsive view.props
- (as defined above)rowIndex
- number representing the index of the row
Note: If this table is going to be tested using axe-core, the tests will flag the use of aria-level, aria-posinset, and aria-setsize as violations. This is an intentional choice at this time so that the voice over technologies will recognize the flat table structure as a tree.
Repositories | Branches | Pull requests | Workspaces |
---|---|---|---|
Repositories one | Branch one | Pull request one | Workplace one |
Repositories two | Branch two | Pull request two | Workplace two |
Repositories three | Branch three | Pull request three | Workplace three |
Repositories four | Branch four | Pull request four | Workplace four |
Repositories five | Branch five | Pull request five | Workplace five |
Repositories six | Branch six | Pull request six | Workplace six |
Repositories seven | Branch seven | Pull request seven | Workplace seven |
Repositories eight | Branch eight | Pull request eight | Workplace eight |
Repositories nine | Branch nine | Pull request nine | Workplace nine |
Beta
Composable: Draggable row tableTo make a row draggable:
- The table needs a draggable column.
- Each draggable
Tr
needs to be passeddraggable
,onDrop
,onDragEnd
, andonDragStart
props. - The
Tbody
needsonDragOver
,onDrop
, andonDragLeave
props. - While the user is dragging a row, the
pf-m-drag-over
class needs to be applied toTableComposable
. - The draggable
Td
in each row needs aTdDraggableType
object passed to itsdraggable
prop.
Repositories | Branches | Pull requests | Workspaces | Last commit | ||
---|---|---|---|---|---|---|
row1 | one | two | three | four | five | |
row2 | one -2 | four -2 | five -2 | |||
row3 | one - 3 | two - 3 | three - 3 | four - 3 | five - 3 |
Sticky table modifiers
To make certain columns and the header sticky, the table must be wrapped in a combination of OuterScrollContainer
and InnerScrollContainer
. For sticky columns, only InnerScrollContainer
is required. For sticky headers, and sticky headers with sticky columns, both containers are required to ensure the sticky behavior behaves correctly.
Note: Sticky table headers and columns have a higher z-index
than the z-index
used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.
There are a few ways this can be handled:
- Manipulate the
z-index
of the menu and/or table headers/columns manually. - Use the
menuAppendTo
prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the table's parent element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table. - In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower
z-index
than thez-index
of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
Composable: Sticky column
To make a column sticky, wrap TableComposable
with InnerScrollContainer
and add the following properties to the Th
or Td
that should be sticky: isStickyColumn
and hasRightBorder
. To prevent the default text wrapping behavior and allow horizontal scrolling, all Th
or Td
cells should also have the modifier="nowrap"
property. To set the minimum width of the sticky column, use the stickyMinWidth
property.
Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | ||
---|---|---|---|---|---|---|---|---|
Fact 1 | State 1 | Test cell 1-3 | Test cell 1-4 | Test cell 1-5 | Test cell 1-6 | Test cell 1-7 | Test cell 1-8 | Test cell 1-9 |
Fact 2 | State 2 | Test cell 2-3 | Test cell 2-4 | Test cell 2-5 | Test cell 2-6 | Test cell 2-7 | Test cell 2-8 | Test cell 2-9 |
Fact 3 | State 3 | Test cell 3-3 | Test cell 3-4 | Test cell 3-5 | Test cell 3-6 | Test cell 3-7 | Test cell 3-8 | Test cell 3-9 |
Fact 4 | State 4 | Test cell 4-3 | Test cell 4-4 | Test cell 4-5 | Test cell 4-6 | Test cell 4-7 | Test cell 4-8 | Test cell 4-9 |
Fact 5 | State 5 | Test cell 5-3 | Test cell 5-4 | Test cell 5-5 | Test cell 5-6 | Test cell 5-7 | Test cell 5-8 | Test cell 5-9 |
Fact 6 | State 6 | Test cell 6-3 | Test cell 6-4 | Test cell 6-5 | Test cell 6-6 | Test cell 6-7 | Test cell 6-8 | Test cell 6-9 |
Fact 7 | State 7 | Test cell 7-3 | Test cell 7-4 | Test cell 7-5 | Test cell 7-6 | Test cell 7-7 | Test cell 7-8 | Test cell 7-9 |
Fact 8 | State 8 | Test cell 8-3 | Test cell 8-4 | Test cell 8-5 | Test cell 8-6 | Test cell 8-7 | Test cell 8-8 | Test cell 8-9 |
Fact 9 | State 9 | Test cell 9-3 | Test cell 9-4 | Test cell 9-5 | Test cell 9-6 | Test cell 9-7 | Test cell 9-8 | Test cell 9-9 |
Composable: Multiple left-aligned sticky columns
To make multiple left-aligned columns sticky:
- wrap
TableComposable
withInnerScrollContainer
- add
isStickyColumn
to all columns that should be sticky - add
hasRightBorder
to the rightmost sticky column - add
stickyLeftOffset
to each sticky column after the first, with a value that equals the combined width - set bystickyMindWidth
- of the previous sticky columns
To prevent the default text wrapping behavior and allow horizontal scrolling, all Th
or Td
cells should also have the modifier="nowrap"
property.
Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | ||
---|---|---|---|---|---|---|---|---|
Fact 1 | State 1 | Test cell 1-3 | Test cell 1-4 | Test cell 1-5 | Test cell 1-6 | Test cell 1-7 | Test cell 1-8 | Test cell 1-9 |
Fact 2 | State 2 | Test cell 2-3 | Test cell 2-4 | Test cell 2-5 | Test cell 2-6 | Test cell 2-7 | Test cell 2-8 | Test cell 2-9 |
Fact 3 | State 3 | Test cell 3-3 | Test cell 3-4 | Test cell 3-5 | Test cell 3-6 | Test cell 3-7 | Test cell 3-8 | Test cell 3-9 |
Fact 4 | State 4 | Test cell 4-3 | Test cell 4-4 | Test cell 4-5 | Test cell 4-6 | Test cell 4-7 | Test cell 4-8 | Test cell 4-9 |
Fact 5 | State 5 | Test cell 5-3 | Test cell 5-4 | Test cell 5-5 | Test cell 5-6 | Test cell 5-7 | Test cell 5-8 | Test cell 5-9 |
Fact 6 | State 6 | Test cell 6-3 | Test cell 6-4 | Test cell 6-5 | Test cell 6-6 | Test cell 6-7 | Test cell 6-8 | Test cell 6-9 |
Fact 7 | State 7 | Test cell 7-3 | Test cell 7-4 | Test cell 7-5 | Test cell 7-6 | Test cell 7-7 | Test cell 7-8 | Test cell 7-9 |
Fact 8 | State 8 | Test cell 8-3 | Test cell 8-4 | Test cell 8-5 | Test cell 8-6 | Test cell 8-7 | Test cell 8-8 | Test cell 8-9 |
Fact 9 | State 9 | Test cell 9-3 | Test cell 9-4 | Test cell 9-5 | Test cell 9-6 | Test cell 9-7 | Test cell 9-8 | Test cell 9-9 |
Composable: Multiple right-aligned sticky columns
To make multiple right-aligned columns sticky:
- wrap
TableComposable
withInnerScrollContainer
- add
isStickyColumn
to all columns that should be sticky - add
hasLeftBorder
to the leftmost sticky column - add
stickyRightOffset
to each sticky column preceding the last, with a value that equals the combined width - set bystickyMindWidth
- of the next sticky columns
To prevent the default text wrapping behavior and allow horizontal scrolling, all Th
or Td
cells should also have the modifier="nowrap"
property.
Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | ||
---|---|---|---|---|---|---|---|---|
Fact 1 | State 1 | Test cell 1-3 | Test cell 1-4 | Test cell 1-5 | Test cell 1-6 | Test cell 1-7 | Test cell 1-8 | Test cell 1-9 |
Fact 2 | State 2 | Test cell 2-3 | Test cell 2-4 | Test cell 2-5 | Test cell 2-6 | Test cell 2-7 | Test cell 2-8 | Test cell 2-9 |
Fact 3 | State 3 | Test cell 3-3 | Test cell 3-4 | Test cell 3-5 | Test cell 3-6 | Test cell 3-7 | Test cell 3-8 | Test cell 3-9 |
Fact 4 | State 4 | Test cell 4-3 | Test cell 4-4 | Test cell 4-5 | Test cell 4-6 | Test cell 4-7 | Test cell 4-8 | Test cell 4-9 |
Fact 5 | State 5 | Test cell 5-3 | Test cell 5-4 | Test cell 5-5 | Test cell 5-6 | Test cell 5-7 | Test cell 5-8 | Test cell 5-9 |
Fact 6 | State 6 | Test cell 6-3 | Test cell 6-4 | Test cell 6-5 | Test cell 6-6 | Test cell 6-7 | Test cell 6-8 | Test cell 6-9 |
Fact 7 | State 7 | Test cell 7-3 | Test cell 7-4 | Test cell 7-5 | Test cell 7-6 | Test cell 7-7 | Test cell 7-8 | Test cell 7-9 |
Fact 8 | State 8 | Test cell 8-3 | Test cell 8-4 | Test cell 8-5 | Test cell 8-6 | Test cell 8-7 | Test cell 8-8 | Test cell 8-9 |
Fact 9 | State 9 | Test cell 9-3 | Test cell 9-4 | Test cell 9-5 | Test cell 9-6 | Test cell 9-7 | Test cell 9-8 | Test cell 9-9 |
Composable: Sticky columns and header
To maintain proper sticky behavior across sticky columns and header, TableComposable
must be wrapped with OuterScrollContainer
and InnerScrollContainer
.
Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 | Header 9 | ||
---|---|---|---|---|---|---|---|---|
Fact 1 | State 1 | Test cell 1-3 | Test cell 1-4 | Test cell 1-5 | Test cell 1-6 | Test cell 1-7 | Test cell 1-8 | Test cell 1-9 |
Fact 2 | State 2 | Test cell 2-3 | Test cell 2-4 | Test cell 2-5 | Test cell 2-6 | Test cell 2-7 | Test cell 2-8 | Test cell 2-9 |
Fact 3 | State 3 | Test cell 3-3 | Test cell 3-4 | Test cell 3-5 | Test cell 3-6 | Test cell 3-7 | Test cell 3-8 | Test cell 3-9 |
Fact 4 | State 4 | Test cell 4-3 | Test cell 4-4 | Test cell 4-5 | Test cell 4-6 | Test cell 4-7 | Test cell 4-8 | Test cell 4-9 |
Fact 5 | State 5 | Test cell 5-3 | Test cell 5-4 | Test cell 5-5 | Test cell 5-6 | Test cell 5-7 | Test cell 5-8 | Test cell 5-9 |
Fact 6 | State 6 | Test cell 6-3 | Test cell 6-4 | Test cell 6-5 | Test cell 6-6 | Test cell 6-7 | Test cell 6-8 | Test cell 6-9 |
Fact 7 | State 7 | Test cell 7-3 | Test cell 7-4 | Test cell 7-5 | Test cell 7-6 | Test cell 7-7 | Test cell 7-8 | Test cell 7-9 |
Fact 8 | State 8 | Test cell 8-3 | Test cell 8-4 | Test cell 8-5 | Test cell 8-6 | Test cell 8-7 | Test cell 8-8 | Test cell 8-9 |
Fact 9 | State 9 | Test cell 9-3 | Test cell 9-4 | Test cell 9-5 | Test cell 9-6 | Test cell 9-7 | Test cell 9-8 | Test cell 9-9 |
Nested column headers
To make a nested column header:
- Wrap
TableComposable
withInnerScrollContainer
. - Pass
nestedHeaderColumnSpans
toTableComposable
.nestedHeaderColumnSpans
is an array of numbers representing the column spans of the top level columns toTableComposable
, where each number is equal to the number of sub columns for a column, or1
if a column contains no sub columns. - Pass
hasNestedHeader
toThead
. - Pass two
Tr
as children ofThead
.
The first Tr
represents the top level of columns, and each must pass either rowSpan
if the column does not contain sub columns or colSpan
if the column contains sub columns. The value of rowSpan
is equal to the number of rows the nested header will span, typically 2
, and the value of colSpan
is equal to the number of sub columns in a column. Each Th
except the last should also pass hasRightBorder
.
The second Tr
represents the second level of sub columns. The Th
in this row each should pass isSubHeader
, and the last sub column of a column should also pass hasRightBorder
.
Composable: Nested column headers
Pods | Ports | |||||||
---|---|---|---|---|---|---|---|---|
api-pod-source-name | api-pod-destination-name | Tue Jun 22 2021 7:58:24 PM | 443 (HTTPS) | 24 (SMTP) | TCP | 1.9 Kbps | 2.1 KB | 3 |
api-pod-source2-name | api-pod-destination2-name | Tue Jun 22 2021 9:42:01 PM | 80 (HTTP) | 24 (SMTP) | UDP | 3.4 Kbps | 6.1 KB | 7 |
Composable: Nested column headers and expandable rows
Team | Members | Contact | |||
---|---|---|---|---|---|
Design Lead | Interaction Designer | Visual Designer | |||
Developer program 1 | Person 1 | Person 2 | Person 3 | Email team 0 | |
Developer program 2 | Person A | Person B | Person C | Email team 1 | |
Developer program 3 | Person X | Person Y | Person Z | Email team 2 | |
Composable: Expandable with nested table
Composable: Nested sticky header
Pods | Ports | |||||||
---|---|---|---|---|---|---|---|---|
api-pod-source-name | api-pod-destination-name | Tue Jun 22 2021 7:58:24 PM | 443 (HTTPS) | 24 (SMTP) | TCP | 1.9 Kbps | 2.1 KB | 3 |
api-pod-source2-name | api-pod-destination2-name | Tue Jun 22 2021 9:42:01 PM | 80 (HTTP) | 24 (SMTP) | UDP | 3.4 Kbps | 6.1 KB | 7 |
Striped
Composable: Striped
To apply striping to a basic table, add the isStriped
property to TableComposable
.
Repositories | Branches | Pull requests | Workspaces | Last commit |
---|---|---|---|---|
Repository 1 | 10 | 25 | 5 | 2 days ago |
Repository 2 | 10 | 25 | 5 | 2 days ago |
Repository 3 | 10 | 25 | 5 | 2 days ago |
Repository 4 | 10 | 25 | 5 | 2 days ago |
Composable: Striped expandable
To apply striping to an expandable table, add the isStriped
and isExpandable
properties to TableComposable
.
Repositories | Branches | Pull requests | Workspaces | Last commit | ||
---|---|---|---|---|---|---|
one | two | a | four | five | ||
parent 1 | two | k | four | five | ||
parent 2 | two | b | four | five | ||
parent 3 | 2 | b | four | five | ||
parent 4 | 2 | b | four | five | ||
parent 5 | 2 | b | four | five | ||
parent 6 | 2 | b | four | five | ||
Composable: Striped multiple tobdy
When there are multiple Tbody
components within a table, a more granular application of striping may be controlled by adding either the isEvenStriped
or isOddStriped
properties to Tbody
. These properties will stripe even or odd rows within that Tbody
respectively.
Repositories | Branches | Pull requests | Workspaces | Last commit |
---|---|---|---|---|
tbody 1 - Repository 1 (odd rows striped) | 10 | 25 | 5 | 2 days ago |
tbody 1 - Repository 2 | 10 | 25 | 5 | 2 days ago |
tbody 1 - Repository 3 (odd rows striped) | 10 | 25 | 5 | 2 days ago |
tbody 2 - Repository 4 | 10 | 25 | 5 | 2 days ago |
tbody 2 - Repository 5 (even rows striped) | 10 | 25 | 5 | 2 days ago |
tbody 2 - Repository 6 | 10 | 25 | 5 | 2 days ago |
tbody 2 - Repository 7 (even rows striped) | 10 | 25 | 5 | 2 days ago |
Composable: Striped tr
To manually control striping, add the isStriped
property to each desired Tr
. This replaces adding the isStriped
property to TableComposable
.
Repositories | Branches | Pull requests | Workspaces | Last commit |
---|---|---|---|---|
Repository 1 | 10 | 25 | 5 | 2 days ago |
Repository 2 | 10 | 25 | 5 | 2 days ago |
Repository 3 | 10 | 25 | 5 | 2 days ago |
Repository 4 | 10 | 25 | 5 | 2 days ago |
Props
TableComposable
Name | Type | Default | Description |
---|---|---|---|
aria-label | string | Adds an accessible name for the Table | |
borders | boolean | Render borders | |
children | React.ReactNode | Content rendered inside the Table | |
className | string | Additional classes added to the Table | |
gridBreakPoint | '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl' | Specifies the grid breakpoints | |
hasSelectableRowCaption | boolean | Flag to apply a caption element with visually hidden instructions that improves a11y for tables with selectable rows. If this prop is set to true other caption elements should not be passed as children of this table, and you should instead use the selectableRowCaptionText prop. | |
innerRef | React.RefObject<any> | Forwarded ref | |
isExpandable | boolean | Flag indicating this table contains expandable rows to maintain proper striping | |
isNested | boolean | Flag indicating this table is nested within another table | |
isStickyHeader | boolean | If set to true, the table header sticks to the top of its container | |
isStriped | boolean | Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components. | |
isTreeTable | boolean | Flag indicating table is a tree table | |
nestedHeaderColumnSpans | number[] | Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584 | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
role | string | A valid WAI-ARIA role to be applied to the table element | |
selectableRowCaptionText | string | Visible text to add alongside the hidden a11y caption for tables with selectable rows. This prop must be used to add custom caption content to the table when the hasSelectableRowCaption prop is set to true. | |
variant | TableVariant | 'compact' | Style variant for the Table compact: Reduces spacing and makes the table more compact |
Thead
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the <thead> row group | |
className | string | Additional classes added to the <thead> element | |
hasNestedHeader | boolean | Indicates the <thead> contains a nested header | |
innerRef | React.Ref<any> | Forwarded ref | |
noWrap | boolean | Won't wrap the table head if true |
Tbody
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the <tbody> row group | |
className | string | Additional classes added to the <tbody> element | |
innerRef | React.Ref<any> | Forwarded ref | |
isEvenStriped | boolean | Flag indicating the <tbody> contains evenly striped rows. | |
isExpanded | boolean | Modifies the body to allow for expandable rows | |
isOddStriped | boolean | Flag indicating the <tbody> contains oddly striped rows. |
Tr
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the <tr> row | |
className | string | Additional classes added to the <tr> row | |
innerRef | React.Ref<any> | Forwarded ref | |
isBorderRow | boolean | Flag indicating the row will act as a border. This is typically used for a table with a nested and sticky header. | |
isEditable | boolean | Only applicable to Tr within the Tbody: Whether the row is editable | |
isExpanded | boolean | Only applicable to Tr within the Tbody: Makes the row expandable and determines if it's expanded or not. To prevent column widths from responding automatically when expandable rows are toggled, the width prop must also be passed into either the th or td component | |
isHidden | boolean | Flag indicating the Tr is hidden | |
isHoverable | boolean | Flag which adds hover styles for the table row | |
isRowSelected | boolean | Flag indicating the row is selected - adds selected styling | |
isSelectable | boolean | Flag indicating that the row is selectable | |
isStriped | boolean | Flag indicating the row is striped | |
onRowClick | (event?: React.KeyboardEvent | React.MouseEvent) => void | An event handler for the row | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
resetOffset | boolean | Flag indicating the spacing offset of the first cell should be reset |
Th
Name | Type | Default | Description |
---|---|---|---|
dataLabel | string | The column header the cell corresponds to. Applicable when this component is used as a direct child to <Tr>. This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element. | |
expand | ThExpandType | Renders a chevron so that all row chevrons can be expanded/collapsed | |
hasLeftBorder | boolean | Adds a border to the left side of the cell | |
hasRightBorder | boolean | Adds a border to the right side of the cell | |
info | ThInfoType | Adds tooltip/popover info button | |
isStickyColumn | boolean | Indicates the header column should be sticky | |
isSubheader | boolean | Indicates the <th> is part of a subheader of a nested header | |
onMouseEnter | (event: any) => void | Callback on mouse enter | |
scope | string | Adds scope to the column to associate header cells with data cells | |
select | ThSelectType | Renders a checkbox select so that all row checkboxes can be selected/deselected | |
sort | ThSortType | Formats the header so that its column will be sortable | |
stickyLeftOffset | string | Left offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that precede the current sticky column. | |
stickyMinWidth | string | Minimum width for a sticky column | |
stickyRightOffset | string | Right offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that come after the current sticky column. | |
tooltip | React.ReactNode | Tooltip to show on the header cell. Note: If the header cell is truncated and has simple string content, it will already attempt to display the header text. If you want to show a tooltip that differs from the header text, you can set it here. To disable it completely you can set it to null. |
Td
Name | Type | Default | Description |
---|---|---|---|
actions | TdActionsType | Turns the cell into an actions cell. Recommended to use an ActionsColumn component as a child of the Td rather than this prop. | |
compoundExpand | TdCompoundExpandType | Turns the cell into a compound expansion toggle | |
dataLabel | string | The column header the cell corresponds to. This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element. | |
draggableRow | TdDraggableType | Turns the cell into the first cell in a draggable row | |
expand | TdExpandType | Turns the cell into an expansion toggle and determines if the corresponding expansion row is open | |
favorites | TdFavoritesType | Turns the cell into a favorites cell with a star button | |
hasLeftBorder | boolean | Adds a border to the left side of the cell | |
hasRightBorder | boolean | Adds a border to the right side of the cell | |
isActionCell | boolean | Applies pf-c-table__action to td | |
isStickyColumn | boolean | Indicates the column should be sticky | |
noPadding | boolean | True to remove padding | |
onMouseEnter | (event: any) => void | Callback on mouse enter | |
select | TdSelectType | Renders a checkbox or radio select | |
stickyLeftOffset | string | Left offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that precede the current sticky column. | |
stickyMinWidth | string | Minimum width for a sticky column | |
stickyRightOffset | string | Right offset of a sticky column. This will typically be equal to the combined value set by stickyMinWidth of any sticky columns that come after the current sticky column. | |
tooltip | React.ReactNode | Tooltip to show on the body cell. Note: If the body cell is truncated and has simple string content, it will already attempt to display the cell text. If you want to show a tooltip that differs from the cell text, you can set it here. To disable it completely you can set it to null. | |
treeRow | TdTreeRowType | Turns the cell into the first cell in a tree table row |
Caption
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the caption | |
className | string | Additional classes added to the caption |
TableText
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | null | Content rendered within the table text |
className | string | '' | Additional classes added to the table text |
onMouseEnter | (event: any) => void | () => {} | callback used to create the tooltip if text is truncated |
tooltip | string | '' | text to display on the tooltip |
tooltipProps | Omit<TooltipProps, 'content'> | {} | other props to pass to the tooltip |
variant | TableTextVariant | 'span' | 'div' | 'span' | Determines which element to render as a table text |
wrapModifier | WrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent' | null | Determines which wrapping modifier to apply to the table text |
TdActionsType
Name | Type | Default | Description |
---|---|---|---|
itemsrequired | IActions | Cell actions | |
actionsToggle | (props: CustomActionsToggleProps) => React.ReactNode | Custom toggle for the actions menu | |
disable | boolean | Whether to disable the actions | |
dropdownDirection | DropdownDirection | Actions dropdown direction | |
dropdownPosition | DropdownPosition | Actions dropdown position | |
menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | The container to append the dropdown menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')} | |
rowIndex | number | The row index |
TdSelectType
Name | Type | Default | Description |
---|---|---|---|
isSelectedrequired | boolean | Whether the cell is selected | |
rowIndexrequired | number | The row index | |
disable | boolean | Whether to disable the selection | |
onSelect | OnSelect | Callback on select | |
props | any | Additional props forwarded to select rowData | |
variant | 'checkbox' | 'radio' | The selectable variant |
ThSelectType
Name | Type | Default | Description |
---|---|---|---|
isSelectedrequired | boolean | Whether the cell is selected | |
isDisabled | boolean | Whether to disable the selection | |
isHeaderSelectDisabled | boolean | Flag indicating the select checkbox in the th is disabled | |
onSelect | OnSelect | Callback on select | |
props | any | Additional props forwarded to select rowData |
TdTreeRowType
Name | Type | Default | Description |
---|---|---|---|
onCollapserequired | OnTreeRowCollapse | Callback when user expands/collapses a row to reveal/hide the row's children | |
onCheckChange | OnCheckChange | (optional) Callback when user changes the checkbox on a row | |
onToggleRowDetails | OnToggleRowDetails | (optional) Callback when user shows/hides the row details in responsive view. | |
props | any | Additional props forwarded to the title cell of the tree row | |
rowIndex | number | The row index |
ActionsColumn
Name | Type | Default | Description |
---|---|---|---|
actionsToggle | (props: CustomActionsToggleProps) => React.ReactNode | ||
children | React.ReactNode | null | |
dropdownDirection | DropdownDirection | DropdownDirection.down | |
dropdownPosition | DropdownPosition | DropdownPosition.right | |
extraData | IExtraData | {} | |
isDisabled | boolean | ||
items | IAction[] | [] | |
menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | 'inline' | |
rowData | IRowData | {} |
TdCompoundExpandType
Name | Type | Default | Description |
---|---|---|---|
isExpandedrequired | boolean | determines if the corresponding expansion row is open | |
columnIndex | number | The column index | |
expandId | string | Id prefix for expandable cells * | |
onToggle | OnExpand | Callback on toggling of the expansion | |
rowIndex | number | The row index |
TdFavoritesType
Name | Type | Default | Description |
---|---|---|---|
isFavoritedrequired | boolean | Whether the corresponding row is favorited | |
onFavorite | OnFavorite | Callback on clicking the favorites button | |
props | any | Additional props forwarded to the FavoritesCell | |
rowIndex | number | The row index |
TdDraggableType
Name | Type | Default | Description |
---|---|---|---|
idrequired | string | Id of the draggable row |
ThInfoType
Name | Type | Default | Description |
---|---|---|---|
ariaLabel | string | ||
className | string | ||
popover | React.ReactNode | ||
popoverProps | Omit<PopoverProps, 'bodyContent'> | ||
tooltip | React.ReactNode | ||
tooltipProps | Omit<TooltipProps, 'content'> |
TdExpandType
Name | Type | Default | Description |
---|---|---|---|
isExpandedrequired | boolean | Flag indicating the child row associated with this cell is expanded | |
rowIndexrequired | number | The row index | |
columnIndex | number | The column index | |
expandId | string | Id prefix for expandable rows * | |
onToggle | OnCollapse | On toggling the expansion |
ThExpandType
Name | Type | Default | Description |
---|---|---|---|
areAllExpandedrequired | boolean | Whether all are expanded | |
collapseAllAriaLabelrequired | '' | Alternative aria label | |
onToggle | OnCollapse | On toggling the expansion |
EditableSelectInputCell
Name | Type | Default | Description |
---|---|---|---|
cellIndexrequired | number | Cell index of this select input cell | |
propsrequired | EditableSelectInputProps | Props to build the select component | |
rowIndexrequired | number | Row index of this select input cell | |
clearSelection | (rowIndex: number, cellIndex: number, event?: React.MouseEvent) => void | Event handler which fires when the user clears the selections | |
isDisabled | boolean | Flag indicating the select input is disabled | |
isOpen | boolean | false | Flag indicating the select menu is open |
onSelect | ( newValue: string | SelectOptionObject, event: React.MouseEvent | React.ChangeEvent, rowIndex: number, cellIndex: number, isPlaceholder?: boolean ) => void | () => {} | Event handler which fires when user selects an option in this cell |
onToggle | (isExpanded: boolean) => void | () => {} | Event handler which fires when the select toggle is toggled |
options | React.ReactElement[] | [] | Options to display in the expandable select menu |
selections | string | SelectOptionObject | (string | SelectOptionObject)[] | [''] | Current selected options to display as the read only value of the table cell |
EditableTextCell
Name | Type | Default | Description |
---|---|---|---|
cellIndexrequired | number | Cell index of this text cell | |
handleTextInputChangerequired | ( newValue: string, event: React.FormEvent<HTMLInputElement>, rowIndex: number, cellIndex: number ) => void | Event handler which fires when user changes the text in this cell | |
inputAriaLabelrequired | string | accessible label of the text input | |
propsrequired | EditableTextCellProps | Props to build the input | |
rowIndexrequired | number | Row index of this text cell | |
valuerequired | string | The current value of the text input | |
isDisabled | boolean | false | flag indicating if the text input is disabled |
EditableSelectInputProps
Name | Type | Default | Description |
---|---|---|---|
[key: string]required | any | arbitrary data to pass to the internal select component in the editable select input cell | |
isSelectOpenrequired | boolean | Flag controlling isOpen state of select | |
namerequired | string | Name of the select input | |
optionsrequired | React.ReactElement[] | Array of react elements to display in the select menu | |
selectedrequired | string | SelectOptionObject | (string | SelectOptionObject)[] | String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections | |
valuerequired | string | string[] | Value to display in the cell | |
editableSelectProps | SelectProps | Props to be passed down to the Select component |
EditableTextCellProps
Name | Type | Default | Description |
---|---|---|---|
[key: string]required | any | arbitrary data to pass to the internal text input in the editable text cell | |
namerequired | string | Name of the input | |
valuerequired | string | Value to display in the cell |
ThSortType
Name | Type | Default | Description |
---|---|---|---|
columnIndexrequired | number | The column index | |
sortByrequired | ISortBy | Provide the currently active column's index and direction | |
isFavorites | boolean | True to make this a favoritable sorting cell | |
onSort | OnSort | Wraps the content in a button and adds a sort icon - Click callback on the sortable cell |
ISortBy
Name | Type | Default | Description |
---|---|---|---|
defaultDirection | 'asc' | 'desc' | Defaulting sorting direction. Defaults to "asc". | |
direction | 'asc' | 'desc' | Current sort direction | |
index | number | Index of the current sorted column |
InnerScrollContainer
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the inner scroll container | |
className | string | Additional classes added to the container |
OuterScrollContainer
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the outer scroll container | |
className | string | Additional classes added to the container |
CSS variables
.pf-c-table | --pf-global--Color--100 | #151515 | ||
.pf-c-table | --pf-global--Color--200 | #6a6e73 | ||
.pf-c-table | --pf-global--BorderColor--100 | #d2d2d2 | ||
.pf-c-table | --pf-global--primary-color--100 | #06c | ||
.pf-c-table | --pf-global--link--Color | #06c | ||
.pf-c-table | --pf-global--link--Color--hover | #004080 | ||
.pf-c-table | --pf-global--BackgroundColor--100 | #fff | ||
.pf-c-table | --pf-c-table--BackgroundColor | #fff | ||
.pf-c-table | --pf-c-table--BorderColor | #d2d2d2 | ||
.pf-c-table | --pf-c-table--border-width--base | 1px | ||
.pf-c-table | --pf-c-table-caption--FontSize | 0.875rem | ||
.pf-c-table | --pf-c-table-caption--Color | #6a6e73 | ||
.pf-c-table | --pf-c-table-caption--PaddingTop | 1rem | ||
.pf-c-table | --pf-c-table-caption--PaddingRight | 1.5rem | ||
.pf-c-table | --pf-c-table-caption--PaddingBottom | 1rem | ||
.pf-c-table | --pf-c-table-caption--PaddingLeft | 1.5rem | ||
.pf-c-table | --pf-c-table-caption--xl--PaddingRight | 1rem | ||
.pf-c-table | --pf-c-table-caption--xl--PaddingLeft | 1rem | ||
.pf-c-table | --pf-c-table--thead--cell--FontSize | 0.875rem | ||
.pf-c-table | --pf-c-table--thead--cell--FontWeight | 700 | ||
.pf-c-table | --pf-c-table--tbody--cell--PaddingTop | 1.5rem | ||
.pf-c-table | --pf-c-table--tbody--cell--PaddingBottom | 1.5rem | ||
.pf-c-table | --pf-c-table--tr--BoxShadow--top--base | 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08) | ||
.pf-c-table | --pf-c-table--cell--Padding--base | 1rem | ||
.pf-c-table | --pf-c-table--cell--FontSize | 1rem | ||
.pf-c-table | --pf-c-table--cell--FontWeight | 400 | ||
.pf-c-table | --pf-c-table--cell--Color | #151515 | ||
.pf-c-table | --pf-c-table--cell--PaddingTop | 1rem | ||
.pf-c-table | --pf-c-table--cell--PaddingRight | 1rem | ||
.pf-c-table |