| Vapor CSS

Base

Base style for all tables.

Style sheet: /scss/tables/table.scss

Column 1
Column 2 Column 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Last update: 3:15:44 PM
<table class="table">
    <thead>
    <tr>
        <th class="selection">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button title="Select All" type="button"/>
            </label>
        </th>
        <th class="admin-sort">
            Column 1
            <div class="admin-sort-icon">
                <span class="" title="">
                    <svg viewBox="0 0 260 390" class="tables-sort icon">
                        <path class="asc-arrow" d="m258 131l-128-128-128 128"/>
                        <path class="desc-arrow" d="m1 259l128 128 128-128"/>
                    </svg>
                </span>
            </div>
        </th>
        <th>Column 2</th>
        <th class="admin-sort">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Column 3</span>
            <div class="admin-sort-icon">
                <span class="" title="">
                    <svg viewBox="0 0 260 390" class="tables-sort icon">
                        <path class="asc-arrow" d="m258 131l-128-128-128 128"/>
                        <path class="desc-arrow" d="m1 259l128 128 128-128"/>
                    </svg>
                </span>
            </div>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="selection">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
        </td>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Data 3</span>
        </td>
    </tr>
    <tr class="selected">
        <td class="selection">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
        </td>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Data 3</span>
        </td>
    </tr>
    </tbody>
</table>

<div class="table-last-update">Last update: 3:15:44 PM</div>

Drag and drop

Base style for all tables.

Style sheet: /scss/tables/table.scss

Column 1
Column 2 Column 3
Data 1 Data 1 Data 3
Data 2 Data 2 Data 3
Data 3 Data 3 Data 3
Data 4 Data 4 Data 3
Last update: 3:15:44 PM
<table class="drag-and-drop-table-view table">
    <thead>
    <tr>
        <th class="drag-column"></th>
        <th class="admin-sort">
            Column 1
            <div class="admin-sort-icon">
                <svg viewBox="0 0 260 390" class="tables-sort icon">
                    <path class="asc-arrow" d="m258 131l-128-128-128 128"/>
                    <path class="desc-arrow" d="m1 259l128 128 128-128"/>
                </svg>
            </div>
        </th>
        <th>Column 2</th>
        <th class="admin-sort">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Column 3</span>
            <div class="admin-sort-icon">
                <span class="" title="">
                    <svg viewBox="0 0 260 390" class="tables-sort icon">
                        <path class="asc-arrow" d="m258 131l-128-128-128 128"/>
                        <path class="desc-arrow" d="m1 259l128 128 128-128"/>
                    </svg>
                </span>
            </div>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr draggable="false">
        <td class="handle drag-feedback">
            <svg viewBox="0 0 9 15" class="icon icon-small">
                <g clip-rule="evenodd" fill-rule="evenodd">
                    <path d="M7 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM7 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM7 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zM1 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM1 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM1 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1z">
                    </path>
                </g>
            </svg>
        </td>
        <td class="drag-feedback">Data 1</td>
        <td class="drag-feedback">Data 1</td>
        <td class="drag-feedback">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Data 3</span>
        </td>
    </tr>
    <tr class="selected" draggable="false">
        <td class="handle drag-feedback">
            <svg viewBox="0 0 9 15" class="icon icon-small">
                <g clip-rule="evenodd" fill-rule="evenodd">
                    <path d="M7 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM7 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM7 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zM1 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM1 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM1 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1z">
                    </path>
                </g>
            </svg>
        </td>
        <td class="drag-feedback">Data 2</td>
        <td class="drag-feedback">Data 2</td>
        <td class="drag-feedback">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Data 3</span>
        </td>
    </tr>
    <tr draggable="false">
        <td class="handle drag-feedback">
            <svg viewBox="0 0 9 15" class="icon icon-small">
                <g clip-rule="evenodd" fill-rule="evenodd">
                    <path d="M7 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM7 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM7 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zM1 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM1 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM1 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1z">
                    </path>
                </g>
            </svg>
        </td>
        <td class="drag-feedback">Data 3</td>
        <td class="drag-feedback">Data 3</td>
        <td class="drag-feedback">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Data 3</span>
        </td>
    </tr>
    <tr draggable="false">
        <td class="handle drag-feedback">
            <svg viewBox="0 0 9 15" class="icon icon-small">
                <g clip-rule="evenodd" fill-rule="evenodd">
                    <path d="M7 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM7 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM7 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zM1 12h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zM1 6h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM1 0h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1z">
                    </path>
                </g>
            </svg>
        </td>
        <td class="drag-feedback">Data 4</td>
        <td class="drag-feedback">Data 4</td>
        <td class="drag-feedback">
            <label class="coveo-checkbox-label">
                <input type="checkbox" class="coveo-checkbox">
                <button type="button"></button>
            </label>
            <span class="cell-content">Data 3</span>
        </td>
    </tr>
    </tbody>
</table>

<div class="table-last-update">Last update: 3:15:44 PM</div>

<script>
    $('.handle').mousedown(function() {
        $(this.parentElement).prop('draggable', true);
    });

    $('.handle').mouseup(function() {
        $(document.body).find('.drag-and-drop-table-view tr').prop('draggable', false);
    });

    var dragAndDropTableRow = $('.drag-and-drop-table-view').find('tbody tr');
    var elementDragged;

    dragAndDropTableRow.on('dragstart', function(e) {
        e = e.originalEvent || e;

        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.dropEffect = 'move';
        e.dataTransfer.setData('text', 'drag');

        elementDragged = e.currentTarget;
    });

    dragAndDropTableRow.on('dragenter', function() {
        dragAndDropTableRow.removeClass('drag-over');
        $(this).addClass('drag-over');
    });

    dragAndDropTableRow.on('dragover', function() {
        return false;
    });

    dragAndDropTableRow.off('drop');
    dragAndDropTableRow.on('drop', function(e) {
        $(this).removeClass('drag-over');
        const table = e.currentTarget.parentNode;
        if (elementDragged.previousElementSibling === e.currentTarget) {
            table.insertBefore(elementDragged, e.currentTarget);
        } else {
            const previousElement = e.currentTarget.nextElementSibling;
            table.insertBefore(e.currentTarget, elementDragged);
            table.insertBefore(elementDragged, previousElement);
        }
    });

    dragAndDropTableRow.on('dragenter dragend dragleave dragover dragexit drop', function(e) {
        e.preventDefault();
    });
</script>

Fixed header

Base markup to implement a simple table with a fixed header in pure CSS.

Style sheet: /scss/tables/fixed-header-table.scss

Selected
Column 1
Column 1
Column 2
Column 2
Column 3
Column 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
<div class="fixed-header-table-container">
    <!-- You need to set the height off your table body (height of the scrolling box). -->
    <div class="fixed-header-table" style="height: 140px">
        <table class="table">
            <thead>
            <tr>
                <th class="admin-sort">
                    <div class="fixed-header-container">
                        <label class="coveo-checkbox-label mr1">
                            <input type="checkbox" class="coveo-checkbox">
                            <button title="Select All" type="button"></button>
                        </label>
                        Selected
                        <div class="admin-sort-icon">
                            <span>
                                <svg viewBox="0 0 260 390" class="tables-sort icon">
                                    <path class="asc-arrow" d="m258 131l-128-128-128 128"/>
                                    <path class="desc-arrow" d="m1 259l128 128 128-128"/>
                                </svg>
                            </span>
                        </div>
                    </div>
                </th>
                <th class="admin-sort">
                    Column 1
                    <div class="fixed-header-container">
                        Column 1
                        <div class="admin-sort-icon">
                            <span>
                                <svg viewBox="0 0 260 390" class="tables-sort icon">
                                    <path class="asc-arrow" d="m258 131l-128-128-128 128"/>
                                    <path class="desc-arrow" d="m1 259l128 128 128-128"/>
                                </svg>
                            </span>
                        </div>
                    </div>
                </th>
                <th>
                    Column 2
                    <div class="fixed-header-container">
                        Column 2
                    </div>
                </th>
                <th class="admin-sort">
                    Column 3
                    <div class="fixed-header-container">
                        Column 3
                        <div class="admin-sort-icon">
                            <span>
                                <svg viewBox="0 0 260 390" class="tables-sort icon">
                                    <path class="asc-arrow" d="m258 131l-128-128-128 128"/>
                                    <path class="desc-arrow" d="m1 259l128 128 128-128"/>
                                </svg>
                            </span>
                        </div>
                    </div>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

Actions container

This defines how to set a filter box for a table and where to place actions button for each table elements. Add the mod-border-top class when the table is not right under the panel-header.

Style sheet: /scss/tables/table-actions.scss

Filter label: item we are filtering on
Edit Activity Copy More
Are you sure? Yes No
Column 1 Column 2
Data 1 Data 2
Data 1 Data 2
<div class="coveo-table-actions-container mod-border-top mod-align-header">
    <div class="coveo-table-actions item-filter">
        <span class="item-filter-label">Filter label: </span>
        <span class="item-filter-item">item we are filtering on</span>
        <button class="item-filter-clear">
            <i class="icon fill-dark-blue"><svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg></i>
        </button>
    </div>
    <div class="coveo-table-actions">
        <div class="actions-row">
            <span class="enabled action primary action">
                <a class="inline-flex flex-center">
                    <span class="action-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" class="icon fill-medium-blue">
                            <path d="M15.7 17.1c0 .1-.1.2-.2.2H2.9c-.1 0-.2-.1-.2-.2V4.5c0-.1.1-.2.2-.2h8.6V2.6H2.2c-.7 0-1.2.6-1.2 1.2v14c0 .6.4 1 .9 1.2h14.6c.5-.1.9-.6.9-1.2V8.5h-1.7v8.6z"></path>
                            <path d="M4.4 15.6L8.6 14 19 3.7 16.3 1 6.1 11.2l-1.7 4.4zM16.3 2.4l1.3 1.3-1.2 1.2-1.3-1.3 1.2-1.2zm-9.4 9.5l7.7-7.7 1.3 1.3-7.7 7.7-2 .8.7-2.1z"></path>
                        </svg>
                    </span>
                    <span class="action-label">Edit</span>
                </a>
            </span>
            <span class="enabled action primary-action">
                <a class="inline-flex flex-center">
                    <span class="action-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" class="icon fill-medium-blue">
                            <path d="M10 17.2c-4 0-7.2-3.2-7.2-7.2S6 2.8 10 2.8 17.2 6 17.2 10 14 17.2 10 17.2zM10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9z"></path>
                            <path d="M10.5 5.5H9.1v5.4l4.7 2.8.7-1.1-4-2.4"></path>
                        </svg>
                    </span>
                    <span class="action-label">Activity</span>
                </a>
            </span>
            <span class="enabled action primary-action">
                <span class="enabled inline-flex flex-center">
                    <span class="action-icon">
                        <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-medium-blue">
                            <path d="M128 128h384v384H128z"></path>
                            <path d="M383.875 0H.125v384h96V96h287.75"></path>
                        </svg>
                    </span>
                    <span class="action-label">Copy</span>
                </span>
            </span>
            <span class="dropdown action primary-action open">
                <span class="dropdown-toggle inline-flex flex-center" data-toggle="dropdown">
                    <span class="action-icon">
                        <svg width="20" height="20" viewBox="0 0 512 512" class="icon fill-medium-blue" xmlns="http://www.w3.org/2000/svg">
                            <path d="m0 256c0 141.3 114.3 256 255.7 256 141.6 0 256.3-114.6 256.3-256 0-141.3-114.6-256-256.3-256-141.3 0-255.7 114.6-255.7 256m257-204.8c113.7 0 206.1 91.9 206.1 204.8s-92.4 204.8-206.1 204.8c-113.4 0-205.6-91.9-205.6-204.8s92.3-204.8 205.6-204.8"/>
                            <path d="m358.4 281.6c14.1 0 25.6-11.5 25.6-25.6s-11.5-25.6-25.6-25.6-25.6 11.5-25.6 25.6 11.5 25.6 25.6 25.6"/>
                            <path d="m256 281.6c14.1 0 25.6-11.5 25.6-25.6s-11.5-25.6-25.6-25.6-25.6 11.5-25.6 25.6 11.5 25.6 25.6 25.6"/>
                            <path d="m153.6 281.6c14.1 0 25.6-11.5 25.6-25.6s-11.5-25.6-25.6-25.6-25.6 11.5-25.6 25.6 11.5 25.6 25.6 25.6"/>
                        </svg>
                    </span>
                    <span class="action-label">More</span>
                </span>
                <ul class="dropdown-menu normal-height">
                    <li>
                        <span class="enabled">Action</span>
                    </li>
                    <li>
                        <span>Another action</span>
                    </li>
                </ul>
            </span>
        </div>
    </div>
    <div class="coveo-table-actions">
        <div class="actions-row">
            <div class="prompt">
                <div class="prompt-danger">
                    <span class="prompt-icon">
                        <svg viewBox="0 0 20 20" class="icon mod-2x fill-medium-blue">
                            <path d="M15.3 5.3l-.6 12.6-.1.1H5.4l-.1-.1-.6-12.6h10.6m2.1-2H2.6L3.3 18c.1 1.1 1 2 2.1 2h9.2c1.1 0 2-.9 2.1-2l.7-14.7z"></path>
                            <path d="M6.3 7.5l.4 8.3h.8l-.4-8.3"></path>
                            <path d="M6.3 7.5l.4 8.3h.8l-.4-8.3"></path>
                            <path d="M6.3 7.5l.4 8.3h.8l-.4-8.3M6.8 1.7H1.4v.8h17.2v-.8"></path>
                            <path d="M6.8 1.7H1.4v.8h17.2v-.8"></path>
                            <path d="M6.8 1.7H1.4v.8h17.2v-.8"></path>
                            <path d="M7.9 0H12v2.5H7.9zM9.6 7.5h.8v8.3h-.8z"></path>
                            <path d="M9.6 7.5h.8v8.3h-.8z"></path>
                            <path d="M9.6 7.5h.8v8.3h-.8zM12.9 7.5l-.4 8.3h.8l.4-8.3"></path>
                            <path d="M12.9 7.5l-.4 8.3h.8l.4-8.3"></path>
                            <path d="M12.9 7.5l-.4 8.3h.8l.4-8.3"></path>
                        </svg>
                    </span>
                    <span class="description">Are you sure?</span>
                    <span class="btn-icon action prompt-action enabled">
                        <span>
                            <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-medium-blue">
                                <path d="M448 64.016L192 320.428 64 192.343l-64 64 192 192.085 320-320.412"></path>
                            </svg>
                        </span>
                        Yes
                    </span>
                    <span class="btn-icon cancel prompt-action enabled">
                        <span>
                            <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-medium-blue">
                                <path d="M480.002 96l-64-63.998-160 159.998-160-160-64 63.998L192.004 256l-160 159.998 64 64 160-159.998 159.994 159.994 64-64L320.003 256"></path>
                            </svg>
                        </span>
                        No
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="coveo-table-actions">
        <div class="coveo-filter-container">
            <input type="text" class="filter-box" placeholder="Filter">
            <span></span>
            <span class="filter-icon">
                <i class="coveo-sprites-misc-filter"></i>
            </span>
        </div>
    </div>
</div>
<table class="table">
    <thead>
    <tr>
        <th>
            Column 1
        </th>
        <th>
            Column 2
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    </tbody>
</table>

Small actions container

This defines how to set small actions on a table. Useful when lots of actions are needed for the space available.

Style sheet: /scss/tables/table-actions.scss

Filter label: item we are filtering on
Column 1 Column 2
Data 1 Data 2
Data 1 Data 2
<div class="coveo-table-actions-container mod-border-top mod-align-header small-actions-container">
    <div class="coveo-table-actions item-filter">
        <span class="item-filter-label">Filter label: </span>
        <span class="item-filter-item">item we are filtering on</span>
        <button class="item-filter-clear">
            <i class="icon fill-dark-blue"><svg viewbox="0 0 18 18"><path d="M18 2l-1.8-2-7.1 7.1L2 0 0 2l7.1 7.1L0 16.2 2 18l7.1-6.9 7.1 6.9 1.8-1.8-6.9-7.1z"/></svg></i>
        </button>
    </div>
    <div class="coveo-table-actions">
        <div class="actions-row">
            <span class="enabled action primary action">
                <a class="inline-flex flex-center">
                    <span class="action-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" class="icon fill-medium-blue">
                            <path d="M15.7 17.1c0 .1-.1.2-.2.2H2.9c-.1 0-.2-.1-.2-.2V4.5c0-.1.1-.2.2-.2h8.6V2.6H2.2c-.7 0-1.2.6-1.2 1.2v14c0 .6.4 1 .9 1.2h14.6c.5-.1.9-.6.9-1.2V8.5h-1.7v8.6z"></path>
                            <path d="M4.4 15.6L8.6 14 19 3.7 16.3 1 6.1 11.2l-1.7 4.4zM16.3 2.4l1.3 1.3-1.2 1.2-1.3-1.3 1.2-1.2zm-9.4 9.5l7.7-7.7 1.3 1.3-7.7 7.7-2 .8.7-2.1z"></path>
                        </svg>
                    </span>
                    <span class="action-label">Edit</span>
                </a>
            </span>
            <span class="enabled action primary-action">
                <a class="inline-flex flex-center">
                    <span class="action-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" class="icon fill-medium-blue">
                            <path d="M10 17.2c-4 0-7.2-3.2-7.2-7.2S6 2.8 10 2.8 17.2 6 17.2 10 14 17.2 10 17.2zM10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9z"></path>
                            <path d="M10.5 5.5H9.1v5.4l4.7 2.8.7-1.1-4-2.4"></path>
                        </svg>
                    </span>
                    <span class="action-label">Activity</span>
                </a>
            </span>
            <span class="enabled action primary-action">
                <span class="enabled inline-flex flex-center">
                    <span class="action-icon">
                        <svg width="512" height="512" viewBox="0 0 512 512" class="icon fill-medium-blue">
                            <path d="M128 128h384v384H128z"></path>
                            <path d="M383.875 0H.125v384h96V96h287.75"></path>
                        </svg>
                    </span>
                    <span class="action-label">Copy</span>
                </span>
            </span>
        </div>
    </div>
</div>
<table class="table">
    <thead>
    <tr>
        <th>
            Column 1
        </th>
        <th>
            Column 2
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    </tbody>
</table>

Collapsible rows

Allows to use collapsible rows, when you want to display more information than what is displayed on a single row.

Style sheet: /scss/tables/table-collapsible-rows.scss

Column 1 Column 2 Column 3
Data 1 Data 2 Data 3
Detail 1
Detail 1 value
Detail 2
Detail 2 value
Detail 3
Detail 3 value
Data 1 Data 2 Data 3
Detail 1
Detail 1 value
Detail 2
Detail 2 value
Detail 3
Detail 3 value
Data 1 Data 2 Data 3
Detail 1
Detail 1 value
Detail 2
Detail 2 value
Detail 3
Detail 3 value
<table class="mod-collapsible-rows table">
    <thead>
    <tr>
        <th>
            Column 1
        </th>
        <th>
            Column 2
        </th>
        <th>
            Column 3
        </th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr class="heading-row">
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
        <td class="right-align">
            <span data-collapse-state="collapsed">
                <span class="state-collapsed" title=""><svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                    <path d="M127.315 128.628l-64 64L254.898 384.21l191.788-191.79-64-64-127.788 127.79"></path>
                </svg></span>
                <span class="state-expanded" title=""><svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                    <path d="M382.685 384.003l64-64L255.102 128.42 63.315 320.21l64 64 127.788-127.79"></path>
                </svg></span>
            </span>
        </td>
    </tr>
    <tr class="collapsible-row">
        <td colspan="4">
            <div class="container">
                <section class="columns">
                    <div class="box padded">
                        <div class="label">Detail 1</div>
                        <div class="value" title="">Detail 1 value</div>
                    </div>
                    <div class="box padded">
                        <div class="label">Detail 2</div>
                        <div class="value" title="">Detail 2 value</div>
                    </div>
                    <div class="box padded">
                        <div class="label">Detail 3</div>
                        <div class="value" title="">Detail 3 value</div>
                    </div>
                </section>
            </div>
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr class="heading-row">
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
        <td class="right-align">
            <span data-collapse-state="collapsed">
                <span class="state-collapsed" title=""><svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                    <path d="M127.315 128.628l-64 64L254.898 384.21l191.788-191.79-64-64-127.788 127.79"></path>
                </svg></span>
                <span class="state-expanded" title=""><svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                    <path d="M382.685 384.003l64-64L255.102 128.42 63.315 320.21l64 64 127.788-127.79"></path>
                </svg></span>
            </span>
        </td>
    </tr>
    <tr class="collapsible-row">
        <td colspan="4">
            <div class="container">
                <section class="columns">
                    <div class="box padded">
                        <div class="label">Detail 1</div>
                        <div class="value" title="">Detail 1 value</div>
                    </div>
                    <div class="box padded">
                        <div class="label">Detail 2</div>
                        <div class="value" title="">Detail 2 value</div>
                    </div>
                    <div class="box padded">
                        <div class="label">Detail 3</div>
                        <div class="value" title="">Detail 3 value</div>
                    </div>
                </section>
            </div>
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr class="heading-row">
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
        <td class="right-align">
            <span data-collapse-state="collapsed">
                <span class="state-collapsed" title=""><svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                    <path d="M127.315 128.628l-64 64L254.898 384.21l191.788-191.79-64-64-127.788 127.79"></path>
                </svg></span>
                <span class="state-expanded" title=""><svg width="512" height="512" viewBox="0 0 512 512" class="icon">
                    <path d="M382.685 384.003l64-64L255.102 128.42 63.315 320.21l64 64 127.788-127.79"></path>
                </svg></span>
            </span>
        </td>
    </tr>
    <tr class="collapsible-row">
        <td colspan="4">
            <div class="container">
                <section class="columns">
                    <div class="box padded">
                        <div class="label">Detail 1</div>
                        <div class="value" title="">Detail 1 value</div>
                    </div>
                    <div class="box padded">
                        <div class="label">Detail 2</div>
                        <div class="value" title="">Detail 2 value</div>
                    </div>
                    <div class="box padded">
                        <div class="label">Detail 3</div>
                        <div class="value" title="">Detail 3 value</div>
                    </div>
                </section>
            </div>
        </td>
    </tr>
    </tbody>
</table>

Alternating color rows

Style sheet: /scss/tables/table-alternating-rows.scss

Column 1 Column 2 Column 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
<table class="mod-alternate table">
    <thead>
    <tr>
        <th>
            Column 1
        </th>
        <th>
            Column 2
        </th>
        <th>
            Column 3
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
    </tr>
    </tbody>
</table>

Pagination

Adds buttons to change the number of items per page and change page.

Style sheet: /scss/tables/pagination.scss

<div class="pagination-container">
    <div class="items-per-page prepended-flat-select">
        <div class="flat-select-prepend">Results per page:</div>
        <div class="flat-select clearfix">
            <a class="flat-select-option">
                <span class="enabled">10</span>
            </a>
            <a class="flat-select-option selectable">
                <span class="enabled">20</span>
            </a>
            <a class="flat-select-option selectable">
                <span class="enabled">30</span>
            </a>
        </div>
    </div>
    <div class="flex-auto">
        <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
    <div class="pagination">
        <div class="flat-select">
            <a class="flat-select-option mod-link disabled" data-page="-1">
                <span class="pagination-icon">
                    <svg viewBox="0 0 20 20" class="icon icon-small mod-lg"><path d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg>
                </span>
                Previous
            </a>
            <a class="flat-select-option" data-page="0">1</a>
            <a class="flat-select-option selectable" data-page="1">2</a>
            <a class="flat-select-option selectable" data-page="2">3</a>
            <a class="flat-select-option selectable" data-page="3">4</a>
            <a class="flat-select-option selectable" data-page="4">5</a>
            <a class="flat-select-option selectable" data-page="5">6</a>
            <a class="flat-select-option selectable" data-page="6">7</a>
            <a class="flat-select-option mod-link selectable" data-page="1">
                Next
                <span class="pagination-icon">
                    <svg viewBox="0 0 20 20" class="icon icon-small mod-lg"><path d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg>
                </span>
            </a>
        </div>
    </div>
</div>

<div class="pagination-container loading-view">
    <div class="items-per-page prepended-flat-select">
        <div class="flat-select-prepend">Results per page:</div>
        <div class="flat-select clearfix">
            <a class="flat-select-option">
                <span class="enabled">10</span>
            </a>
            <a class="flat-select-option selectable">
                <span class="enabled">20</span>
            </a>
            <a class="flat-select-option selectable">
                <span class="enabled">30</span>
            </a>
        </div>
    </div>
    <div class="flex-auto">
        <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
    <div class="pagination">
        <div class="flat-select">
            <a class="flat-select-option mod-link disabled" data-page="-1">
                <span class="pagination-icon">
                    <svg viewBox="0 0 20 20" class="icon icon-small mod-lg"><path d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg>
                </span>
                Previous
            </a>
            <a class="flat-select-option" data-page="0">1</a>
            <a class="flat-select-option selectable" data-page="1">2</a>
            <a class="flat-select-option selectable" data-page="2">3</a>
            <a class="flat-select-option selectable" data-page="3">4</a>
            <a class="flat-select-option selectable" data-page="4">5</a>
            <a class="flat-select-option selectable" data-page="5">6</a>
            <a class="flat-select-option selectable" data-page="6">7</a>
            <a class="flat-select-option mod-link selectable" data-page="1">
                Next
                <span class="pagination-icon">
                    <svg viewBox="0 0 20 20" class="icon icon-small mod-lg"><path d="M8.5 15.2l4.3-4.6c.3-.4.3-.9 0-1.3L8.4 4.8c-.3-.4-.9-.4-1.2 0-.3.4-.3.9 0 1.3l3.7 4L7.2 14c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z"></path></svg>
                </span>
            </a>
        </div>
    </div>
</div>

Smaller rows

Used when there are many rows

Style sheet: /scss/tables/table-slim-rows.scss

Column 1 Column 2 Column 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
<table class="mod-slim table">
    <thead>
    <tr>
        <th>
            Column 1
        </th>
        <th>
            Column 2
        </th>
        <th>
            Column 3
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
        <td>
            Data 3
        </td>
    </tr>
    </tbody>
</table>

Loading

A style to display while table data is retrieved.

Style sheet: /scss/tables/table.scss

Table not loading

Column 1
Column 2 Column 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3

Loading on table initialization

Column 1
Column 2 Column 3
Last update: 3:15:44 PM

Loading after table initialization

Column 1
Column 2 Column 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Last update: 3:15:44 PM
<h4 class='mt2 mb2'>Table not loading</h4>
<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                <th class="selection">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button title="Select All" type="button" />
                    </label>
                </th>
                <th class="admin-sort">
                    Column 1
                    <div class="admin-sort-icon">
                        <span class="" title="">
                            <svg viewBox="0 0 260 390" class="tables-sort icon">
                                <path class="asc-arrow" d="m258 131l-128-128-128 128" />
                                <path class="desc-arrow" d="m1 259l128 128 128-128" />
                            </svg>
                        </span>
                    </div>
                </th>
                <th>Column 2</th>
                <th class="admin-sort">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                    <span class="cell-content">Column 3</span>
                    <div class="admin-sort-icon">
                        <span class="" title="">
                            <svg viewBox="0 0 260 390" class="tables-sort icon">
                                <path class="asc-arrow" d="m258 131l-128-128-128 128" />
                                <path class="desc-arrow" d="m1 259l128 128 128-128" />
                            </svg>
                        </span>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody class='loading-row'>
            <tr>
                <td colSpan=4>
                    <div class="spinner">
                        <div class="bounce1"></div>
                        <div class="bounce2"></div>
                        <div class="bounce3"></div>
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td class="selection">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                    <span class="cell-content">Data 3</span>
                </td>
            </tr>
            <tr class="selected">
                <td class="selection">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                    <span class="cell-content">Data 3</span>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>

<h4 class='mt2 mb2'>Loading on table initialization</h4>
<div class="table-container loading-component">
    <table class="table">
        <thead>
            <tr>
                <th class="selection">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button title="Select All" type="button" />
                    </label>
                </th>
                <th class="admin-sort">
                    Column 1
                    <div class="admin-sort-icon">
                        <span class="" title="">
                            <svg viewBox="0 0 260 390" class="tables-sort icon">
                                <path class="asc-arrow" d="m258 131l-128-128-128 128" />
                                <path class="desc-arrow" d="m1 259l128 128 128-128" />
                            </svg>
                        </span>
                    </div>
                </th>
                <th>Column 2</th>
                <th class="admin-sort">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                    <span class="cell-content">Column 3</span>
                    <div class="admin-sort-icon">
                        <span class="" title="">
                            <svg viewBox="0 0 260 390" class="tables-sort icon">
                                <path class="asc-arrow" d="m258 131l-128-128-128 128" />
                                <path class="desc-arrow" d="m1 259l128 128 128-128" />
                            </svg>
                        </span>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody class='loading-row'>
            <tr>
                <td colSpan=4>
                    <div class="spinner">
                        <div class="bounce1"></div>
                        <div class="bounce2"></div>
                        <div class="bounce3"></div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-last-update">Last update: 3:15:44 PM</div>

<h4 class='mt2 mb2'>Loading after table initialization</h4>
<div class="table-container loading-component">
    <table class="table">
        <thead>
            <tr>
                <th class="selection">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button title="Select All" type="button" />
                    </label>
                </th>
                <th class="admin-sort">
                    Column 1
                    <div class="admin-sort-icon">
                        <span class="" title="">
                            <svg viewBox="0 0 260 390" class="tables-sort icon">
                                <path class="asc-arrow" d="m258 131l-128-128-128 128" />
                                <path class="desc-arrow" d="m1 259l128 128 128-128" />
                            </svg>
                        </span>
                    </div>
                </th>
                <th>Column 2</th>
                <th class="admin-sort">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                    <span class="cell-content">Column 3</span>
                    <div class="admin-sort-icon">
                        <span class="" title="">
                            <svg viewBox="0 0 260 390" class="tables-sort icon">
                                <path class="asc-arrow" d="m258 131l-128-128-128 128" />
                                <path class="desc-arrow" d="m1 259l128 128 128-128" />
                            </svg>
                        </span>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="selection">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                    <span class="cell-content">Data 3</span>
                </td>
            </tr>
            <tr class="selected">
                <td class="selection">
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                </td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>
                    <label class="coveo-checkbox-label">
                        <input type="checkbox" class="coveo-checkbox">
                        <button type="button"></button>
                    </label>
                    <span class="cell-content">Data 3</span>
                </td>
            </tr>
        </tbody>

    </table>
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>

<div class="table-last-update">Last update: 3:15:44 PM</div>