Skip to content
Patternfly Logo

Table

Table Composable

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

PatternFly has two implementations of a React table.

The first is the newer TableComposable component. It takes a more explicit and declarative approach, and its implementation more closely mirrors that of an html table. Generally, updates and new feature requests are implemented in the ComposableTable.

The second is the original Table component. It is configuration based and takes a less declarative and more implicit approach about laying out the table structure, such as the rows and cells within it. Its documentation can be found here.

For most common use cases, we recommend using TableComposable. Both implementations are supported and fully maintained.

TableComposable examples

The TableComposable component differs from the regular 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 TableComposable.
  • You can set the TableComposable variant to compact

Composable: Basic

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

Composable: 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
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 3 (not centered)

Composable: 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.

This is a really long table header that goes on for a long time 2.
This is a really long table header that goes on for a long time 4.This is a really long table header that goes on for a long time 5.
onetwoafourfive
atwokfourfive
ptwobfourfive

Composable: 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

Composable: 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
atwokfourfive
atwokfourfive
atwokfourfive
ptwobfourfive

Composable: 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.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive

Composable: Row click handler, hoverable & selected 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
onetwoafourfive
atwokfourfive
ptwobfourfive

Composable: 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, pass a TdActionsType object via the actions prop on a rows's last Td.

RepositoriesBranchesPull requestsWorkspacesLast commit
onetwoafourfive
atwokfourfive
ptwobfourfive
42bfourfive
52bfourfive

Composable: 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;
RepositoriesBranchesPull 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'

Composable: 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 commit
siemur/test-space20 minutesOpen in Github
BranchesWorkspacesLast Commit
parent-0compound-1threefourfive
atwokfourfive
ptwobfourfive
siemur/test-space10 minutesOpen in Github

Composable: Cell width, breakpoint modifiers

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

Composable: 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

Composable: 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.

Composable: 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
onetwothreefourfive
one - 2four - 2five - 2
one - 3two - 3three - 3four - 3five - 3

Composable: Tree table Beta

To enable a tree table:

  1. Pass the isTreeTable prop to the TableComposable 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
Repositories six
Branch sixPull request sixWorkplace six

Composable: Draggable row table Beta

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 `class needs to be applied toTableComposable`.
  5. The draggable Td in each row needs a TdDraggableType object passed to its draggable prop.
RepositoriesBranchesPull requestsWorkspacesLast commit
row1onetwothreefourfive
row2one -2four -2five -2
row3one - 3two - 3three - 3four - 3five - 3

Composable: Sticky column

To make a column sticky, wrap TableComposable with InnerScrollContainer and add the following properties to the Th that should be sticky: isStickyColumn and hasRightBorder. To prevent the default text wrapping behavior and allow horizontal scrolling, all Th should also have the modifier="nowrap" property. To set the minimum width of the sticky column, use the stickyMinWidth 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

Composable: Multiple sticky columns

To make multiple columns sticky, wrap TableComposable with InnerScrollContainer and add isStickyColumn to all columns that should be sticky. The rightmost column should also have the hasRightBorder property, and each sticky column after the first must define a stickyLeftOffset property that equals the combined width of the previous sticky columns - set by stickyMinWidth. To prevent the default text wrapping behavior and allow horizontal scrolling, all Th 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

Composable: Sticky columns and header

To maintain proper sticky behavior across sticky columns and header, TableComposable must be wrapped with OuterScrollContainer and InnerScrollContainer as shown in the example below.

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

Composable: Nested column headers

To make a nested column header:

  1. Wrap TableComposable with InnerScrollContainer.
  2. Pass nestedHeaderColumnSpans to TableComposable. nestedHeaderColumnSpans is an array of numbers representing the column spans of the top level columns to TableComposable, 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
June 22, 20213:58:24 PM
443
(HTTPS)
24
(smtp)
TCP1.9 Kbps2.1 KB3

Composable: Nested column headers and expandable rows

TeamMembersContact
Design LeadInteraction DesignerVisual Designer
Developer programPerson 1Person 2Person 3
Developer programPerson APerson BPerson C
Developer programPerson XPerson YPerson Z

Props

TableComposable

*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
innerRefReact.RefObject<any>Forwarded ref
isNestedbooleanFlag indicating this table is nested within another table
isStickyHeaderbooleanIf set to true, the table header sticks to the top of its container
isTreeTablebooleanFlag indicating table is a tree table
nestedHeaderColumnSpansnumber[]Collection of column spans for nested headers
rolestringA valid WAI-ARIA role to be applied to the table element
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
innerRefReact.Ref<any>Forwarded ref
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
innerRefReact.Ref<any>Forwarded ref
isExpandedbooleanModifies the body to allow for expandable rows

Tr

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the <tr> row
classNamestringAdditional classes added to the <tr> row
innerRefReact.Ref<any>Forwarded ref
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
isHiddenbooleanFlag indicating the Tr is hidden
isHoverablebooleanFlag which adds hover styles for the table row
isRowSelectedbooleanFlag indicating the row is selected - adds selected styling
onRowClick(event?: React.KeyboardEvent | React.MouseEvent) => voidAn event handler for the row
resetOffsetbooleanFlag indicating the spacing offset of the first cell should be reset

Th

*required
NameTypeDefaultDescription
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.
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
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
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

Td

*required
NameTypeDefaultDescription
actionsTdActionsTypeTurns the cell into an actions cell
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
noPaddingbooleanTrue to remove padding
selectTdSelectTypeRenders a checkbox or radio select
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
onMouseEnter(event: any) => void() => {}callback used to create the tooltip if text is truncated
tooltipstring''text to display on the tooltip
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
disablebooleanWhether to disable the actions
dropdownDirectionDropdownDirectionActions dropdown direction
dropdownPositionDropdownPositionActions dropdown position

TdSelectType

*required
NameTypeDefaultDescription
isSelectedrequiredbooleanWhether the cell is selected
rowIndexrequirednumberThe row index
disablebooleanWhether to disable the selection
onSelectOnSelectCallback on select
propsanyAdditional props forwarded to select rowData
variant'checkbox' | 'radio'The selectable variant

ThSelectType

*required
NameTypeDefaultDescription
isSelectedrequiredbooleanWhether the cell is selected
isHeaderSelectDisabledbooleanFlag indicating the select checkbox in the th is disabled
onSelectOnSelectCallback on select

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

TdCompoundExpandType

*required
NameTypeDefaultDescription
isExpandedrequiredbooleandetermines if the corresponding expansion row is open
onToggleOnExpandCallback on toggling of the expansion

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
onToggleOnCollapseOn toggling the expansion

EditableSelectInputCell

*required
NameTypeDefaultDescription
cellIndexrequirednumberCell index of this select input cell
propsrequiredEditableSelectInputPropsProps to build the select component
rowIndexrequirednumberRow index of this select input cell
clearSelection(rowIndex: number, cellIndex: number, event?: React.MouseEvent) => voidEvent handler which fires when the user clears the selections
isDisabledbooleanFlag indicating the select input is disabled
isOpenbooleanfalseFlag indicating the select menu is open
onSelect( newValue: string | SelectOptionObject, event: React.MouseEvent | React.ChangeEvent, rowIndex: number, cellIndex: number, isPlaceholder?: boolean ) => void() => {}Event handler which fires when user selects an option in this cell
onToggle(isExpanded: boolean) => void() => {}Event handler which fires when the select toggle is toggled
optionsReact.ReactElement[][]Options to display in the expandable select menu
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[]['']Current selected options to display as the read only value of the table cell

EditableTextCell

*required
NameTypeDefaultDescription
cellIndexrequirednumberCell index of this text cell
handleTextInputChangerequired( newValue: string, event: React.FormEvent<HTMLInputElement>, rowIndex: number, cellIndex: number ) => voidEvent handler which fires when user changes the text in this cell
inputAriaLabelrequiredstringaccessible label of the text input
propsrequiredEditableTextCellPropsProps to build the input
rowIndexrequirednumberRow index of this text cell
valuerequiredstringThe current value of the text input
isDisabledbooleanfalseflag indicating if the text input is disabled

EditableSelectInputProps

*required
NameTypeDefaultDescription
[key: string]requiredanyarbitrary data to pass to the internal select component in the editable select input cell
isSelectOpenrequiredbooleanFlag controlling isOpen state of select
namerequiredstringName of the select input
optionsrequiredReact.ReactElement[]Array of react elements to display in the select menu
selectedrequiredstring | SelectOptionObject | (string | SelectOptionObject)[]String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections
valuerequiredstring | string[]Value to display in the cell
editableSelectPropsSelectPropsProps to be passed down to the Select component

EditableTextCellProps

*required
NameTypeDefaultDescription
[key: string]requiredanyarbitrary data to pass to the internal text input in the editable text cell
namerequiredstringName of the input
valuerequiredstringValue to display in the cell

ThSortType

*required
NameTypeDefaultDescription
columnIndexrequirednumberThe column index
sortByrequiredISortByProvide the currently active column's index and direction
isFavoritesbooleanTrue to make this a favoritable sorting cell
onSortOnSortWraps the content in a button and adds a sort icon - Click callback on the sortable cell

ISortBy

*required
NameTypeDefaultDescription
defaultDirection'asc' | 'desc'Defaulting sorting direction. Defaults to "asc".
direction'asc' | 'desc'Current sort direction
indexnumberIndex of the current sorted column

InnerScrollContainer

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the inner scroll container
classNamestringAdditional classes added to the container

OuterScrollContainer

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the outer scroll container
classNamestringAdditional classes added to the container

CSS variables

.pf-c-table--pf-global--Color--100
#151515
.pf-c-table--pf-global--Color--200
#6a6e73
.pf-c-table--pf-global--BorderColor--100
#d2d2d2
.pf-c-table--pf-global--primary-color--100
#06c
.pf-c-table--pf-global--link--Color
#06c
.pf-c-table--pf-global--link--Color--hover
#004080
.pf-c-table--pf-global--BackgroundColor--100
#fff
.pf-c-table--pf-c-table--BackgroundColor
#fff
.pf-c-table--pf-c-table--BorderColor
#d2d2d2
.pf-c-table--pf-c-table--border-width--base
1px
.pf-c-table--pf-c-table-caption--FontSize
0.875rem
.pf-c-table--pf-c-table-caption--Color
#6a6e73
.pf-c-table--pf-c-table-caption--PaddingTop
1rem
.pf-c-table--pf-c-table-caption--PaddingRight
1.5rem
.pf-c-table--pf-c-table-caption--PaddingBottom
1rem
.pf-c-table--pf-c-table-caption--PaddingLeft
1.5rem
.pf-c-table--pf-c-table-caption--xl--PaddingRight
1rem
.pf-c-table--pf-c-table-caption--xl--PaddingLeft
1rem
.pf-c-table--pf-c-table--thead--cell--FontSize
0.875rem
.pf-c-table--pf-c-table--thead--cell--FontWeight
700
.pf-c-table--pf-c-table--tbody--cell--PaddingTop
1.5rem
.pf-c-table--pf-c-table--tbody--cell--PaddingBottom
1.5rem
.pf-c-table--pf-c-table--tr--BoxShadow--top--base
0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)
.pf-c-table--pf-c-table--cell--Padding--base
1rem
.pf-c-table--pf-c-table--cell--FontSize
1rem
.pf-c-table--pf-c-table--cell--FontWeight
400
.pf-c-table--pf-c-table--cell--Color
#151515
.pf-c-table--pf-c-table--cell--PaddingTop
1rem
.pf-c-table--pf-c-table--cell--PaddingRight
1rem
.pf-c-table--pf-c-table--cell--PaddingBottom
1rem
.pf-c-table--pf-c-table--cell--PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--first-last-child--PaddingRight
1rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingLeft
1.5rem
.pf-c-table--pf-c-table--cell--first-last-child--xl--PaddingRight
1.5rem
.pf-c-table--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft
1rem
.pf-c-table--pf-c-table--cell--MinWidth
0
.pf-c-table--pf-c-table--cell--MaxWidth
none
.pf-c-table--pf-c-table--cell--Width
auto
.pf-c-table--pf-c-table--cell--Overflow
visible
.pf-c-table--pf-c-table--cell--TextOverflow
clip
.pf-c-table--pf-c-table--cell--WhiteSpace
normal
.pf-c-table--pf-c-table--cell--WordBreak
normal
.pf-c-table--pf-c-table--cell--m-border-right--before--BorderRightWidth
1px
.pf-c-table--pf-c-table--cell--m-border-right--before--BorderRightColor
#d2d2d2
.pf-c-table--pf-c-table--cell--m-border-left--before--BorderLeftWidth
1px
.pf-c-table--pf-c-table--cell--m-border-left--before--BorderLeftColor
#d2d2d2
.pf-c-table--pf-c-table--cell--m-help--MinWidth
11ch
.pf-c-table--pf-c-table--m-truncate--cell--MaxWidth
1px
.pf-c-table--pf-c-table--m-truncate--cell--MinWidth
calc(5ch + 1rem + 1rem)
.pf-c-table--pf-c-table--cell--hidden-visible--Display
table-cell
.pf-c-table--pf-c-table__toggle--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__toggle--c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__toggle--c-button__toggle-icon--Rotate
270deg
.pf-c-table--pf-c-table__toggle--c-button__toggle-icon--Transition
.2s ease-in 0s
.pf-c-table--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate
360deg
.pf-c-table--pf-c-table__button--BackgroundColor
transparent
.pf-c-table--pf-c-table__button--Color
#151515
.pf-c-table--pf-c-table__button--hover--Color
#151515
.pf-c-table--pf-c-table__button--focus--Color
#151515
.pf-c-table--pf-c-table__button--active--Color
#151515
.pf-c-table--pf-c-table__button--OutlineOffset
calc(3px * -1)
.pf-c-table--pf-c-table--m-compact__toggle--PaddingTop
0
.pf-c-table--pf-c-table--m-compact__toggle--PaddingBottom
0
.pf-c-table--pf-c-table__check--input--MarginTop
0.25rem
.pf-c-table--pf-c-table__check--input--FontSize
1rem
.pf-c-table--pf-c-table--cell--m-favorite--Color
#d2d2d2
.pf-c-table--pf-c-table__favorite--c-button--Color
#d2d2d2
.pf-c-table--pf-c-table__favorite--c-button--FontSize
0.875rem
.pf-c-table--pf-c-table__favorite--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__favorite--c-button--MarginRight
calc(1rem * -1)
.pf-c-table--pf-c-table__favorite--c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__favorite--c-button--MarginLeft
calc(1rem * -1)
.pf-c-table--pf-c-table__favorite--m-favorited--c-button--Color
#f0ab00
.pf-c-table--pf-c-table__sort--m-favorite__button__text--Color
#6a6e73
.pf-c-table--pf-c-table__sort--m-favorite__button--hover__text--Color
#151515
.pf-c-table--pf-c-table__sort--m-favorite__button--focus__text--Color
#151515
.pf-c-table--pf-c-table__sort--m-favorite__button--active__text--Color
#151515
.pf-c-table--pf-c-table__draggable--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__draggable--c-button--MarginRight
calc(1rem * -1)
.pf-c-table--pf-c-table__draggable--c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__draggable--c-button--MarginLeft
calc(1rem * -1)
.pf-c-table--pf-c-table__tr--m-ghost-row--Opacity
.4
.pf-c-table--pf-c-table__tr--m-ghost-row--BackgroundColor
#fff
.pf-c-table--pf-c-table__action--PaddingTop
0
.pf-c-table--pf-c-table__action--PaddingRight
0
.pf-c-table--pf-c-table__action--PaddingBottom
0
.pf-c-table--pf-c-table__action--PaddingLeft
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingTop
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingRight
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingBottom
0
.pf-c-table--pf-c-table__inline-edit-action--PaddingLeft
0
.pf-c-table--pf-c-table__expandable-row--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-table--pf-c-table__expandable-row--MaxHeight
28.125rem
.pf-c-table--pf-c-table__expandable-row-content--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-table--pf-c-table__expandable-row-content--PaddingTop
1.5rem
.pf-c-table--pf-c-table__expandable-row-content--PaddingBottom
1.5rem
.pf-c-table--pf-c-table__expandable-row--after--Top
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--Bottom
calc(1px * -1)
.pf-c-table--pf-c-table__expandable-row--after--border-width--base
3px
.pf-c-table--pf-c-table__expandable-row--after--BorderLeftWidth
0
.pf-c-table--pf-c-table__expandable-row--after--BorderColor
#06c
.pf-c-table--pf-c-table__icon-inline--MarginRight
0.5rem
.pf-c-table--pf-c-table__sort--MinWidth
calc(6ch + 1rem + 1rem + 1rem)
.pf-c-table--pf-c-table__sort__button--PaddingTop
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingRight
0.5rem
.pf-c-table--pf-c-table__sort__button--PaddingBottom
0.375rem
.pf-c-table--pf-c-table__sort__button--PaddingLeft
0.5rem
.pf-c-table--pf-c-table__sort__button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginBottom
calc(0.375rem * -1)
.pf-c-table--pf-c-table__sort__button--MarginLeft
calc(0.5rem * -1)
.pf-c-table--pf-c-table__sort__button--Color
#151515
.pf-c-table--pf-c-table__sort--m-selected__button--Color
#06c
.pf-c-table--pf-c-table__sort--m-help--MinWidth
15ch
.pf-c-table--pf-c-table__sort__button__text--Color
currentColor
.pf-c-table--pf-c-table__sort__button--hover__text--Color
currentColor
.pf-c-table--pf-c-table__sort__button--focus__text--Color
currentColor
.pf-c-table--pf-c-table__sort__button--active__text--Color
currentColor
.pf-c-table--pf-c-table__sort-indicator--Color
#d2d2d2
.pf-c-table--pf-c-table__sort-indicator--MarginLeft
1rem
.pf-c-table--pf-c-table__sort--m-selected__sort-indicator--Color
#06c
.pf-c-table--pf-c-table__sort__button--hover__sort-indicator--Color
#151515
.pf-c-table--pf-c-table__sort__button--active__sort-indicator--Color
#151515
.pf-c-table--pf-c-table__sort__button--focus__sort-indicator--Color
#151515
.pf-c-table--pf-c-table--th--m-help--MinWidth
11ch
.pf-c-table--pf-c-table__column-help--MarginLeft
0.25rem
.pf-c-table--pf-c-table__column-help--TranslateY
0.125rem
.pf-c-table--pf-c-table__column-help--c-button--MarginTop
calc(0.375rem * -1)
.pf-c-table--pf-c-table__column-help--c-button--MarginBottom
calc(0.375rem * -1)