Tables

Types

Specs tables

For product or service specifications, this version offers a minimalistic layout to facilitate scanning. Use this version in product pages and presentations.

Data tables

When users come across more complex sets of data, choose data tables. They offer a complete set of functionnalities to facilitate filtering, sorting, and interactions with those datas.

Anatomy

Specs tables

1. Title
   Title gives context to the specifications given, especially useful when you need to categorize différent specs tables (e.g. mobile phone specs).
2. Spec label
   Use concise and explicit label.
3. Spec value
   Values can be text, number or icons.

Data tables

1. Action zone (optional)
   Use this dedicated area to create actions (e.g. filtering) that applies to the whole table
2. Table
   This contains the actual data lay out in row and columns.
3. Navigation zone
   Inform, interact and navigate with the content displayed (e.g. pagination or number of elements displayed)

Action zone

This grid based customizable zone allows you to design filtering and search patterns. When needed, a filtering zone comes in very handy for users dealing with a lot of data.

As each case can be different, there is no fixed component for the action zone. You can use form elements, the action menu and the single accordion to build your desired filtering system.

Table

1. Table header
   Contains all the column related information and actions. Using concise and relevant labels indicate the information displayed in the column and additional functionalities when needed.
2. Table row
   Each row contains the content of each entry in the table
3. Bulk editing (optional)
   Use bulk editing when users need to perform action on multiple entries at the same time.
4. Column label
   Labels will help users identify the content of the columns.
5. Sorting (optional)
   Allow user to sort their content per column. Either alphabetically and reverse when content is text based, ascending and descending when the content is integer based, chronologically or anti chronologically when then content is date based.
6. Resizing (optional)
   Use resizing functionnality for users dealing with a lot of data. Empower them to manage their workspace the way they're the most comfortable with.
7. Row action zone (optional)
   Use action links to enable actions at row level.

Navigation zone

A opposed to the action zone, each element has its own dedicated space. Please ensure to keep consistency while using this section.

1. Items per page (optional)
   Use a select dropdown offer user the possibility to chose how many items to display per page. When possible, try to remember users' settings.
2. Sample displayed over number of entries (optional)
   
3. Pagination
   

Scroll and fixed elements

Horizontal scroll

Tables often contains a lot of data. To facilite scanning and usage of them, they come with additional options.

When the amount of data is exceeding the viewport width, the content is overflowed. User can easily navigate horizontally within the table.

Optionally, you can fix the first column of the table.

Vertical scroll

If needed, you can also set-up a maximum height to the table. This is especially useful when you want to keep the action zone and the pagination within the same viewport.

When set-up, the table will display a vertical scrollbar whil keeping the header of the table visible.

Data table responsiveness

Mobile version of the data tables have been designed to facilitate scanning and browsing. The row/column lay-out switches to a card style layout, allowing the user to have a complete overview of each table entry.