Table.md

section	extensions
subsection	Data view
id	Table
title	Data view table
source	react
sortValue	3
propComponents	DataViewTableBasic DataViewTableTree DataViewTrTree DataViewTrObject DataViewTh DataViewThResizableProps
sourceLink	https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

import { FunctionComponent, useMemo, useState } from 'react'; import { BrowserRouter, useSearchParams } from 'react-router-dom'; import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core'; import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons'; import { ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups'; import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; import { useDataViewSelection, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks'; import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';

The data view table component renders your data into columns and rows within a PatternFly table component. You can easily customize and configure the table with these additional data view components and props.

Configuring rows and columns

To define rows and columns for your table, use these props:

• columns: Defines the column heads of the table. Each item in the array can be a ReactNode for simple heads, or an object with the following properties:
  • cell: Content to display in the column head.
  • props (optional): (ThProps) to pass to the <Th> component, such as width, sort, and other table head cell properties.
• rows: Defines the rows to be displayed in the table. Each item in the array can be either an array of DataViewTd for simple rows, or an object with the following properties:
  • row: Content to display in each cell in the row.
  • id (optional): Unique identifier for the row that's used for matching selected items.
  • props (optional): (TrProps) to pass to the <Tr> component, such as isHoverable, isRowSelected, and other table row properties.

It is also possible to disable row selection using the isSelectDisabled function, which can be passed to the wrapping DataView component through the selection prop.

If you want to have all expandable nodes open on initial load pass the expandAll prop to the DataViewTable component

Table example

Expandable rows

To add expandable content to table cells, pass an array of ExpandableContent objects to the expandedRows prop of the <DataViewTable> component. Each expandable content object defines which cell can be expanded and what content to display when expanded.

The ExpandableContent interface is defined as:

interface ExpandableContent {
  /** The ID of the row containing the expandable cell (must match the id property in the row data) */
  rowId: number;
  /** The column index (0-based) that should be expandable */
  columnId: number;
  /** The content to display when the cell is expanded */
  content: ReactNode;
}

When a cell has expandable content:

• A compound expand toggle button appears in the cell
• Clicking the toggle expands the row to show the additional content below
• Only one expanded cell is shown per row at a time
• Clicking another expandable cell in the same row switches the expanded content

Expandable rows example

Sticky header and columns

To enable sticky headers and columns, set the isSticky prop to true on the <DataViewTable> component. This keeps the table header and designated columns visible when scrolling.

To make specific columns sticky, add the isStickyColumn property to the column's props in the column definition:

const columns: DataViewTh[] = [
  { cell: 'Column Name', props: { isStickyColumn: true } }
];

When sticky headers and columns are enabled:

• The table header remains visible when scrolling vertically
• Columns marked with isStickyColumn: true remain visible when scrolling horizontally
• The table is wrapped in OuterScrollContainer and InnerScrollContainer components to enable sticky behavior
• Sticky columns can have additional styling like borders using hasRightBorder or hasLeftBorder props
• When selection is enabled (via <DataView selection={...}>), the selection checkbox column automatically becomes sticky when the first data column has isStickyColumn: true. The selection column is properly offset to appear to the left of the sticky data column.

Sticky header and columns example

Sticky selection column example

This example demonstrates how the selection checkbox column automatically becomes sticky when the first data column has isStickyColumn: true. The selection column is positioned at the left edge with proper offset handling.

Interactive example

• Interactive example show how the different composable options work together.
• By toggling the toggles you can switch between them and observe the behaviour

Resizable columns

To allow a column to resize, add isResizable to the DataViewTable element, and pass resizableProps to each applicable header cell. The resizableProps object consists of the following fields:

• isResizable - indicates that the column is resizable
• resizeButtonAriaLabel - an accessible name for the resizable column's resize button. This must be passed in if the column is resizable.
• onResize - a callback that will return the source event and the new width of the column
• width - a default width value for a column
• minWidth - the minimum width a column may shrink to
• increment - how many pixels the column will move left or right for keyboard navigation
• shiftIncrement - how many pixels the column will move left or right while shift is held for keyboard navigation
• screenReaderText - text that will be announced when a column is resized

Tree table

A tree table includes expandable rows and custom icons for leaf and parent nodes. To enable a tree table, pass the isTreeTable flag to the <DataViewTable> component.

Tree table rows have to be defined with following keys:

• row: Defines the content for each cell in the row.
• id: Unique identifier for the row that's used for matching selected items.
• children (optional): Defines the children rows.

To update a row's icon to reflect its expansion state, pass collapsedIcon, expandedIcon, and leafIcon to <DataViewTable>.

To disable row selection, pass the isSelectDisabled function to selection prop of the wrapping <DataView> component .

Tree table example

Sorting

The following example demonstrates how to enable sorting functionality within a data view. This implementation supports dynamic sorting by column and persists the sort state in the page's URL via React Router.

Sorting example

Sorting state

The useDataViewSort hook manages the sorting state of a data view and provides an easy way to handle sorting logic, such as synchronization with URL parameters and the definition of default sorting behavior.

Initial values:

• initialSort object to set default sortBy and direction values:
  • sortBy: Key of the initial column to sort.
  • direction: Default sorting direction (asc or desc).
• searchParams (optional): Object to manage URL-based synchronization of sort state.
• setSearchParams (optional): Function to update the URL parameters when sorting changes.
• defaultDirection: Used to set the default direction when no direction is specified.
• Customizable parameter names for the URL:
  • sortByParam: Name of the URL parameter for the column key.
  • directionParam: Name of the URL parameter for the sorting direction. The useDataViewSort hook integrates seamlessly with React Router to manage the sort state via URL parameters. Alternatively, you can use URLSearchParams and window.history.pushState APIs, or other routing libraries. If URL synchronization is not configured, the sort state is managed internally within the component.

Return values:

• sortBy: Key of the column currently being sorted.
• direction: Current sorting direction (asc or desc).
• onSort: Function to handle sorting changes programmatically or via user interaction.

States

The data view table allows you to react to the activeState of the data view (such as empty, error, loading). You can use the headStates and bodyStates props to define the table head and body for a given state.

Empty

When there is no data to render in the data view, you can instead display an empty state.

You can create your empty state by passing a PatternFly empty state to the empty key of headStates or bodyStates.

Error

When there is a data connection or retrieval error, you can display an error state.

The error state will be displayed when the data view activeState value is error.

You can create your error state by passing either the component groups extension's error state or a PatternFly empty state to the error key of headStates or bodyStates.

Loading

To indicate that data is loading, you can display a loading state.

The loading state will be displayed when the data view activeState value is loading.

You can create your loading state by passing either the component groups extension's skeleton table or a customized PatternFly empty state to the loading key of headStates or bodyStates.