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

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

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

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