Skip to content
PatternFly logo

Table

A table is used to display large data sets that can be easily laid out in a simple grid with column headers.

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 the Td 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 a TableComposable.
  • You can set the TableComposable variant to compact

Composable: Basic

Simple table using composable components
RepositoriesBranchesPull requestsWorkspacesLast commit
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 3

Composable: Custom row wrapper, header tooltips & popovers

  • If you add the noWrap prop to Thead, it won't wrap it if there is no space
  • You can add the textCenter prop to Th or Td to center the contents
  • You can pass className, style and more to Tr

To add a header tooltip or popover to Th, pass a ThInfoType object via the info prop.

Repositories
Branches
Pull requests
WorkspacesLast commit
onetwo
one - 2
one - 3two - 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.
onetwoafourfive
atwokfourfive
ptwobfourfive

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.

onetwoafourfive
atwokfourfive
ptwobfourfive

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.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
btwokfourfive
ctwokfourfive
dtwokfourfive
etwobfourfive

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.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive

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.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 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.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive
42bfourfive
52bfourfive

Composable: Actions Overflow

Useing an OverflowMenu in the actions column, allowing the actions to condense into a dropdown if necessary for space.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive
42bfourfive
52bfourfive

Composable: Expandable

To make a parent/child row pair expandable:

  1. Make the first cell in every row an expandable cell by passing TdExpandType object to the expand prop on the Td
  2. Wrap the content of each child row cell in ExpandableRowContent.
  3. Enclose each parent/child row pair in a Tbody component with an isExpanded 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.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
parent 1twokfourfive
single cell
parent 2twobfourfive
Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
parent 32bfourfive
single cell - noPadding
parent 42bfourfive
single cell - fullWidth & noPadding
parent 52bfourfive
spans 'Repositories and 'Branches'
spans 'Pull requests' and 'Workspaces', and 'Last commit'
parent 62bfourfive
fullWidth, spans the collapsible column and 'Repositories'
fullWidth, spans 'Branches' and 'Pull requests'
fullWidth, spans 'Workspaces' and 'Last commit'

Composable: Compound expandable

To make a parent/child row pair compound expandable:

  1. Pass a TdCompoundExpandType object to the compoundExpand prop on any Td that has an expandable child row
  2. Wrap the content of each child row cell in ExpandableRowContent.
  3. Each child Tr has an isExpanded 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;
RepositoriesBranchesPull requestsWorkspacesLast commit
siemur/test-space20 minutesOpen in GitHub
Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
siemur/test-space-220 minutesOpen in GitHub

Composable: Cell width, breakpoint modifiers

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 3

Composable: Controlling text

Truncate (width 20%)Break wordWrapping table header text. This th text will wrap instead of truncate.Fit contentNo wrap
This text will truncate instead of wrap. http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org

By default, thead cells will truncate and tbody cells will wrap. Use .pf-m-wrap on ath to change its behavior.

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 textWrapping 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

RepositoriesBranchesPull requestsWorkspacesLast commit

No results found

Clear 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.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Composable: Tree table

To enable a tree table:

  1. Pass the isTreeTable prop to the TableComposable component

  2. Use a TreeRowWrapper rather than Tr

  3. Pass the following props to each row (both the TreeRowWrapper and the treeRow in the first column):

    • isExpanded - Flag indicating the node is expanded and its children are visible
    • isDetailsExpanded - (optional) Flag indicating the row's details are visible in responsive view
    • isHidden - Flag indicating the node's parent is expanded and this node is visible
    • aria-level - number representing how many levels deep this node is nested
    • aria-posinset - number representing where in the order this node sits amongst its siblings
    • aria-setsize - number representing the number of children this node has
    • isChecked - (optional) if this row uses checkboxes, flag indicating the checkbox checked
    • icon - (optional) ReactNode icon to display before the row title
    • toggleAriaLabel - (optional) accessible label for the expand/collapse children rows toggle arrow
    • checkAriaLabel - (optional) accessible label for the checkbox
    • showDetailsAriaLabel - (optional) accessible label for the show row details button in the responsive view
  4. The first Td in each row will pass the following to the treeRow 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.

RepositoriesBranchesPull requestsWorkspaces
Repositories one
Branch onePull request oneWorkplace one

Composable: Draggable row table Beta

To make a row draggable:

  1. The table needs a draggable column.
  2. Each draggable Tr needs to be passed draggable, onDrop, onDragEnd, and onDragStart props.
  3. The Tbody needs onDragOver, onDrop, and onDragLeave props.
  4. While the user is dragging a row, the pf-m-drag-over class needs to be applied to TableComposable.
  5. The draggable Td in each row needs a TdDraggableType object passed to its draggable prop.
RepositoriesBranchesPull requestsWorkspacesLast commit
row1onetwothreefourfive
row2one -2four -2five -2
row3one - 3two - 3three - 3four - 3five - 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 the z-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 3Header 4Header 5Header 6Header 7Header 8Header 9
Fact 1State 1Test cell 1-3Test cell 1-4Test cell 1-5Test cell 1-6Test cell 1-7Test cell 1-8Test cell 1-9
Fact 2State 2Test cell 2-3Test cell 2-4Test cell 2-5Test cell 2-6Test cell 2-7Test cell 2-8Test cell 2-9
Fact 3State 3Test cell 3-3Test cell 3-4Test cell 3-5Test cell 3-6Test cell 3-7Test cell 3-8Test cell 3-9
Fact 4State 4Test cell 4-3Test cell 4-4Test cell 4-5Test cell 4-6Test cell 4-7Test cell 4-8Test cell 4-9
Fact 5State 5Test cell 5-3Test cell 5-4Test cell 5-5Test cell 5-6Test cell 5-7Test cell 5-8Test cell 5-9
Fact 6State 6Test cell 6-3Test cell 6-4Test cell 6-5Test cell 6-6Test cell 6-7Test cell 6-8Test cell 6-9
Fact 7State 7Test cell 7-3Test cell 7-4Test cell 7-5Test cell 7-6Test cell 7-7Test cell 7-8Test cell 7-9
Fact 8State 8Test cell 8-3Test cell 8-4Test cell 8-5Test cell 8-6Test cell 8-7Test cell 8-8Test cell 8-9
Fact 9State 9Test cell 9-3Test cell 9-4Test cell 9-5Test cell 9-6Test cell 9-7Test cell 9-8Test cell 9-9

Composable: Multiple left-aligned sticky columns

To make multiple left-aligned columns sticky:

  • wrap TableComposable with InnerScrollContainer
  • 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 by stickyMindWidth - 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 3Header 4Header 5Header 6Header 7Header 8Header 9
Fact 1 State 1Test cell 1-3Test cell 1-4Test cell 1-5Test cell 1-6Test cell 1-7Test cell 1-8Test cell 1-9
Fact 2 State 2Test cell 2-3Test cell 2-4Test cell 2-5Test cell 2-6Test cell 2-7Test cell 2-8Test cell 2-9
Fact 3 State 3Test cell 3-3Test cell 3-4Test cell 3-5Test cell 3-6Test cell 3-7Test cell 3-8Test cell 3-9
Fact 4 State 4Test cell 4-3Test cell 4-4Test cell 4-5Test cell 4-6Test cell 4-7Test cell 4-8Test cell 4-9
Fact 5 State 5Test cell 5-3Test cell 5-4Test cell 5-5Test cell 5-6Test cell 5-7Test cell 5-8Test cell 5-9
Fact 6 State 6Test cell 6-3Test cell 6-4Test cell 6-5Test cell 6-6Test cell 6-7Test cell 6-8Test cell 6-9
Fact 7 State 7Test cell 7-3Test cell 7-4Test cell 7-5Test cell 7-6Test cell 7-7Test cell 7-8Test cell 7-9
Fact 8 State 8Test cell 8-3Test cell 8-4Test cell 8-5Test cell 8-6Test cell 8-7Test cell 8-8Test cell 8-9
Fact 9 State 9Test cell 9-3Test cell 9-4Test cell 9-5Test cell 9-6Test cell 9-7Test cell 9-8Test cell 9-9

Composable: Multiple right-aligned sticky columns

To make multiple right-aligned columns sticky:

  • wrap TableComposable with InnerScrollContainer
  • 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 by stickyMindWidth - 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 3Header 4Header 5Header 6Header 7Header 8Header 9
Fact 1State 1Test cell 1-3Test cell 1-4Test cell 1-5Test cell 1-6Test cell 1-7Test cell 1-8Test cell 1-9
Fact 2State 2Test cell 2-3Test cell 2-4Test cell 2-5Test cell 2-6Test cell 2-7Test cell 2-8Test cell 2-9
Fact 3State 3Test cell 3-3Test cell 3-4Test cell 3-5Test cell 3-6Test cell 3-7Test cell 3-8Test cell 3-9
Fact 4State 4Test cell 4-3Test cell 4-4Test cell 4-5Test cell 4-6Test cell 4-7Test cell 4-8Test cell 4-9
Fact 5State 5Test cell 5-3Test cell 5-4Test cell 5-5Test cell 5-6Test cell 5-7Test cell 5-8Test cell 5-9
Fact 6State 6Test cell 6-3Test cell 6-4Test cell 6-5Test cell 6-6Test cell 6-7Test cell 6-8Test cell 6-9
Fact 7State 7Test cell 7-3Test cell 7-4Test cell 7-5Test cell 7-6Test cell 7-7Test cell 7-8Test cell 7-9
Fact 8State 8Test cell 8-3Test cell 8-4Test cell 8-5Test cell 8-6Test cell 8-7Test cell 8-8Test cell 8-9
Fact 9State 9Test cell 9-3Test cell 9-4Test cell 9-5Test cell 9-6Test cell 9-7Test cell 9-8Test 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 3Header 4Header 5Header 6Header 7Header 8Header 9
Fact 1 State 1Test cell 1-3Test cell 1-4Test cell 1-5Test cell 1-6Test cell 1-7Test cell 1-8Test cell 1-9
Fact 2 State 2Test cell 2-3Test cell 2-4Test cell 2-5Test cell 2-6Test cell 2-7Test cell 2-8Test cell 2-9
Fact 3 State 3Test cell 3-3Test cell 3-4Test cell 3-5Test cell 3-6Test cell 3-7Test cell 3-8Test cell 3-9
Fact 4 State 4Test cell 4-3Test cell 4-4Test cell 4-5Test cell 4-6Test cell 4-7Test cell 4-8Test cell 4-9
Fact 5 State 5Test cell 5-3Test cell 5-4Test cell 5-5Test cell 5-6Test cell 5-7Test cell 5-8Test cell 5-9
Fact 6 State 6Test cell 6-3Test cell 6-4Test cell 6-5Test cell 6-6Test cell 6-7Test cell 6-8Test cell 6-9
Fact 7 State 7Test cell 7-3Test cell 7-4Test cell 7-5Test cell 7-6Test cell 7-7Test cell 7-8Test cell 7-9
Fact 8 State 8Test cell 8-3Test cell 8-4Test cell 8-5Test cell 8-6Test cell 8-7Test cell 8-8Test cell 8-9
Fact 9 State 9Test cell 9-3Test cell 9-4Test cell 9-5Test cell 9-6Test cell 9-7Test cell 9-8Test cell 9-9

Nested column headers

To make a nested column header:

  1. Wrap TableComposable with InnerScrollContainer.
  2. Pass nestedHeaderColumnSpans to TableComposable. nestedHeaderColumnSpans is an array of numbers representing the column spans of the top level columns to TableComposable, where each number is equal to the number of sub columns for a column, or 1 if a column contains no sub columns.
  3. Pass hasNestedHeader to Thead.
  4. Pass two Tr as children of Thead.

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

PodsPorts
api-pod-source-nameapi-pod-destination-name
Tue Jun 22 2021 7:58:24 PM
443
(HTTPS)
24
(SMTP)
TCP1.9 Kbps2.1 KB3
api-pod-source2-nameapi-pod-destination2-name
Tue Jun 22 2021 9:42:01 PM
80
(HTTP)
24
(SMTP)
UDP3.4 Kbps6.1 KB7

Composable: Nested column headers and expandable rows

TeamMembersContact
Design LeadInteraction DesignerVisual Designer
Developer program 1Person 1Person 2Person 3 Email team 0
Developer program 2Person APerson BPerson C Email team 1
Developer program 3Person XPerson YPerson Z Email team 2

Composable: Expandable with nested table

RepositoriesBranchesPull requestsLinkAction
Node 1102Link 1
RepositoriesBranchesPull requestsWorkspacesLast commit
Repository 1252552 days ago
Repository 2252552 days ago
Repository 3252552 days ago
Repository 4252552 days ago
Node 234Link 2
Node 3117Link 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Node 4117Link 4
Expandable row content has no padding.

Composable: Nested sticky header

PodsPorts
api-pod-source-nameapi-pod-destination-name
Tue Jun 22 2021 7:58:24 PM
443
(HTTPS)
24
(SMTP)
TCP1.9 Kbps2.1 KB3
api-pod-source2-nameapi-pod-destination2-name
Tue Jun 22 2021 9:42:01 PM
80
(HTTP)
24
(SMTP)
UDP3.4 Kbps6.1 KB7

Striped

Composable: Striped

To apply striping to a basic table, add the isStriped property to TableComposable.

Simple striped table using composable components
RepositoriesBranchesPull requestsWorkspacesLast commit
Repository 1102552 days ago
Repository 2102552 days ago
Repository 3102552 days ago
Repository 4102552 days ago

Composable: Striped expandable

To apply striping to an expandable table, add the isStriped and isExpandable properties to TableComposable.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
parent 1twokfourfive
single cell
parent 2twobfourfive
single cell - fullWidth
parent 32bfourfive
single cell - noPadding
parent 42bfourfive
single cell - fullWidth & noPadding
parent 52bfourfive
spans 'Repositories and 'Branches'
spans 'Pull requests' and 'Workspaces', and 'Last commit'
parent 62bfourfive
fullWidth, spans the collapsible column and 'Repositories'
fullWidth, spans 'Branches' and 'Pull requests'
fullWidth, spans 'Workspaces' and 'Last commit'

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.

Striped table using multiple tbody components
RepositoriesBranchesPull requestsWorkspacesLast commit
tbody 1 - Repository 1
(odd rows striped)
102552 days ago
tbody 1 - Repository 2102552 days ago
tbody 1 - Repository 3
(odd rows striped)
102552 days ago
tbody 2 - Repository 4102552 days ago
tbody 2 - Repository 5
(even rows striped)
102552 days ago
tbody 2 - Repository 6102552 days ago
tbody 2 - Repository 7
(even rows striped)
102552 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.

Manually striped table using composable components
RepositoriesBranchesPull requestsWorkspacesLast commit
Repository 1102552 days ago
Repository 2102552 days ago
Repository 3102552 days ago
Repository 4102552 days ago

Props

TableComposable

*required
NameTypeDefaultDescription
aria-labelstringAdds an accessible name for the Table
bordersbooleanRender borders
childrenReact.ReactNodeContent rendered inside the Table
classNamestringAdditional classes added to the Table
gridBreakPoint'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'Specifies the grid breakpoints
hasSelectableRowCaptionbooleanFlag 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.
innerRefReact.RefObject<any>Forwarded ref
isExpandablebooleanFlag indicating this table contains expandable rows to maintain proper striping
isNestedbooleanFlag indicating this table is nested within another table
isStickyHeaderbooleanIf set to true, the table header sticks to the top of its container
isStripedbooleanFlag 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.
isTreeTablebooleanFlag indicating table is a tree table
nestedHeaderColumnSpansnumber[]Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
rolestringA valid WAI-ARIA role to be applied to the table element
selectableRowCaptionTextstringVisible 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.
variantTableVariant | 'compact'Style variant for the Table compact: Reduces spacing and makes the table more compact

Thead

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the <thead> row group
classNamestringAdditional classes added to the <thead> element
hasNestedHeaderbooleanIndicates the <thead> contains a nested header
innerRefReact.Ref<any>Forwarded ref
noWrapbooleanWon't wrap the table head if true

Tbody

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the <tbody> row group
classNamestringAdditional classes added to the <tbody> element
innerRefReact.Ref<any>Forwarded ref
isEvenStripedbooleanFlag indicating the <tbody> contains evenly striped rows.
isExpandedbooleanModifies the body to allow for expandable rows
isOddStripedbooleanFlag indicating the <tbody> contains oddly striped rows.

Tr

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the <tr> row
classNamestringAdditional classes added to the <tr> row
innerRefReact.Ref<any>Forwarded ref
isBorderRowbooleanFlag indicating the row will act as a border. This is typically used for a table with a nested and sticky header.
isEditablebooleanOnly applicable to Tr within the Tbody: Whether the row is editable
isExpandedbooleanOnly 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
isHiddenbooleanFlag indicating the Tr is hidden
isHoverablebooleanFlag which adds hover styles for the table row
isRowSelectedbooleanFlag indicating the row is selected - adds selected styling
isSelectablebooleanFlag indicating that the row is selectable
isStripedbooleanFlag indicating the row is striped
onRowClick(event?: React.KeyboardEvent | React.MouseEvent) => voidAn event handler for the row
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
resetOffsetbooleanFlag indicating the spacing offset of the first cell should be reset

Th

*required
NameTypeDefaultDescription
dataLabelstringThe 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.
expandThExpandTypeRenders a chevron so that all row chevrons can be expanded/collapsed
hasLeftBorderbooleanAdds a border to the left side of the cell
hasRightBorderbooleanAdds a border to the right side of the cell
infoThInfoTypeAdds tooltip/popover info button
isStickyColumnbooleanIndicates the header column should be sticky
isSubheaderbooleanIndicates the <th> is part of a subheader of a nested header
onMouseEnter(event: any) => voidCallback on mouse enter
scopestringAdds scope to the column to associate header cells with data cells
selectThSelectTypeRenders a checkbox select so that all row checkboxes can be selected/deselected
sortThSortTypeFormats the header so that its column will be sortable
stickyLeftOffsetstringLeft 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.
stickyMinWidthstringMinimum width for a sticky column
stickyRightOffsetstringRight 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.
tooltipReact.ReactNodeTooltip 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

*required
NameTypeDefaultDescription
actionsTdActionsTypeTurns the cell into an actions cell. Recommended to use an ActionsColumn component as a child of the Td rather than this prop.
compoundExpandTdCompoundExpandTypeTurns the cell into a compound expansion toggle
dataLabelstringThe column header the cell corresponds to. This attribute replaces table header in mobile viewport. It is rendered by ::before pseudo element.
draggableRowTdDraggableTypeTurns the cell into the first cell in a draggable row
expandTdExpandTypeTurns the cell into an expansion toggle and determines if the corresponding expansion row is open
favoritesTdFavoritesTypeTurns the cell into a favorites cell with a star button
hasLeftBorderbooleanAdds a border to the left side of the cell
hasRightBorderbooleanAdds a border to the right side of the cell
isActionCellbooleanApplies pf-c-table__action to td
isStickyColumnbooleanIndicates the column should be sticky
noPaddingbooleanTrue to remove padding
onMouseEnter(event: any) => voidCallback on mouse enter
selectTdSelectTypeRenders a checkbox or radio select
stickyLeftOffsetstringLeft 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.
stickyMinWidthstringMinimum width for a sticky column
stickyRightOffsetstringRight 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.
tooltipReact.ReactNodeTooltip 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.
treeRowTdTreeRowTypeTurns the cell into the first cell in a tree table row

Caption

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the caption
classNamestringAdditional classes added to the caption

TableText

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered within the table text
classNamestring''Additional classes added to the table text
onMouseEnter(event: any) => void() => {}callback used to create the tooltip if text is truncated
tooltipstring''text to display on the tooltip
tooltipPropsOmit<TooltipProps, 'content'>{}other props to pass to the tooltip
variantTableTextVariant | 'span' | 'div''span'Determines which element to render as a table text
wrapModifierWrapModifier | 'wrap' | 'nowrap' | 'truncate' | 'breakWord' | 'fitContent'nullDetermines which wrapping modifier to apply to the table text

TdActionsType

*required
NameTypeDefaultDescription
itemsrequiredIActionsCell actions
actionsToggle(props: CustomActionsToggleProps) => React.ReactNodeCustom toggle for the actions menu
disablebooleanWhether to disable the actions
dropdownDirectionDropdownDirectionActions dropdown direction
dropdownPositionDropdownPositionActions dropdown position
menuAppendToHTMLElement | (() => 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')}
rowIndexnumberThe row index

TdSelectType

*required
NameTypeDefaultDescription
isSelectedrequiredbooleanWhether the cell is selected
rowIndexrequirednumberThe row index
disablebooleanWhether to disable the selection
onSelectOnSelectCallback on select
propsanyAdditional props forwarded to select rowData
variant'checkbox' | 'radio'The selectable variant

ThSelectType

*required
NameTypeDefaultDescription
isSelectedrequiredbooleanWhether the cell is selected
isDisabledbooleanWhether to disable the selection
isHeaderSelectDisabledbooleanFlag indicating the select checkbox in the th is disabled
onSelectOnSelectCallback on select
propsanyAdditional props forwarded to select rowData

TdTreeRowType

*required
NameTypeDefaultDescription
onCollapserequiredOnTreeRowCollapseCallback when user expands/collapses a row to reveal/hide the row's children
onCheckChangeOnCheckChange(optional) Callback when user changes the checkbox on a row
onToggleRowDetailsOnToggleRowDetails(optional) Callback when user shows/hides the row details in responsive view.
propsanyAdditional props forwarded to the title cell of the tree row
rowIndexnumberThe row index

ActionsColumn

*required
NameTypeDefaultDescription
actionsToggle(props: CustomActionsToggleProps) => React.ReactNode
childrenReact.ReactNodenull
dropdownDirectionDropdownDirectionDropdownDirection.down
dropdownPositionDropdownPositionDropdownPosition.right
extraDataIExtraData{}
isDisabledboolean
itemsIAction[][]
menuAppendToHTMLElement | (() => HTMLElement) | 'inline' | 'parent''inline'
rowDataIRowData{}

TdCompoundExpandType

*required
NameTypeDefaultDescription
isExpandedrequiredbooleandetermines if the corresponding expansion row is open
columnIndexnumberThe column index
expandIdstringId prefix for expandable cells *
onToggleOnExpandCallback on toggling of the expansion
rowIndexnumberThe row index

TdFavoritesType

*required
NameTypeDefaultDescription
isFavoritedrequiredbooleanWhether the corresponding row is favorited
onFavoriteOnFavoriteCallback on clicking the favorites button
propsanyAdditional props forwarded to the FavoritesCell
rowIndexnumberThe row index

TdDraggableType

*required
NameTypeDefaultDescription
idrequiredstringId of the draggable row

ThInfoType

*required
NameTypeDefaultDescription
ariaLabelstring
classNamestring
popoverReact.ReactNode
popoverPropsOmit<PopoverProps, 'bodyContent'>
tooltipReact.ReactNode
tooltipPropsOmit<TooltipProps, 'content'>

TdExpandType

*required
NameTypeDefaultDescription
isExpandedrequiredbooleanFlag indicating the child row associated with this cell is expanded
rowIndexrequirednumberThe row index
columnIndexnumberThe column index
expandIdstringId prefix for expandable rows *
onToggleOnCollapseOn toggling the expansion

ThExpandType

*required
NameTypeDefaultDescription
areAllExpandedrequiredbooleanWhether all are expanded
collapseAllAriaLabelrequired''Alternative aria label
onToggleOnCollapseOn toggling the expansion

EditableSelectInputCell

*required
NameTypeDefaultDescription
cellIndexrequirednumberCell index of this select input cell
propsrequiredEditableSelectInputPropsProps to build the select component
rowIndexrequirednumberRow index of this select input cell
clearSelection(rowIndex: number, cellIndex: number, event?: React.MouseEvent) => voidEvent handler which fires when the user clears the selections
isDisabledbooleanFlag indicating the select input is disabled
isOpenbooleanfalseFlag 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
optionsReact.ReactElement[][]Options to display in the expandable select menu
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[]['']Current selected options to display as the read only value of the table cell

EditableTextCell

*required
NameTypeDefaultDescription
cellIndexrequirednumberCell index of this text cell
handleTextInputChangerequired( newValue: string, event: React.FormEvent<HTMLInputElement>, rowIndex: number, cellIndex: number ) => voidEvent handler which fires when user changes the text in this cell
inputAriaLabelrequiredstringaccessible label of the text input
propsrequiredEditableTextCellPropsProps to build the input
rowIndexrequirednumberRow index of this text cell
valuerequiredstringThe current value of the text input
isDisabledbooleanfalseflag indicating if the text input is disabled

EditableSelectInputProps

*required
NameTypeDefaultDescription
[key: string]requiredanyarbitrary data to pass to the internal select component in the editable select input cell
isSelectOpenrequiredbooleanFlag controlling isOpen state of select
namerequiredstringName of the select input
optionsrequiredReact.ReactElement[]Array of react elements to display in the select menu
selectedrequiredstring | SelectOptionObject | (string | SelectOptionObject)[]String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections
valuerequiredstring | string[]Value to display in the cell
editableSelectPropsSelectPropsProps to be passed down to the Select component

EditableTextCellProps

*required
NameTypeDefaultDescription
[key: string]requiredanyarbitrary data to pass to the internal text input in the editable text cell
namerequiredstringName of the input
valuerequiredstringValue to display in the cell

ThSortType

*required
NameTypeDefaultDescription
columnIndexrequirednumberThe column index
sortByrequiredISortByProvide the currently active column's index and direction
isFavoritesbooleanTrue to make this a favoritable sorting cell
onSortOnSortWraps the content in a button and adds a sort icon - Click callback on the sortable cell

ISortBy

*required
NameTypeDefaultDescription
defaultDirection'asc' | 'desc'Defaulting sorting direction. Defaults to "asc".
direction'asc' | 'desc'Current sort direction
indexnumberIndex of the current sorted column

InnerScrollContainer

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the inner scroll container
classNamestringAdditional classes added to the container

OuterScrollContainer

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the outer scroll container
classNamestringAdditional 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