Skip to content
Patternfly Logo

Table

Bulk select

1 - 20 of 100 items
1 - 20 of 100

Please wait while loading data

1 - 20 of 100

Expand/collapse all

Header cellBranchesPull requestsWorkspacesLast Commit
onetwothreefourfive
parent - 1twothreefourfive
parent - 2twothreefourfive
parent - 3twothreefourfive

Column management

1 - 10 of 37
1 - 10 of 37
RepositoriesBranchesPull requestsWorkspacesLast commit
Node 1
siemur/test-space
10 25 5 2 days agoAction link
Node 2
siemur/test-space
8 30 2 2 days agoAction link
Node 3
siemur/test-space
12 48 13 30 days agoAction link
Node 4
siemur/test-space
3 8 20 8 days agoAction link
Node 5
siemur/test-space
34 21 26 2 days agoAction link
1 - 10 of 37

Column management with draggable

1 - 10 of 37
1 - 10 of 37
RepositoriesBranchesPull requestsWorkspacesLast commit
Node 1
siemur/test-space
10 25 5 2 days agoAction link
Node 2
siemur/test-space
8 30 2 2 days agoAction link
Node 3
siemur/test-space
12 48 13 30 days agoAction link
Node 4
siemur/test-space
3 8 20 8 days agoAction link
Node 5
siemur/test-space
34 21 26 2 days agoAction link
1 - 10 of 37

Filterable

ServersThreadsApplicationsWorkspacesStatusLocation
US-Node 15255StoppedRaleigh
US-Node 25302DownWestford
US-Node 3133512DegradedBoston
US-Node 42518Needs MaintainenceRaleigh
US-Node 57305RunningBoston
US-Node 652015StoppedRaleigh
CZ-Node 1124813DownBrno
CZ-Node 23820RunningBrno
CZ-Remote-Node 1152010DownBrno
Bangalore-Node 1203030RunningBangalore

Sortable - responsive

This is an example of a responive sortable table. When the screen size is small, the table will change to a compact format and a new toolbar item will be displayed to control sorting.

Automatic pagination

The below example illustrates the defaultToFullPage prop, which makes the following changes when the user sets the number of items to display per page to an amount that exceeds the remaining amount of data:

  • The component automatically changes the page back to the last full page of results, rather than defaulting to the final page of results.

To demonstrate this, navigate to the last page of data below using the >> navigation arrows, then use the dropdown selector to change the view to 5 per page.

  • The default behavior would show the last page of results, which would only contain the last two rows (rows 11 - 12).
  • The defaultToFullPage prop navigates you back to the previous page which does contain a full page of 5 rows (rows 6 - 10).
1 - 10 of 12 items
1 - 10 of 12
First columnSecond columnThird column
Row 1 column 1Row 1 column 2Row 1 column 3
Row 2 column 1Row 2 column 2Row 2 column 3
Row 3 column 1Row 3 column 2Row 3 column 3
Row 4 column 1Row 4 column 2Row 4 column 3
Row 5 column 1Row 5 column 2Row 5 column 3
Row 6 column 1Row 6 column 2Row 6 column 3
Row 7 column 1Row 7 column 2Row 7 column 3
Row 8 column 1Row 8 column 2Row 8 column 3
Row 9 column 1Row 9 column 2Row 9 column 3
Row 10 column 1Row 10 column 2Row 10 column 3

Pagination

0 - 0 of 0 items
0 - 0 of 0
TitleBody

Empty states

These examples demonstrate the use of an Empty State component inside of a Table. Empty states are useful in a table when a filter returns no results, while data is loading, or when any type of error or exception condition occurs.

Empty

ServersThreadsApplicationsWorkspacesStatusLocation
No results found
No results match this filter criteria. Clear all filters and try again.

Loading

ServersThreadsApplicationsWorkspacesStatusLocation

Error

ServersThreadsApplicationsWorkspacesStatusLocation

Unable to connect

There was an error retrieving data. Check your connection and reload the page.

View source on GitHub