Working together for the ultimate brand experience

Royal Canin Design Language

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!