Documentation

Search value is required

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.
Data with icon Data Links Icons Action Total
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-sm - Responsive up to the small breakpoint.
Data with icon Data Links Icons Action Total
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-md - Responsive up to the medium breakpoint.
Data with icon Data Links Icons Action Total
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-lg - Responsive up to the large breakpoint.
Data with icon Data Links Icons Action Total
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Showing 1 to 10 of 1,1234 entries
.slb-table-responsive-xl - Responsive up to the extra large breakpoint.
Data with icon Data Links Icons Action Total
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
Content Content Details Link to text content Highlight content
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">Data with icon</th>
                <th scope="col">Data</th>
                <th scope="col">Links <span class="fa fa-info-circle"> </span></th>
                <th scope="col">Icons</th>
                <th scope="col">Action <span class="fa fa-info-circle"> </span></th>
                <th scope="col">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr class="slb-table__content">
                <td scope="row"><span class="fa fa-file-text-o slb-colour-blue"> </span> Content</td>
                <td>Content Details</td>
                <td><a class="slb-table__link" href="#">Link to text content</a></td>
                <td>
                    <svg class="slb-icon slb-icon--alt slb-icon--sm" viewBox="0 0 448 512" width="448" height="512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>
                </td>
                <td><button class="slb-table__button " href="#">Table button</button></td>
                <td>Highlight content</td>
            </tr>
            <tr class="slb-table__content">
                <td scope="row"><span class="fa fa-file-text-o slb-colour-blue"> </span> Content</td>
                <td>Content Details</td>
                <td><a class="slb-table__link" href="#">Link to text content</a></td>
                <td>
                    <svg class="slb-icon slb-icon--alt slb-icon--sm" viewBox="0 0 448 512" width="448" height="512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>
                </td>
                <td><button class="slb-table__button " href="#">Table button</button></td>
                <td>Highlight content</td>
            </tr>
            <tr class="slb-table__content">
                <td scope="row"><span class="fa fa-file-text-o slb-colour-blue"> </span> Content</td>
                <td>Content Details</td>
                <td><a class="slb-table__link" href="#">Link to text content</a></td>
                <td>
                    <svg class="slb-icon slb-icon--alt slb-icon--sm" viewBox="0 0 448 512" width="448" height="512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>
                </td>
                <td><button class="slb-table__button " href="#">Table button</button></td>
                <td>Highlight content</td>
            </tr>
            <tr class="slb-table__content">
                <td scope="row"><span class="fa fa-file-text-o slb-colour-blue"> </span> Content</td>
                <td>Content Details</td>
                <td><a class="slb-table__link" href="#">Link to text content</a></td>
                <td>
                    <svg class="slb-icon slb-icon--alt slb-icon--sm" viewBox="0 0 448 512" width="448" height="512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>
                </td>
                <td><button class="slb-table__button " href="#">Table button</button></td>
                <td>Highlight content</td>
            </tr>
            <tr class="slb-table__content">
                <td scope="row"><span class="fa fa-file-text-o slb-colour-blue"> </span> Content</td>
                <td>Content Details</td>
                <td><a class="slb-table__link" href="#">Link to text content</a></td>
                <td>
                    <svg class="slb-icon slb-icon--alt slb-icon--sm" viewBox="0 0 448 512" width="448" height="512"><path d="M0 464V48C0 21.49 21.49 0 48 0h352c26.51 0 48 21.49 48 48v416c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm384-284V76c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v104c0 6.627 5.373 12 12 12h296c6.627 0 12-5.373 12-12zM128 308v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm256 128V268c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-256 0v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm128-128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm0 128v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>
                </td>
                <td><button class="slb-table__button " href="#">Table button</button></td>
                <td>Highlight content</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