Table

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

Note: Table lives in its own package at @patternfly/react-table!

The Table component takes an explicit and declarative approach, and its implementation closely mirrors that of an HTML table.

The documentation for the deprecated table implementation can be found under the React deprecated tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.

Table examples

This Table component differs from the deprecated 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 Table.
  • You can set the Table variant to compact

Basic

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

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

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

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

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

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.

Row selectRepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Row click handler, clickable 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

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 commitPrimary actionSecondary action
onetwoafourfive
atwokfourfive
ptwobfourfive
42bfourfive
52bfourfive

Actions Overflow

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

RepositoriesBranchesPull requestsWorkspacesLast commitActions
onetwoafourfive
atwokfourfive
ptwobfourfive
42bfourfive
52bfourfive

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.

Row expansionRepositoriesBranchesPull 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'

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

Cell width, breakpoint modifiers

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

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

Modifiers with table text

If the "wrapModifier" property is set to "truncate", it's needed to ensure that the corresponding tooltip can be opened using both keyboard and screen reader. Since this particular Td element is generic and doesn't have any predefined decorators, the focus management required to trigger the tooltip needs to be handled manually by defining and manipulating the requisite props.

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.

Empty state

RepositoriesBranchesPull requestsWorkspacesLast commit

No results found

Clear all filters and try again.

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

Tree table

To enable a tree table:

  1. Pass the isTreeTable prop to the Table 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

Flat tree table with no inset

To remove the inset used to leave space for the expand/collapse toggle in a flat tree table, use the hasNoInset prop on the Table component.

RepositoriesBranchesPull requestsWorkspaces

Draggable row table

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 Table.
  5. The draggable Td in each row needs a TdDraggableType object passed to its draggable prop.
Drag and dropRepositoriesBranchesPull requestsWorkspacesLast commit
onetwothreefourfive
one -2four -2five -2
one - 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.

Sticky column

To make a column sticky, wrap Table with InnerScrollContainer and add the following properties to the Th or Td that should be sticky:

  • isStickyColumn
  • hasRightBorder for a left-aligned sticky column, or hasLeftBorder for a right-aligned sticky column.

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. For multiple sticky columns, use the stickyLeftOffset and stickyRightOffset properties for additional left or right sticky columns.

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

Multiple left-aligned sticky columns

To make multiple left-aligned columns sticky:

  • wrap Table with InnerScrollContainer
  • add isStickyColumn to all columns that should be sticky
  • add hasRightBorder to the rightmost sticky column
  • add stickyLeftOffset to each sticky column with a value that equals the combined width - set by stickyMindWidth - of the previous sticky columns. The leftmost sticky column should have a value of 0, which is the default of this property.

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

Multiple right-aligned sticky columns

To make multiple right-aligned columns sticky:

  • wrap Table with InnerScrollContainer
  • add isStickyColumn to all columns that should be sticky
  • add hasLeftBorder to the leftmost sticky column
  • add stickyRightOffset to each sticky column with a value that equals the combined width - set by stickyMindWidth - of the next sticky columns. The rightmost sticky column should have a value of 0, which is the default of this property.

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

Sticky columns and header

To maintain proper sticky behavior across sticky columns and header, Table 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 Table with InnerScrollContainer.
  2. Pass nestedHeaderColumnSpans to Table. nestedHeaderColumnSpans is an array of numbers representing the column spans of the top level columns to Table, 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.

PodsPorts
api-pod-source-nameapi-pod-destination-name
443
(HTTPS)
24
(SMTP)
TCP1.9 Kbps2.1 KB3
api-pod-source2-nameapi-pod-destination2-name
80
(HTTP)
24
(SMTP)
UDP3.4 Kbps6.1 KB7

Nested column headers and expandable rows

Row expansionTeamMembersContact
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

Expandable with nested table

Row expansionRepositoriesBranchesPull 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.

Nested sticky header

PodsPorts
api-pod-source-nameapi-pod-destination-name
443
(HTTPS)
24
(SMTP)
TCP1.9 Kbps2.1 KB3
api-pod-source2-nameapi-pod-destination2-name
80
(HTTP)
24
(SMTP)
UDP3.4 Kbps6.1 KB7

Striped

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

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

Striped expandable

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

Row expansionRepositoriesBranchesPull 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'

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

Striped tr

To manually control striping, add the isStriped property to each desired Tr. This replaces adding the isStriped property to Table.

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

Table

*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
hasNoInsetbooleanFlag indicating this table's rows will not have the inset typically reserved for expanding/collapsing rows in a tree table. Intended for use on tree tables with no visible rows with children.
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.
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
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
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
isBorderRowbooleanFlag indicating the row will act as a border. This is typically used for a table with a nested and sticky header.
isClickablebooleanFlag which adds hover styles for the clickable table row
isControlRowbooleanFlag indicating the row is controlling the expansion of another row.
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
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
aria-labelstringProvides an accessible name to the th. This should only be passed in when the th contains only non-text content, such as a "select all" checkbox or "expand all" toggle.
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
screenReaderTextstringVisually hidden text accessible only via assistive technologies. This must be passed in if the th is intended to be visually empty, and must be conveyed as a column header text.
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.
tooltipPropsOmit<TooltipProps, 'content'>other props to pass to the tooltip

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-v6-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
focusedbooleanfalseDetermines if the TableText is focused by parent component
onMouseEnter(event: any) => void() => {}callback used to create the tooltip if text is truncated
tooltipReact.ReactNode''text to display on the tooltip
tooltipHasDefaultBehaviorbooleanfalseDetermines if tooltip should have normal visbility behavior. If false, the tooltip will only be shown when children is not entirely visible
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
dropdownDirection'up' | 'down'Actions dropdown direction
dropdownPosition'right' | 'left'Actions dropdown position
isDisabledbooleanWhether the actions are disabled
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
isDisabledbooleanWhether the selection is disabled
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
itemsrequiredIAction[]Actions to be rendered within or without the action dropdown
actionsToggle(props: CustomActionsToggleProps) => React.ReactNodeCustom actions toggle for the actions dropdown
extraDataIExtraDataExtra data of a row
firstActionItemRefReact.Ref<HTMLButtonElement>Ref to forward to the first item in the popup menu
isDisabledbooleanIndicates whether the actions dropdown is disabled
isOnOpenChangeDisabledbooleanFlag indicating that the dropdown's onOpenChange callback should not be called.
popperPropsanyAdditional properties for the actions dropdown popper
rowDataIRowDataData of the row the action dropdown is located

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