Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
Tables
Tables should be used when displaying a set of comparable data. The form of a table will be defined for mobile with a maximum number of three columns in view. The form of a table will be fully displayed from tablet up. Table content can be left or right aligned and can contain standard text or form elements. Colspan and Rowspan classes can be added to span content. The default styling will make the tables scroll horizontally when the browser window is narrower than the data being displayed.
Standard Table
| Table header 1 | Table header 2 | Table header 3 | Table header 4 |
|---|---|---|---|
| Value 1 | Value 5 | Value 9 | Value 13 |
| Value 2 | Value 6 | Value 10 | Value 14 |
| Value 3 | Value 7 | Value 11 | Value 15 |
| Value 4 | Value 8 | Value 12 | Value 16 |
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon">Table header 1</th>
<th class="rc-table__th rc-espilon">Table header 2</th>
<th class="rc-table__th rc-espilon">Table header 3</th>
<th class="rc-table__th rc-espilon">Table header 4</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">Value 1</td>
<td class="rc-table__td">Value 5</td>
<td class="rc-table__td">Value 9</td>
<td class="rc-table__td">Value 13</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Value 2</td>
<td class="rc-table__td">Value 6</td>
<td class="rc-table__td">Value 10</td>
<td class="rc-table__td">Value 14</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Value 3</td>
<td class="rc-table__td">Value 7</td>
<td class="rc-table__td">Value 11</td>
<td class="rc-table__td">Value 15</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">Value 4</td>
<td class="rc-table__td">Value 8</td>
<td class="rc-table__td">Value 12</td>
<td class="rc-table__td">Value 16</td>
</tr>
</tbody>
</table>
</div>
</div>Copied!
Selectable data table
|
|
Table header 1 | Table header 2 | Table header 3 | Table header 4 |
|---|---|---|---|---|
|
|
Value 1 | Value 5 | Value 9 | Value 13 |
|
|
Value 2 | Value 6 | Value 10 | Value 14 |
|
|
Value 3 | Value 7 | Value 11 | Value 15 |
|
|
Value 4 | Value 8 | Value 12 | Value 16 |
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table rc-table__table--selectable" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th">
<div class="rc-input rc-input--inline">
<input class="rc-input__checkbox" id="checkbox-1" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="checkbox-1"></label>
</div>
</th>
<th class="rc-table__th rc-espilon">Table header 1</th>
<th class="rc-table__th rc-espilon">Table header 2</th>
<th class="rc-table__th rc-espilon">Table header 3</th>
<th class="rc-table__th rc-espilon">Table header 4</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">
<div class="rc-input rc-input--inline">
<input class="rc-input__checkbox" id="checkbox-2" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="checkbox-2"></label>
</div>
</td>
<td class="rc-table__td">Value 1</td>
<td class="rc-table__td">Value 5</td>
<td class="rc-table__td">Value 9</td>
<td class="rc-table__td">Value 13</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">
<div class="rc-input rc-input--inline">
<input class="rc-input__checkbox" id="checkbox-3" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="checkbox-3"></label>
</div>
</td>
<td class="rc-table__td">Value 2</td>
<td class="rc-table__td">Value 6</td>
<td class="rc-table__td">Value 10</td>
<td class="rc-table__td">Value 14</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">
<div class="rc-input rc-input--inline">
<input class="rc-input__checkbox" id="checkbox-4" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="checkbox-4"></label>
</div>
</td>
<td class="rc-table__td">Value 3</td>
<td class="rc-table__td">Value 7</td>
<td class="rc-table__td">Value 11</td>
<td class="rc-table__td">Value 15</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">
<div class="rc-input rc-input--inline">
<input class="rc-input__checkbox" id="checkbox-5" type="checkbox" name="checkbox" value="input-label" />
<label class="rc-input__label--inline" for="checkbox-5"></label>
</div>
</td>
<td class="rc-table__td">Value 4</td>
<td class="rc-table__td">Value 8</td>
<td class="rc-table__td">Value 12</td>
<td class="rc-table__td">Value 16</td>
</tr>
</tbody>
</table>
</div>
</div>Copied!
Sortable data table
Tables can be made sortable by adding rc-table__table--sortable class to it. By default, elements are sorted alphabetically. You can also use one of 4 defined sort methods - "monthname", "date", "currency" and "dotstep". Just add data-sort-method attribute to header.
| Month | Date | Currency | Version |
|---|---|---|---|
| April | 1/09/1966 | £20.63 | 31.0.1650.57 |
| May | 12-2-70 | £0.79 | 11.2 |
| December | 04/07/75 | £4.73 | 3.0.0 |
| August | 12-05-1955 | £14.73 | 3.1.2 |
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table rc-table__table--sortable" data-js-table="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon" data-sort-method="monthname">Month</th>
<th class="rc-table__th rc-espilon" data-sort-method="date">Date</th>
<th class="rc-table__th rc-espilon" data-sort-method="currency">Currency</th>
<th class="rc-table__th rc-espilon" data-sort-method="dotstep">Version</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">April</td>
<td class="rc-table__td">1/09/1966</td>
<td class="rc-table__td">£20.63</td>
<td class="rc-table__td">31.0.1650.57</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">May</td>
<td class="rc-table__td">12-2-70</td>
<td class="rc-table__td">£0.79</td>
<td class="rc-table__td">11.2</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">December</td>
<td class="rc-table__td">04/07/75</td>
<td class="rc-table__td">£4.73</td>
<td class="rc-table__td">3.0.0</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">August</td>
<td class="rc-table__td">12-05-1955</td>
<td class="rc-table__td">£14.73</td>
<td class="rc-table__td">3.1.2</td>
</tr>
</tbody>
</table>
</div>
</div>Copied!
Sortable data table with custom sorting method
You can add your own, custom sorting method. Inititialize table manually with data-js-table-custom attribute, and pass sort method in options.
window.addEventListener('load', () => {
const sortMethods = {
weekdays: {
testItem: (item) => {
return item.search(/(Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday)/i) !== -1;
},
sort: (a, b) => {
const weekdays = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
];
return weekdays.indexOf(b) - weekdays.indexOf(a);
}
}
};
if (window.webpackComplete) {
RCDL.features.tables.init('[data-js-table-custom]', {sortMethods});
}
else {
document.addEventListener('rc_webpack_done', () => {
RCDL.features.tables.init('[data-js-table-custom]', {sortMethods});
});
}
});
| Month | Date | Currency | Version | Days |
|---|---|---|---|---|
| April | 1/09/1966 | £20.63 | 31.0.1650.57 | Tuesday |
| May | 12-2-70 | £0.79 | 11.2 | Friday |
| December | 04/07/75 | £4.73 | 3.0.0 | Sunday |
| August | 12-05-1955 | £14.73 | 3.1.2 | Monday |
<div class="rc-table">
<div class="rc-scroll--x">
<table class="rc-table__table rc-table__table--sortable" data-js-table-custom="">
<thead class="rc-table__thead">
<tr class="rc-table__row">
<th class="rc-table__th rc-espilon" data-sort-method="monthname">Month</th>
<th class="rc-table__th rc-espilon" data-sort-method="date">Date</th>
<th class="rc-table__th rc-espilon" data-sort-method="currency">Currency</th>
<th class="rc-table__th rc-espilon" data-sort-method="dotstep">Version</th>
<th class="rc-table__th rc-espilon" data-sort-method="weekdays">Days</th>
</tr>
</thead>
<tbody class="rc-table__tbody">
<tr class="rc-table__row">
<td class="rc-table__td">April</td>
<td class="rc-table__td">1/09/1966</td>
<td class="rc-table__td">£20.63</td>
<td class="rc-table__td">31.0.1650.57</td>
<td class="rc-table__td">Tuesday</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">May</td>
<td class="rc-table__td">12-2-70</td>
<td class="rc-table__td">£0.79</td>
<td class="rc-table__td">11.2</td>
<td class="rc-table__td">Friday</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">December</td>
<td class="rc-table__td">04/07/75</td>
<td class="rc-table__td">£4.73</td>
<td class="rc-table__td">3.0.0</td>
<td class="rc-table__td">Sunday</td>
</tr>
<tr class="rc-table__row">
<td class="rc-table__td">August</td>
<td class="rc-table__td">12-05-1955</td>
<td class="rc-table__td">£14.73</td>
<td class="rc-table__td">3.1.2</td>
<td class="rc-table__td">Monday</td>
</tr>
</tbody>
</table>
</div>
</div>Copied!