Standard Life Digital Framework

Table

full screen new window example HTML markup

The table component is a data structure that organizes information into rows and columns.

Usage

Place the table contained within the page structure.

The comparison variation requires an additional class on the table content classes, this should look like the following slb-table__content slb-table__content--comparison.

Accessible attributes

Accessible attribute	Description
`scope="row/col"`	Indicates that the cell is row or column.

Modifier selectors

Modifier selector	Description
`slb-table__header`	Default styling for the header of the table.
`slb-table__header--alt`	Alternative styling for the header of the table.
`slb-table__header--comparison`	Comparison styling for the header and content of the table.

.slb-table__header - Default header.

Heading	Heading	Heading
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content

.slb-table__header--alt - Alternative header.

Heading	Heading	Heading
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content

.slb-table__header--comparison - Comparison table.

Heading	Heading	Heading
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content
Content	Table Link	Content

Markup: table\table.hbs

Copy

<table class="slb-table">
    <thead>
        <tr class="slb-table__header [modifier class]">
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Add</th>
            <th scope="col">Added</th>
            <th scope="col">Remove</th>
            <th scope="col">Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr class="slb-table__content">
            <td scope="row">Content</td>
            <td><a href="#">Table Link</a></td>
            <td class="slb-colour-blue"><span class="fa fa-hourglass-half mr-1"></span>Content</td>
            <td>
                <svg viewBox="0 0 512 512" class="slb-icon--sm slb-icon--alt"><title>plus-circle</title><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>
            </td>
            <td>
               <svg viewBox="0 0 512 512" class="slb-icon--sm slb-table__icon--green"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            </td>
            <td>
                <span class="fa fa-trash slb-colour-blue-alt"></span>
            </td>
            <td><button class="slb-table__button " href="#">Table button</button></td>
        </tr>
        <tr class="slb-table__content">
            <td scope="row">Content</td>
            <td><a href="#">Table Link</a></td>
            <td class="slb-colour-blue"><span class="fa fa-check-circle mr-1"></span>Content</td>
            <td>
                <svg viewBox="0 0 512 512" class="slb-icon--sm slb-icon--alt"><title>plus-circle</title><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>
            </td>
            <td>
               <svg viewBox="0 0 512 512" class="slb-icon--sm slb-table__icon--green"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            </td>
            <td>
                <span class="fa fa-trash slb-colour-blue-alt"></span>
            </td>
            <td><button class="slb-table__button " href="#">Table button</button></td>
        </tr>
        <tr class="slb-table__content">
            <td scope="row">Content</td>
            <td><a href="#">Table Link</a></td>
            <td class="slb-colour-blue"><span class="fa fa-check-circle mr-1"></span>Content</td>
            <td>
                <svg viewBox="0 0 512 512" class="slb-icon--sm slb-icon--alt"><title>plus-circle</title><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>
            </td>
            <td>
               <svg viewBox="0 0 512 512" class="slb-icon--sm slb-table__icon--green"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            </td>
            <td>
                <span class="fa fa-trash slb-colour-blue-alt"></span>
            </td>
            <td><button class="slb-table__button " href="#">Table button</button></td>
        </tr>
        <tr class="slb-table__content ">
            <td scope="row">Content</td>
            <td><a href="#">Table Link</a></td>
            <td class="slb-colour-blue"><span class="fa fa-check-circle mr-1"></span>Content</td>
            <td>
                <svg viewBox="0 0 512 512" class="slb-icon--sm slb-icon--alt"><title>plus-circle</title><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>
            </td>
            <td>
               <svg viewBox="0 0 512 512" class="slb-icon--sm slb-table__icon--green"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            </td>
            <td>
                <span class="fa fa-trash slb-colour-blue-alt"></span>
            </td>
            <td><button class="slb-table__button " href="#">Table button</button></td>
        </tr>
        <tr class="slb-table__content">
            <td scope="row">Content</td>
            <td><a href="#">Table Link</a></td>
            <td class="slb-colour-blue"><span class="fa fa-check-circle mr-1"></span>Content</td>
            <td>
                <svg viewBox="0 0 512 512" class="slb-icon--sm slb-icon--alt"><title>plus-circle</title><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>
            </td>
            <td>
               <svg viewBox="0 0 512 512" class="slb-icon--sm slb-table__icon--green"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            </td>
            <td>
                <span class="fa fa-trash slb-colour-blue-alt"></span>
            </td>
            <td><button class="slb-table__button " href="#">Table button</button></td>
        </tr>
    </tbody>
</table>
<div class="slb-table__footer">
    <div>
        Showing <strong>1</strong> to <strong>10</strong> of <strong>1,1234</strong> entries
    </div>
    <nav aria-label="Table navigation">
        <a href="#" class="slb-table__link slb-table__link--disabled">&lt;&lt;&#160; <!-- &nbsp; -->First</a>
        <a href="#" class="slb-table__link slb-table__link--disabled">&lt;&#160; <!-- &nbsp; -->Previous</a>
        <span>Page <strong>1</strong></span>
        <a class="slb-table__link" href="#">Next&#160; <!-- &nbsp; -->&#062; <!-- &gt; --></a>
        <a class="slb-table__link" href="#">Last&#160; <!-- &nbsp; -->&#062; <!-- &gt; -->&#062; <!-- &gt; --></a>
    </nav>
</div>

Source: components/_table.scss