Skip to Content
Patternfly Logo

Table

Bulk selectionBulk selectorUsageEmpty states

Bulk selection

Use a bulk selection pattern when you want to select or deselect multiple items in a content view (list, table, or card grid). The bulk selector uses a Split button component to control selection from the Toolbar. Besides controlling selection, the bulk selector reflects the selection status of the related component (partially selected, all items selected, or no items selected).

Bulk selector

The bulk selector is created using a Split button and is always located as the leftmost item in a toolbar.

Bulk selector

1. Bulk selector: The bulk selector uses a split button to combine a selection checkbox with a dropdown menu.

2. Checkbox: The state of the checkbox reflects the current selection state of the list, table, or card grid.

Bulk Selector Checkbox States

3. Items selected: This text always reflects the total number of items selected. If pagination is in use, it will reflect the items selected across all pages.

4. Menu: at a minimum the menu will include:

  • Select none - to clear selections across all pages.
  • Select page - to select all items on the current page (when pagination is in use).
  • Select all - to select all items across pages.

Additional menu items can be added to select items that match some predetermined filter criteria, such as “Red Cars or Blue Cars” / “Running VMs”, etc.

Usage

Bulk selection from the toolbar

The example below shows a bulk selector placed in a toolbar above a table using pagination.

Bulk selection from toolbar

There are 50 total items in this dataset spread across 10 pages (5 items per page), but only the first page has been selected and therefore partial selection is reflected in the checkbox. The user may select (or deselect) additional items either through the use of the bulk selection checkbox, the bulk selection menu, or by clicking on the checkbox at the front of a row. The selected items count will update whenever selection is changed.

Bulk selection and global actions

Bulk selection is often used to select multiple items and perform an action on them. Note that after an action is completed, the selection state remains as is until the user changes the selection.

Integrated bulk selection for tables

Tables are unique to other view in that they include integrated bulk selection by default. Below is an example of a PatternFly table component with integrated bulk selection in the header row.

Integrated bulk selection in a table

1. Bulk selection checkbox: A checkbox in the header row of a table will select (or deselect) all items in the table or all items on the current page if pagination is in use.

In PatternFly we recommend that integrated bulk selection only be used in cases where a table is placed in a page without a toolbar. Whenever a toolbar is present, we recommend using the toolbar to control bulk selection. This will provide for better visibility on the count of selected items, lead to better consistency between view types, and allow for more variety of selection options.

Note: To hide integrated bulk selection and enable selection control from the toolbar in the PatternFly React Table component, set the canSelectAll prop to ‘false’.

Bulk select

1 - 20 of 100
1 - 20 of 100

Please wait while loading data

1 - 20 of 100

Column management

1 - 10 of 37
1 - 10 of 37
RepositoriesBranchesPull requestsWorkspacesLast commit
Node 1
siemur/test-space
10 25 52 days agoAction link
Node 2
siemur/test-space
8 30 22 days agoAction link
Node 3
siemur/test-space
12 48 1330 days agoAction link
Node 4
siemur/test-space
3 8 208 days agoAction link
Node 5
siemur/test-space
34 21 262 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

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).

Automatic pagination

1 - 10 of 12
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
0 - 0 of 0
TitleBody
Skip to content
Patternfly Logo
Avatar image

Main title

Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5.

TitleBody

Empty states

This demonstrates 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. Remove all filters or clear all filters to show results.

Loading

ServersThreadsApplicationsWorkspacesStatusLocation

Error

ServersThreadsApplicationsWorkspacesStatusLocation

Unable to connect

There was an error retrieving data. Check your connection and try again.