Back to Designs page

Table of Contents

Related Research

No research entries have been linked to this design.

Resources

No resources available for this entry.

Additional tags

No tags are assigned to this entry.

Tables

Author: Kevin Hatchoua | Last edit: October 03, 2024 | Design type: Tables | Product area: Hybrid Cloud Console

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

Tables can have view management actions such as Column management and Expand all.

Column management

Table columns can be shown or hidden from view using the column management feature. Tables that offer column management provide an action button or overflow menu item in the table toolbar area. When that action is selected a modal dialog is displayed that lists the table columns. Unchecking a list item will hide it from the table view, checking a list item will display it. Optionally, the component can also make it possible to reorder the columns presented in the table. The table display is updated once changes made in the dialog are saved. View PatternFly demo.

When offering table filtering with column management, provide filters for columns included in the table. Allow filtering on columns even if they have been hidden from view through column management.

A table with table management actions within the kebab menu is illustrated below.

 

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

24px padding all around

OCM

Attempting the clusters list on a card:

Clusters list on pages like OCP does

 

OpenShift Console

OCP is placing tables directly on the page (no card) but they have added additional padding so the table isn’t right up to the navigation / right side of the page.