Standard Life Digital Framework

Responsive 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.

Responsive tables allow tables to be scrolled horizontally with ease.

Accessible attributes

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

Modifier selectors

Modifier selector	Description
`slb-table-responsive`	Responsive behaviour all the time.
`slb-table-responsive-sm`	Responsive up to the small breakpoint.
`slb-table-responsive-md`	Responsive up to the medium breakpoint.
`slb-table-responsive-lg`	Responsive up to the large breakpoint.
`slb-table-responsive-sl`	Responsive up to the extra large breakpoint.

.slb-table-responsive - Always responsive behaviour.

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-responsive-sm - Responsive up to the small breakpoint.

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-responsive-md - Responsive up to the medium breakpoint.

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-responsive-lg - Responsive up to the large breakpoint.

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-responsive-xl - Responsive up to the extra large breakpoint.

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\responsive-table.hbs

Copy

<div class="[modifier class]">
    <table class="slb-table">
        <thead>
            <tr class="slb-table__header">
                <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>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>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>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>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>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; First</a>
            <a href="#" class="slb-table__link slb-table__link--disabled">&lt; Previous</a>
            <span>Page <strong>1</strong></span>
            <a class="slb-table__link" href="#">Next &#062; <!-- &gt; --></a>
            <a class="slb-table__link" href="#">Last &#062; <!-- &gt; -->&#062; <!-- &gt; --></a>
        </nav>
    </div>
</div>

Source: components/_table.scss