Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Tables

See deprecated code
expiry date: 30/06/2021

Tables are used to display a certain amount of data in a clear and efficient way. Depending on the type and amount of data, there are several types of tables available.

last modified: 08/06/2022 11:30:04

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.

last modified: 06/12/2021 10:00:05
last modified: 29/07/2022 16:25:05

Specs table

Add rs-table-title class to your main title. Then simply use gridding to display your data.

Title of the specs table

Type of Sim card

Microsim


Handsfree


2G frequency bands (Mhz)

850, 900, 1800, 1900


Handsfree


2G frequency bands (Mhz)

850, 900, 1800, 1900

Negative

Add rs-table-title-neg to rs-table-title title. Don't forget to adapt colors of your content with dark theme colors.

Title of the specs table

Type of Sim card

Microsim


Handsfree


2G frequency bands (Mhz)

850, 900, 1800, 1900


Handsfree


2G frequency bands (Mhz)

850, 900, 1800, 1900


Data table

Accessibility
  • Title of the table must be in a <caption class='rs-table-title'> tag, just after the opening table tag.
  • <th> tags must have a scope attribute. Value of this attribute depends where <th> is:
    • <th scope='col'> in <thead>
    • <th scope='row'> in <tbody>
  • Sorting a column

    Each sortable column has a aria-sort='none' attribute by default.
    If a column is selected, set this attribute to ascending for an ascending order and to descending for an descending order.

Sorting a column

Each sortable column has:

  • a rs-table-sort class
  • a rs-table-sort-link class on its header link
  • a rs-table-sort-icon class on its header link icon
Accessiblity attribute on sortable columns will give them right styles.

Add rs-nowrap class to <th> or <td> to avoid line breaks.

Title of the data table
Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Negative

Add rs-table-neg class to rs-table-data container. Adapt (action) links with their negative version.

Title of the data table
Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Clickable row

To make a row clickable, you have to add jsrs-clickable class on table row.
You must also add at least one link in a cell.

Title of the data table
Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona

Data table expand

Accessibility

Here title is not a <caption> . Use a heading tag instead ( <h2> , <h3> ...).

For accessibility, it's imperative to set the aria-labelledby attribute to indicate the IDs of the elements that label the object. It is used to establish a relationship between components, or groups, and their labels.

"Data table expand" requires same attributes than single accordion.

Add rs-title-expand class to rs-title title.

Title of the data table expand

Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Negative

Add rs-table-neg class to rs-table-data container. Adapt (action) links with their negative version.

Title of the data table expand

Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Data table scroll

Accessibility

Here title is not a <caption> . Use a heading tag instead ( <h2> , <h3> ...).


Vertical

Wrap rs-table into rs-scroll-v container.
Specify a maximum height by adding an utility class (for example: rs-maxh-s40 for 40rem on all devices) on rs-scroll-v container.

Title of the data table scroll: vertical

Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Negative vertical

Add rs-table-neg class to rs-table-data container. Adapt (action) links with their negative version.

Title of the data table scroll: vertical

Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Horizontal

Wrap rs-table into rs-scroll-h container.

Title of the data table scroll: horizontal

Name E-mail Role E-mail Role E-mail Role E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn

Negative horizontal

Add rs-table-neg class to rs-table-data container. Adapt (action) links with their negative version.

Title of the data table scroll: horizontal

Name E-mail Role E-mail Role E-mail Role E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn

Horizontal with fixed first column

Wrap rs-table into rs-scroll-h container.
Add rs-table-fix-fcol class to rs-table table.

Title of the data table scroll: horizontal with fixed first column

Name E-mail Role E-mail Role E-mail Role E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn

Negative horizontal with fixed first column

Add rs-table-neg class to rs-table-data container. Adapt (action) links with their negative version.

Title of the data table scroll: horizontal with fixed first column

Name E-mail Role E-mail Role E-mail Role E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn terry.hughes@mail.com Tallinn

Data table with resizing columns

Add jsrs-table-resize-columns class to rs-table table.

Title of the data table with resizing columns
Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Negative

Add rs-table-neg class to rs-table-data container. Adapt (action) links with their negative version.

Title of the data table with resizing columns
Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn

Data table with icons

Title of the data table with icons
Features Norton Security Free antivirus software
Antivirus
Antispam
Antiphishing
Identity protection
Parental control
Browser protection

Negative

Add rs-table-neg class to rs-table-data container. Adapt (action) links and components with their negative version.

Title of the data table with icons
Features Norton Security Free antivirus software
Antivirus
Antispam
Antiphishing
Identity protection
Parental control
Browser protection

Data table with header and footer

Accessibility

Here title is not a <caption> . Use a heading tag instead ( <h2> , <h3> ...) and add ( ari-labelledby with table id.

  • To include an header to your table, add <header class='rs-table-banner'> with rs-table-banner-top just before the <table> .
  • To include an footer to your table, add <footer class='rs-table-banner'> with rs-table-banner-bottom just after the <table> . rs-table-has-banner-bottom class must be added to the <table> .

Then simply use gridding to display your filters, pagination, etc.

Pagination

Look at the pagination in the example below. It requires some extra classes to be displayed correctly on mobile and on desktop (alignment, rs-table-banner-pagination to separate the 2 parts on mobile...).

Title of the data table with header and footer

Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn
of 10 pages
Items par page

1-10 of 200 items


Negative

Add rs-table-neg class to rs-table-data container. Adapt (action) links and components with their negative version.

Title of the data table with header and footer

Name E-mail Role Actions
Benjamin Richards keanu.chavez@mail.com Montserrat
Victoria Wade will.mccoy@mail.com Barcelona
Johnny Willis pamela.reid@mail.com Madrid
Richard Fox terry.hughes@mail.com Tallinn
of 10 pages
Items par page

1-10 of 200 items


Data table empty

You have to use Empty state template, more info inside the Design System.

Title of the data table with header and footer

Name E-mail Role Actions

No results found

urna dolor euismod non aliquam sit amet sodales sed ante.

Link


Deprecated

EXPIRY DATE: 30/06/2021

The tables below are not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class rs-txt-pp1

Open transactions

Type Reference Pdf Date Due date Status Amount incl. VAT Pay now
Statement 6789543209 pdf 01/01/2015 27/01/2015 A complaint is ongoing €629.82 Pay now
Credit note 6511089742 pdf 05/01/2015 -
The due date has passed
-€58.11
Payment 148 pdf 26/01/2015 -
Payment not yet attributed
-€163.84

Name E-mail Users Role
This cell collapse in small This cell collapse in small This cell collapse in small This cell keep is default behavior
Jack Jackson jack@jackson.com Rootadmin
last modified: 16/09/2022 12:45:14

Configuration metadata (TableSkeletonComponent)

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

Class: TableSkeletonComponent

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


Configuration metadata (TableEmptyStateComponent)

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

Class: TableEmptyStateComponent

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