Table

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

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:

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.

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.

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:

Note: This example has a shift + select feature where holding shift while checking checkboxes will check intermediate rows' checkboxes.

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.

This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.

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.

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

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:

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.

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

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.

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:

To make a favoritable column sortable, pass a ThSortType object to the favoritable column's Th with isFavorites set to true.

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.

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.

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.

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.

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.

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.

To maintain proper sticky behavior across sticky columns and header, Table must be wrapped with OuterScrollContainer and InnerScrollContainer.

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.

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

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

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.

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