PatternFly

Table

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

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

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

This implementation of Table has been deprecated. It is no longer supported or maintained.

This deprecated Table component 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 Columns

Array items for columns provided to the Table's cells prop, can be simple strings or objects.

cells: (ICell | string)[];

ICell (excerpt):

interface ICell { /* cell contents */ title?: React.ReactNode; /** transformations applied to the header cell */ transforms?: ITransform[]; /** transformations applied to the cells within the column's body */ cellTransforms?: ITransform[]; /** transformations applied to the entire column */ columnTransforms?: ITransform[]; /** Additional header props, it contains the info prop as well which can be used to add tooltip/popover */ header?: HeaderType; /** Additional props passed into the rendered column header element */ props?: any; /** Text to display when data from this column is rendered in mobile view */ dataLabel?: string; }

If you wish to enable other built in features, use transforms to apply them to column headers or cellTransforms to apply them to every cell in that column.

// simple columns: ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'] // with tooltip columns: [ { title: 'Repositories', transforms: [ info({ tooltip: 'More information about repositories' }) ] } ] // center header and body cells within the column columns: [ { title: 'Last commit', transforms: [textCenter], cellTransforms: [textCenter] } ]

Many of the subsequent examples demonstrate how to apply different transformations to enable Table features.

Table Rows

Array items for rows provided to the Table's rows prop, can be simple strings or objects.

rows: (IRow | string[])[]

IRow (excerpt):

interface IRow extends RowType { cells?: (React.ReactNode | IRowCell)[]; props?: any; fullWidth?: boolean; noPadding?: boolean; } interface IRowCell { title?: React.ReactNode | RowCellContent; props?: any; formatters?: IFormatter[]; }

Table examples

Basic

RepositoriesBranchesPull requestsWorkspacesLast commit
Repository oneBranch onePR oneWorkspace oneCommit one
Repository twoBranch twoPR twoWorkspace twoCommit two
Repository threeBranch threePR threeWorkspace threeCommit three

Custom row wrapper

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

rowWrapper?: (props: RowWrapperProps) => JSX.Element;

RowWrapperProps:

interface RowWrapperProps { trRef?: React.Ref<any> | Function; className?: string; onScroll?: React.UIEventHandler; onResize?: React.UIEventHandler; row?: IRow; rowProps?: { rowIndex: number; rowKey: string; }; children?: React.ReactNode; ouiaId?: number | string; }
Table with custom row wrapper that styles odd rows
RepositoriesBranchesPull requestsWorkspacesLast commit

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.

Last commit
onetwoafourfive
atwokfourfive
ptwobfourfive

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.

onetwoafourfive
atwokfourfive
ptwobfourfive

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.

RepositoriesBranchesPull requestsWorkspacesLast commit
one
twoafourfive
a
twokfourfive
b
twokfourfive
c
twokfourfive
d
twokfourfive
e
twobfourfive

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.

RepositoriesBranchesPull requestsWorkspacesLast commit
one
twoafourfive
a
twokfourfive
p
twobfourfive

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

Row click handler table
Repositories
Branches
Pull requests
WorkspacesLast commit
Repository oneBranch onePR oneWorkspace oneCommit one
one - 2
four - 2five - 2
one - 3two - 3three - 3four - 3five - 3 (not centered)

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.

RepositoriesBranchesPull requestsWorkspacesLast commit
a
two1fourfive
disable actions
two3fourfive
green actions
two4fourfive
extra action props
two5fourfive
blue actions
two6fourfive

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

RepositoriesBranchesPull requests
onetwoafour
parent 1twokfour
single cell
parent 2twobfour
single cell - fullWidth
parent 32bfour
single cell - noPadding
parent 42bfour
single cell - fullWidth & noPadding
parent 52bfour
spans 'Repositories and 'Branches'
spans 'Repositories and 'Branches'
parent 62bfour
fullWidth, spans the collapsible column and 'Repositories'
fullWidth, spans the collapsible column and 'Repositories'fullWidth, spans the collapsible column and 'Repositories'

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.
RepositoriesBranchesPull requestsWorkspacesLast Commit
siemur/test-space20 minutesOpen in Github
Expanded content for siemur/test-space: Branches goes here!
siemur/test-space-220 minutesOpen in Github

With width and breakpoint visibility modifiers

Header cellBranches (visible only on md and 2Xl)Pull requests (hidden only on md)Workspaces (hidden on xs)Last commit
one - 1two - 1 (visible only on md)three - 1 (hidden only on md)four - 1 (hidden on xs)five - 1
one - 2two - 2 (visible only on md)three - 2 (hidden only on md)four - 2 (hidden on xs)five - 2

Controlling text

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

By default, thead cells will truncate and tbody cells will wrap. Use transforms and/or cellTransforms to change the 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

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.

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:

{ title: (value, rowIndex, cellIndex, props) => ( <EditableTextCell value={value} rowIndex={rowIndex} cellIndex={cellIndex} props={props} handleTextInputChange={this.handleTextInputChange} inputAriaLabel="Row 1 cell 1 content" /> ), props: { value: 'Row 1 cell 1 content', name: 'uniqueIdRow1Cell1' } },
Text input col 1Disabled text input col 2Text input col 3Text input col 4
Row 1 cell 1 content
Row 1 cell 2, disabled content
Row 1 cell 3 content
Option 1
Row 2 cell 1 content
Row 2 cell 2, disabled content
Row 2 cell 3 content
Placeholder...
Row 3 cell 1 content
Row 3 cell 2, disabled content
Row 3 cell 3 content
Option 3
1

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.

BranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive

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.

RepositoriesBranchesPull requestsWorkspaces
Repositories one
Branch onePull request oneWorkplace one

Striped

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

RepositoriesBranchesPull requestsWorkspacesLast commit
Repository oneBranch onePR oneWorkspace oneCommit one
Repository twoBranch twoPR twoWorkspace twoCommit two
Repository threeBranch threePR threeWorkspace threeCommit three

Striped expandable

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

RepositoriesBranchesPull requests
onetwoafour
parent 1twokfour
single cell
parent 2twobfour
single cell - fullWidth
parent 32bfour
single cell - noPadding
parent 42bfour
single cell - fullWidth & noPadding
parent 52bfour
spans 'Repositories and 'Branches'
spans 'Repositories and 'Branches'
parent 62bfour
fullWidth, spans the collapsible column and 'Repositories'
fullWidth, spans the collapsible column and 'Repositories'fullWidth, spans the collapsible column and 'Repositories'

Striped custom tr

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

Table with custom row wrapper that stripes odd rows
RepositoriesBranchesPull requestsWorkspacesLast commit

Props

Table

*required
NameTypeDefaultDescription
cellsrequired(ICell | string)[]Cell/column data
rowsrequired(IRow | string[])[]Row data
actionResolverIActionsResolverResolver for the given action
actionsIActionsActions to add to the Table
actionsMenuAppendToHTMLElement | (() => HTMLElement) | 'inline' | 'parent''inline'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: actionsMenuAppendTo="parent" actionsMenuAppendTo={() => document.body} actionsMenuAppendTo={document.getElementById('target')}
actionsToggle(props: CustomActionsToggleProps) => React.ReactNodeThe toggle of the actions menu dropdown. A KebabToggle or DropdownToggle component
areActionsDisabledIAreActionsDisabledSpecifies if the Kebab for actions is disabled
aria-labelstringundefinedAdds an accessible name for the Table
bodyWrapperFunctionWrapper for the body
bordersbooleantrueRender borders Borders can only currently be disabled if the variant is set to 'compact' https://github.com/patternfly/patternfly/issues/3650
canCollapseAllbooleanfalseEnables or disables the ability to expand all
canSelectAllbooleantrueEnables or disables the ability to select all - this is mutually exclusive with radio button select variant
canSortFavoritesbooleantrueAlong with the onSort prop, enables favorites sorting, defaults to true
captionReact.ReactNodeundefinedComponent used for caption
childrenReact.ReactNodenullContent rendered inside the Table
classNamestring''Additional classes added to the Table
collapseAllAriaLabelstring''An optional alternative aria label for the expand collapse all table header
contentIdstring'expanded-content'ID for content
dropdownDirection'up' | 'down'DropdownDirection.downThe desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
dropdownPosition'right' | 'left'DropdownPosition.rightThe desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
expandIdstring'expandable-toggle'ID for expand
gridBreakPoint'' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'TableGridBreakpoint.gridMdSpecifies the grid breakpoints
headerReact.ReactNodeundefinedComponent to place in the header
isExpandablebooleanFlag indicating this table contains expandable rows to maintain proper striping
isHeaderSelectDisabledbooleanfalseFlag indicating the select all checkbox is disabled
isNestedbooleanfalseFlag indicating this table is nested within another table
isStickyHeaderbooleanfalseIf set to true, the table header sticks to the top of its container
isStripedbooleanFlag indicating this table is striped
isTreeTablebooleanfalseFlag indicating table is a tree table
onCollapseOnCollapseFunction triggered when an expandable content is collapsed. When this is used, one expandable toggle button will be positioned in the first cell of a non-expandable row, preceding an expandable row
onExpandOnExpandFunction triggered when a compound expandable item is clicked
onFavoriteOnFavoriteEnables favorites column Callback triggered when a row is favorited/unfavorited
onRowEditOnRowEditFunction triggered when a row's inline edit is activated. Adds a column for inline edit when present.
onSelectOnSelectFunction triggered when a row's checkbox is selected. When this is used, one checkbox/radio button will be positioned in the first or second cell of a non-expandable row
onSortOnSortFunction triggered when sort icon is clicked
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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.
rolestring'grid'A valid WAI-ARIA role to be applied to the table element
rowLabeledBystring'simple-node'label for row
rowWrapper(props: RowWrapperProps) => JSX.ElementWrapper for the row
selectVariant'checkbox' | 'radio''checkbox'Specifies the type of the select element variant - can be one of checkbox or radio button
sortByISortBySpecifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by
variantliteralnullStyle variant for the Table

TableHeader

*required
NameTypeDefaultDescription
classNamestringAdditional classes added to the TableHeader

TableBody

*required
NameTypeDefaultDescription
classNamestring''Additional classes added to the TableBody
isEvenStripedbooleanFlag indicating the <tbody> contains evenly striped rows.
isOddStripedbooleanFlag indicating the <tbody> contains oddly striped rows.
onRowClick( event: React.KeyboardEvent | React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData ) => void( event: React.MouseEvent | React.KeyboardEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData ) => /* eslint-enable @typescript-eslint/no-unused-vars */ undefined as OnRowClickA click handler for the row

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub