Skip to main content

Table Selection on basic tables

Patterns and recommendation for handling table selection and bulk actions on basic tables

When designing a table with selection (and bulk actions), the following are recommendations in order to help us provide a consistent experience across usages.

No items are selected

If there is nothing selected in the table, it is recommended to simply show a count of the items on the page along with the total number of items across all pages. Adding too many items here will make it harder to find this information. Actions like column selection or table styling should go in a different area.

The preferred format for this is Showing {x}-{pageCount} of {totalCount}.

Do not show the bulk action menu if nothing is selected.

Including the bulk action button prior to any selection clutters the existing toolbar and makes it less prominent when items are selected.

Some items are selected

Once a few items are selected, then the page count information should change to display the selection count in a primary button. This should be a small sized button with an arrowDown icon to help indicate that this is clickable and other actions are available.

All items on a page are selected

By clicking the checkbox in the header, all items can be selected on the page. This should then also provide the option to select all items across all pages.

All items on all pages are selected

If all items are selected, then the option to clear the selection should be shown.