EXTERNAL - Documentation

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 Add Added Remove Heading
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-sm - Responsive up to the small breakpoint.
Heading Heading Heading Add Added Remove Heading
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-md - Responsive up to the medium breakpoint.
Heading Heading Heading Add Added Remove Heading
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-lg - Responsive up to the large breakpoint.
Heading Heading Heading Add Added Remove Heading
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-xl - Responsive up to the extra large breakpoint.
Heading Heading Heading Add Added Remove Heading
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Content Table Link Content plus-circle check
Showing 1 to 10 of 1,1234 entries
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 &gt;</a>
            <a class="slb-table__link" href="#">Last &gt;&gt;</a>
        </nav>
    </div>
</div>
Source: components/_table.scss