The skeleton table component is used to display placeholder "skeletons" within a table as its contents load.
Examples
Basic skeleton table
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.
| First | Second |
|---|---|
Compact skeleton table
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.
| First | Second |
|---|---|
Selectable columns
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.
| Data selection table header cell | First | Second |
|---|---|---|
Expandable rows
The skeleton table can display the indicator for expandable rows by setting the isExpandable prop to true.
| Data expansion table header cell | First | Second |
|---|---|---|
Customizable column headers
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.
Full loading simulation
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.
| Repositories | Branches | Pull requests | Workspaces | Last commit |
|---|---|---|---|---|
Skeleton table head
You can render only the <Thead> part of the skeleton table by using the <SkeletonTableHead/>.
| First | Second |
|---|
Skeleton table body
You can also render only the <Tbody> part of the skeleton table by using the <SkeletonTableBody/>.
Props
SkeletonTable
| Name | Type | Default | Description |
|---|---|---|---|
| borders | boolean | true | Flag indicating if the table should have borders |
| caption | React.ReactNode | Any captions that should be added to the table | |
| columns | (ReactNode | { cell: ReactNode; props?: ThProps })[] | Custom columns for the table | |
| columnsCount | number | Number of columns in the table | |
| isExpandable | boolean | Flag indicating if the table is expandable | |
| isSelectable | boolean | Flag indicating if the table is selectable | |
| ouiaId | string | number | 'SkeletonTable' | Custom OUIA ID |
| rowsCount | number | 5 | The number of rows the skeleton table should contain |
| selectVariant | RowSelectVariant | RowSelectVariant.checkbox | Determines if the row selection variant (radio/checkbox) |
| variant | TableVariant | Indicates the table variant |
SkeletonTableHead
| Name | Type | Default | Description |
|---|---|---|---|
| columns | (ReactNode | { cell: ReactNode; props?: ThProps })[] | Custom columns for the table | |
| columnsCount | number | Number of columns in the table | |
| isExpandable | boolean | Flag indicating if the table is expandable | |
| isSelectable | boolean | Flag indicating if the table is selectable | |
| isTreeTable | boolean | Flag indicating if the table is a tree table | |
| ouiaId | string | number | 'SkeletonTableHeader' | Custom OUIA ID |
SkeletonTableBody
| Name | Type | Default | Description |
|---|---|---|---|
| columnsCountrequired | number | Number of columns in the table | |
| isExpandable | boolean | Flag indicating if the table is expandable | |
| isSelectable | boolean | Flag indicating if the table is selectable | |
| ouiaId | string | number | 'SkeletonTableBody' | Custom OUIA ID |
| rowsCount | number | 5 | Number of rows in the table |
| selectVariant | RowSelectVariant | RowSelectVariant.checkbox | Determines if the row selection variant (radio/checkbox) |
