Documentation

Search value is required

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.
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__header--alt - Alternative header.
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__header--comparison - Comparison table.
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\table.hbs Copy 
<table class="slb-table">
    <thead>
        <tr class="slb-table__header [modifier class]">
            <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-purple"> </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-aqua"> </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-yellow-dark"> </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-alt"> </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;&#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