Basic

Custom row wrapper

Custom row wrappers are passed to the Table component via the rowWrapper prop. Each rowWrapper should return a tr element.

RowWrapperProps:

Sortable & wrapping column headers

To implement sortable columns:

1. Import and apply the sortable transform to the desired column.
2. Pass a managed sortBy prop to the Table component. `sortBy` - Specifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by
3. Pass an onSort callback to the Table component `onSort` - (event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData) => void;

Note: If you want to add a tooltip/popover to a sortable header, in the transforms array the info transform has to precede the sortable transform.

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. The example below showcases how sorting may have a custom control display that can be used for small screen sizes.

Sortable - custom control

Sorting a table may also be controlled with a toolbar. This toolbar item may also be hidden at large screen sizes and only displayed when the screen size is small to support responsive tables.

Selectable with checkbox

To enable row selection, set the onSelect callback prop on the Table.

To control whether a row is selected or not, the Table looks for selected: true | falsy on the row definition.

To disable selection for a row, set disableSelection: true on the row definition.

To include a 'select all' checkbox in the header row, pass true to thecanSelectAll prop on the Table.

Note: this example also demonstrates the use of the headerCol transformation being applied to the first column via the cellTransforms in the column definition. headerCol transforms the column so that instead of using td elements, the cells in that column use th elements.

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

Selectable radio input

To enable row radio selection, set the onSelect callback prop on the Table, and set RowSelectVariant.radio or "radio" as the selectVariant prop on the Table.

To disable selection for a row, set disableSelection: true on the row definition.

Hoverable rows, selectable rows, and header cell tooltips/popovers

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

Actions and first cell in body rows as th

To use actions you can either specify an array of actions and pass that into the Table's actions prop, or for more control you can use the actionResolver callback prop to add actions conditionally.

If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the Table can be passed a actionsMenuAppendTo prop to adjust where the actions menu is appended.

Expandable

To make an exapandable row, define a child row with the parent field set to its parent's row index. The parent row can have an isOpen field for managing the expanded state of the parent row.

Also, pass an onCollapse event handler via the prop on the Table

Compound expandable

To build a compound expandable table:

1. Pass the compoundExpand transformation via the cellTransforms field in the column definition for each column that will have an expanded section.
2. For each expandable parent row, the cells in the expandable columns should:
   1. have a managed isOpen prop passed to the cell definition
   2. have an ariaControls value which matches the id of it’s child row
3. For each expandable child row, the row definition needs:
   1. A parent field set to its parent’s row index
   2. A compoundParent field set to the cell index which will control the expanding/collapsing of this row
4. An onExpand event handler prop should be passed to the Table.

With width and breakpoint visibility modifiers

Controlling text

Modifiers with table text

Empty state

Editable rows

To make a table row editable:

1. Pass a callback to Table via the onRowEdit prop.
2. Define the title for the editable cells using the RowCellContent type function.
3. Have the function return an EditableTextCell.
4. Pass the value and name of the cell's input to the EditableTextCell via the cell's props field, which is defined as being of type EditableTextCellProps.

Example:

Favoritable (implemented with sortable and selectable)

To enable favoriting of a row, set the onFavorite callback prop on the Table.

To control whether a row is favorited or not, the Table looks for favorited: true | falsy on the row definition.

When you also pass a sort callback through the onSort prop, favorites sorting is also enabled.

If you want to exclude favorites from sorting, set canSortFavorites={false} on the Table.

Tree table

To enable a tree table:

1. Pass the isTreeTable prop to the Table component
2. Pass the following props to each row:
   • 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) boolean used 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
3. Use the treeRow cellTransform in the first column of the table. treeRow expects one or two callbacks as params.
   • 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.

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.

Striped

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

Striped expandable

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

Striped custom tr

To manually control striping, use a custom row wrapper that applies the pf-m-striped css class for each desired row.