Tables

Design type: Tables | Product area: Hybrid Cloud Console

Author: Kevin Hatchoua
Last edit: March 21, 2023

Toolbars

Spacing

Outer spacing on a toolbar should be 16px around.

(As of Jan 18 ‘20, this is a customization to override a 24px spacer, Related PF issue: https://github.com/patternfly/patternfly-design/issues/993 )

Filters

Content standards: sentence case

The filter input field’s searching category should be in lowercase

Treatment of pre-existing filters on the page

If your user lands on a page that already has pre-existing filters on it, it needs to be added as an attribute in the filter, with a chip, to make the user aware that this filter is on.

Export button

Go to this doc for how the export button works, what exports when etc.

Placement: Lives in the toolbar as an icon. Always placed left of the kebab.

Delete/Remove action colors in kebabs

Delete or Remove buttons should always be black (never red) in kebabs.

The initial thought for potentially making it red was to emphasize the destructiveness of the action, however, we concluded that having a [warning] modal to confirm the action is enough of a warning. You can also elect to make the button in the modal red, to emphasize the destructiveness of the action.

THIS

NOT THIS

Pagination

Default setting

The default pagination you should ask for on your table is 20 items per page.

(currently, the default seems to be 10, but Margot is going to drive an effort to change this to 20 from now on - 3/27/2020)

Compact vs full

Use compact pagination in the top toolbar, but full pagination at the bottom of the table!

Updating table content

A general rule of thumb:

If the action changes the order of the rows, bring the user back to the first page of the table.
If the action does not change the order of the rows, keep the user on the table page they are currently on.

Filtering paginated content

If the data contained in a table changes by adding or removing filters, the table is treated as “new,” and the user is brought back to the first “page” of the table.

Sorting paginated content

Sorting doesn’t change the data contained in the table, but there is no value in retaining the “page.” The new sort would have no connection to the previous order, and changing the sort would emphasize the “ends” or the list rather than the middle. Because of this, we bring the user back to the first “page” when changing the sort order.

Paginated/filtered content memory

A table’s pagination and filters should stay the same when navigating the application inside a session. The tables should reset to default when loading a new session (logging in.)

Reordering/Adding columns to paginated content

As long as the order of the data contained in the table stays the same, the order and visibility of the columns can be changed while retaining the same “page.”

Table management (WIP)

Tables can have management actions such as:

Table column management
Expand all

These can be placed into a kebab menu, pending more specific designs from PF/Platform.

A table with both actions and table management is shown in the kebab menu.

Expand all

This feature has not been released by PatternFly yet, but when it is, this is what it will look like and where it will be placed.

Bulk select (select all AND select page)

If Bulk selects is applicable then include [1]select none, [2]select a page and [3]select all.

Documentation:

Should have the # that will be selected

If doing destructive, have confirmed

Compliance: https://issues.redhat.com/browse/RHICOMPL-1472

Drift: https://issues.redhat.com/browse/DRFT-233

Inventory: https://issues.redhat.com/browse/RHCLOUD-12712

Advisor: TBD

Export (CVS and JSON)

Export always

Should have [1]CSV (always), [2]JSON (always unless really good reason), [3]PDF (if possible)

Drift: https://issues.redhat.com/browse/DRFT-234

Background

Currently, we have tables on cards on top of a grey background. However, we want to explore moving to tables on white backgrounds. Here is an exploration of the different options and what they would look like.

Option 1

Table going from edge to edge

Option 2

The table on white background, on top of a white card

24px padding all around

Benefits:

Easy CSS change
Expansion does not get hidden by the nav

Non-expandable

Expandable

Option 3

The table is on white background, NOT on top of the card