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?: string | 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?: string | React.ReactNode | RowCellContent;
  props?: any;
  formatters?: IFormatter[];
}

Table examples

Basic

Repositories	Branches	Pull requests	Workspaces	Last commit
Repository one	Branch one	PR one	Workspace one	Commit one
Repository two	Branch two	PR two	Workspace two	Commit two
Repository three	Branch three	PR three	Workspace three	Commit 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
Repositories	Branches	Pull requests	Workspaces	Last commit

Sortable & wrapping column headers

To implement sortable columns:

Import and apply the sortable transform to the desired column.
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
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
one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

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.


one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

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.

Repositories	Branches	Pull requests	Workspaces	Last commit
one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

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	Workspaces	Last commit
Repository one	Branch one	PR one	Workspace one	Commit one
one - 2			four - 2	five - 2
one - 3	two - 3	three - 3	four - 3	five - 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.

Repositories	Branches	Pull requests	Workspaces	Last commit
a	two	1	four	five
disable actions	two	3	four	five
green actions	two	4	four	five
extra action props	two	5	four	five
blue actions	two	6	four	five

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

Compact

	Repositories	Branches	Pull requests
	one	two	a	four
	parent 1	two	k	four
	single cell
	parent 2	two	b	four
single cell - fullWidth
	parent 3	2	b	four
	single cell - noPadding
	parent 4	2	b	four
single cell - fullWidth & noPadding
	parent 5	2	b	four
	spans 'Repositories and 'Branches'		spans 'Repositories and 'Branches'
	parent 6	2	b	four
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:

Pass the compoundExpand transformation via the cellTransforms field in the column definition for each column that will have an expanded section.
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
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
An onExpand event handler prop should be passed to the Table.

Repositories	Last Commit
siemur/test-space	20 minutes	Open in Github
Expanded content for siemur/test-space: Branches goes here!
Expanded content for siemur/test-space: Pull requests goes here!
Expanded content for siemur/test-space: Workspaces goes here!
siemur/test-space-2	20 minutes	Open in Github
Expanded content for siemur/test-space-2: Branches goes here!
Expanded content for siemur/test-space-2: Pull requests goes here!
Expanded content for siemur/test-space-2: Workspaces goes here!

With width and breakpoint visibility modifiers

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

Controlling text

Truncate (width 20%)	Break word	Wrapping 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 text	Wrapping 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

Repositories	Branches	Pull requests	Workspaces	Last commit
No results found Clear all filters and try again.

Editable rows

To make a table row editable:

Pass a callback to Table via the onRowEdit prop.
Define the title for the editable cells using the RowCellContent type function.
Have the function return an EditableTextCell.
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 1	Disabled text input col 2	Text input col 3	Text 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.

	Branches	Pull requests	Workspaces	Last commit
one	two	a	four	five
a	two	k	four	five
p	two	b	four	five

Tree table

To enable a tree table:

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

Repositories	Branches	Pull requests	Workspaces
Repositories one	Branch one	Pull request one	Workplace one
Repositories two	Branch two	Pull request two	Workplace two
Repositories three	Branch three	Pull request three	Workplace three
Repositories four	Branch four	Pull request four	Workplace four
Repositories five	Branch five	Pull request five	Workplace five
Repositories six	Branch six	Pull request six	Workplace six
Repositories seven	Branch seven	Pull request seven	Workplace seven
Repositories eight	Branch eight	Pull request eight	Workplace eight
Repositories nine	Branch nine	Pull request nine	Workplace nine

Striped

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

Repositories	Branches	Pull requests	Workspaces	Last commit
Repository one	Branch one	PR one	Workspace one	Commit one
Repository two	Branch two	PR two	Workspace two	Commit two
Repository three	Branch three	PR three	Workspace three	Commit three

Striped expandable

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

Compact

	Repositories	Branches	Pull requests
	one	two	a	four
	parent 1	two	k	four
	single cell
	parent 2	two	b	four
single cell - fullWidth
	parent 3	2	b	four
	single cell - noPadding
	parent 4	2	b	four
single cell - fullWidth & noPadding
	parent 5	2	b	four
	spans 'Repositories and 'Branches'		spans 'Repositories and 'Branches'
	parent 6	2	b	four
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
Repositories	Branches	Pull requests	Workspaces	Last commit

Props

Table

*required
Name	Type	Default	Description
cellsrequired	(ICell \| string)[]		Cell/column data
rowsrequired	(IRow \| string[])[]		Row data
actionResolver	IActionsResolver		Resolver for the given action
actions	IActions		Actions to add to the Table
actionsMenuAppendTo	HTMLElement \| (() => 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.ReactNode		The toggle of the actions menu dropdown. A KebabToggle or DropdownToggle component
areActionsDisabled	IAreActionsDisabled		Specifies if the Kebab for actions is disabled
aria-label	string	undefined	Adds an accessible name for the Table
bodyWrapper	Function		Wrapper for the body
borders	boolean	true	Render borders Borders can only currently be disabled if the variant is set to 'compact' https://github.com/patternfly/patternfly/issues/3650
canCollapseAll	boolean	false	Enables or disables the ability to expand all
canSelectAll	boolean	true	Enables or disables the ability to select all - this is mutually exclusive with radio button select variant
canSortFavorites	boolean	true	Along with the onSort prop, enables favorites sorting, defaults to true
caption	React.ReactNode	undefined	Component used for caption
children	React.ReactNode	null	Content rendered inside the Table
className	string	''	Additional classes added to the Table
collapseAllAriaLabel	string	''	An optional alternative aria label for the expand collapse all table header
contentId	string	'expanded-content'	ID for content
dropdownDirection	'up' \| 'down'	DropdownDirection.down	The desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
dropdownPosition	'right' \| 'left'	DropdownPosition.right	The desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property
expandId	string	'expandable-toggle'	ID for expand
gridBreakPoint	'' \| 'grid' \| 'grid-md' \| 'grid-lg' \| 'grid-xl' \| 'grid-2xl'	TableGridBreakpoint.gridMd	Specifies the grid breakpoints
header	React.ReactNode	undefined	Component to place in the header
isExpandable	boolean		Flag indicating this table contains expandable rows to maintain proper striping
isHeaderSelectDisabled	boolean	false	Flag indicating the select all checkbox is disabled
isNested	boolean	false	Flag indicating this table is nested within another table
isStickyHeader	boolean	false	If set to true, the table header sticks to the top of its container
isStriped	boolean		Flag indicating this table is striped
isTreeTable	boolean	false	Flag indicating table is a tree table
onCollapse	OnCollapse		Function 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
onExpand	OnExpand		Function triggered when a compound expandable item is clicked
onFavorite	OnFavorite		Enables favorites column Callback triggered when a row is favorited/unfavorited
onRowEdit	OnRowEdit		Function triggered when a row's inline edit is activated. Adds a column for inline edit when present.
onSelect	OnSelect		Function 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
onSort	OnSort		Function triggered when sort icon is clicked
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set 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.
role	string	'grid'	A valid WAI-ARIA role to be applied to the table element
rowLabeledBy	string	'simple-node'	label for row
rowWrapper	(props: RowWrapperProps) => JSX.Element		Wrapper for the row
selectVariant	'checkbox' \| 'radio'	'checkbox'	Specifies the type of the select element variant - can be one of checkbox or radio button
sortBy	ISortBy		Specifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by
variant	literal	null	Style variant for the Table

TableHeader

*required
Name	Type	Default	Description
className	string		Additional classes added to the TableHeader

TableBody

*required
Name	Type	Default	Description
className	string	''	Additional classes added to the TableBody
isEvenStriped	boolean		Flag indicating the <tbody> contains evenly striped rows.
isOddStriped	boolean		Flag 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 OnRowClick	A click handler for the row

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub

Table

Warning alert:Deprecated feature

Table Columns

Table Rows

Table examples

Basic

Custom row wrapper

Sortable & wrapping column headers

Sortable - custom control

Selectable with checkbox

Selectable radio input

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

Actions and first cell in body rows as th

Expandable

Compound expandable

With width and breakpoint visibility modifiers

Controlling text

Modifiers with table text

Empty state

No results found

Editable rows

Favoritable (implemented with sortable and selectable)

Tree table

Striped

Striped expandable

Striped custom tr

Props

Table

TableHeader

TableBody

CSS variables