| section | Extensions | |||
|---|---|---|---|---|
| subsection | Component groups | |||
| id | Skeleton table | |||
| source | react | |||
| propComponents |
|
|||
| sourceLink | https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/SkeletonTable/SkeletonTable.md |
import { RowSelectVariant, TableVariant, Table } from '@patternfly/react-table'; import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; import SkeletonTableHead from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableHead'; import SkeletonTableBody from '@patternfly/react-component-groups/dist/dynamic/SkeletonTableBody'; import { FC, ReactNode, useState, useEffect } from 'react';
The skeleton table component is used to display placeholder "skeletons" within a table as its contents load.
To indicate that a table's cells are still loading, a basic skeleton table uses the skeleton component to place a placeholder skeleton in each cell. Once the data is loaded, the skeleton table is replaced with a table containing the real data.
The skeleton table can be displayed as a compact table by setting the variant prop to compact. Borders can be toggled off by setting borders to false.
The skeleton table can display selectable columns by setting the isSelectable prop to true. The selectVariant prop determines if radio buttons or checkboxes are used.
The skeleton table can display the indicator for expandable rows by setting the isExpandable prop to true.
Custom column headers can be provided by passing an array of strings or Th components to the columns prop instead of an array of strings. This allows you to support sorting on columns, add custom content, or style the column headers.
The following example demonstrates the typical behavior of a skeleton table transitioning to a normal table as the data becomes available.
To simulate this loading process, click the "Reload table" button and wait for the data to populate.
You can render only the <Thead> part of the skeleton table by using the <SkeletonTableHead/>.
You can also render only the <Tbody> part of the skeleton table by using the <SkeletonTableBody/>.