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 Table header Table header Table header Table header
Value Value Value Value Value
Value Value Value Value Value
Value Value Value Value Value
Value Value Value Value Value
html
            <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</th>
                    <th class="rc-table__th rc-espilon">Table header</th>
                    <th class="rc-table__th rc-espilon">Table header</th>
                    <th class="rc-table__th rc-espilon">Table header</th>
                    <th class="rc-table__th rc-espilon">Table header</th>
                </tr>
            </thead>
            <tbody class="rc-table__tbody">
                <tr class="rc-table__row">
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                </tr>
                <tr class="rc-table__row">
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                </tr>
                <tr class="rc-table__row">
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                </tr>
                <tr class="rc-table__row">
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                </tr>
            <tbody>
        </table>
    </div>
</div>
        

Selectable data table

Table header Table header Table header Table header
Value Value Value Value
Value Value Value Value
Value Value Value Value
Value Value Value Value
html
            <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</th>
                    <th class="rc-table__th rc-espilon">Table header</th>
                    <th class="rc-table__th rc-espilon">Table header</th>
                    <th class="rc-table__th rc-espilon">Table header</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</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</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</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</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</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</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</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                    <td class="rc-table__td">Value</td>
                </tr>
            <tbody>
        </table>
    </div>
</div>
        

Sortable data table

Table header Table header Table header Table header
One One One One
Two Two Two Two
Three Three Three Three
Four Four Four Four
html
            <div class="rc-table">
    <div class="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">Table header</th>
                    <th class="rc-table__th">Table header</th>
                    <th class="rc-table__th">Table header</th>
                    <th class="rc-table__th">Table header</th>
                </tr>
            </thead>
            <tbody class="rc-table__tbody">
                <tr class="rc-table__row">
                    <td class="rc-table__td">One</td>
                    <td class="rc-table__td">One</td>
                    <td class="rc-table__td">One</td>
                    <td class="rc-table__td">One</td>
                </tr>
                <tr class="rc-table__row">
                    <td class="rc-table__td">Two</td>
                    <td class="rc-table__td">Two</td>
                    <td class="rc-table__td">Two</td>
                    <td class="rc-table__td">Two</td>
                </tr>
                <tr class="rc-table__row">
                    <td class="rc-table__td">Three</td>
                    <td class="rc-table__td">Three</td>
                    <td class="rc-table__td">Three</td>
                    <td class="rc-table__td">Three</td>
                </tr>
                <tr class="rc-table__row">
                    <td class="rc-table__td">Four</td>
                    <td class="rc-table__td">Four</td>
                    <td class="rc-table__td">Four</td>
                    <td class="rc-table__td">Four</td>
                </tr>
            <tbody>
        </table>
    </div>
</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 8th March 2018 [ui_assets/elements/tables.yml]
    Re-ordered nav items
  • 8th March 2018 [ui_assets/elements/tables.yml]
    Ordered elements alpabetically
  • 7th March 2018 [ui_assets/elements/tables.yml]
    Removed '--standard' from list, added min-height to homepage image
  • 1st December 2017 [ui_assets/elements/tables.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/tables.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/elements/tables.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 29th August 2017 [ui_assets/elements/tables.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 19th July 2017 [ui_assets/elements/tables.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/elements/tables.yml]
    Git commit message sync improvements. Folder restructure.
  • 11th July 2017 [ui_assets/elements/tables.yml]
    Added remaining content.