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.

Skeleton

Selector: ds-table-skeleton[columnQuantity][rowsQuantity]

Class: DSTableSkeletonComponent

Use case example

Inputs

Name	Type	Default	Required	Description
columnQuantity	number	undefined	Yes	Defines the column numbers
rowsQuantity	number	undefined	Yes	Defines the row numbers
hasCheckboxColumn	boolean	false	No	In case there are checkbox columns. Adds a <td> element with rs-table--responsive__cell-collapse CSS class applied

Outputs

None

Models

None

---

Empty state

Selector: ds-table-empty-state[title][nbOfColumns]

Class: DSTableEmptyStateComponent

Use case example

Inputs

Name	Type	Default	Required	Description
nbOfColumns	number	undefined	Yes	Defines the column numbers
title	string	null	No	Sets an empty state title
clearText	string	null	No	Enables a link in the bottom of the div to be used for any specific reason
paragraph	string	null	Yes	The main description of the no state

Outputs

Name	Type	Description
clear	EventEmitter	Emits when the link is clicked

Models

None

---

Sorting directive

Selector: dsTableSorting[sortTranslations][sortDisabled][sortSelected][sortType]

Class: DSSortingComponent

Use case example

Inputs

Name	Type	Default	Required	Description
sortTranslations	object	undefined	Yes	title, subtitle and sorting translations
sortDisabled	boolean	false	No	Disables the sorting functionality
sortType	string | enum SortType	undefined	Yes	Selected sorting type: ascending, descending, none. Use enum SortType
sortSelected	boolean	false	No	Defines if it is the selected theader

Outputs

Name	Type	Description
sortClick	EventEmitter	Emits the current sort type and the id of the host element when is clicked

Models

        interface SortTranslations {
            columnName: string;
            columnSubtitle?: string;
            ariaLabelSortedByASC: string;
            ariaLabelSortedByDESC: string;
            ariaLabelNotApplicable: string;
            ariaLabelSortedBy: string;
        }

        interface SortClickEvent {
	        sortType: SortType;
	        id?: string;
        }

        enum SortType {
            ASC = 'ascending',
            DESC = 'descending',
            NONE = 'none',
        }