Таблицы

Стандартная таблица

Данный класс отвечает за дефолтные стили и отображение табличных данных в BOX. Применяется к обычной таблице (table). Структура поддерживает классы-модификаторы и обертки для более гибкой настройки отображения.

<table class="shop-table" width="100%">
    <thead>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </thead>
    <tr>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tfoot>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </tfoot>
</table>

Высокая таблица

Для вывода таблицы с большим отступом в ячейках необходимо использовать модификатор

<table class="shop-table large" width="100%">
    <thead>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </thead>
    <tr>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tfoot>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </tfoot>
</table>

Таблица с горизонтальной прокруткой

Для вывода таблицы с горизонтальной прокруткой необходимо использовать для таблицы дополнительную обвертку Это добавит горизонтальный скроллбар вашей таблице. Таким образом, можно решить проблему, когда табличные данные не помещаются в ширину экрана.

<div class="shop-overflow-table">
    <table class="shop-table" width="100%">
        <thead>
            <tr>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
        </thead>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
        <tfoot>
            <tr>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
        </tfoot>
    </table>
</div>

Таблица с ajax-сортировкой

Для ajax-сортировки таблицы необходимо использовать функцию tablesorter(), это позволит осуществлять сортировку в таблице моментально и без перезагрузки страницы.

Для отмены сортировки в определенной колонке, необходимо использовать data-атрибут data-sorter="false" для заглавной ячейки таблицы.
Визуально, столбцы с сортировкой будут иметь стрелки направления сортировки.

<table class="shop-table js-table-sort" width="100%">
    <thead>
        <tr>
            <td data-sorter="false">Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </thead>
    <tr>
        <td>Column content 1</td>
        <td>Column content 2</td>
        <td>Column content 3</td>
        <td>Column content 4</td>
        <td>Column content 5</td>
    </tr>
    <tr>
        <td>Column content 5</td>
        <td>Column content 1</td>
        <td>Column content 2</td>
        <td>Column content 3</td>
        <td>Column content 4</td>
    </tr>
    <tfoot>
        <tr>
            <td>Column content 4</td>
            <td>Column content 5</td>
            <td>Column content 1</td>
            <td>Column content 2</td>
            <td>Column content 3</td>
        </tr>
    </tfoot>
</table>

<script>
    $j(".js-table-sort").tablesorter();
</script>

Подсветка строк таблицы

Для дополнительной подсветки строк таблицы необходимо использовать следующие вспомогательные классы для элемента tr (см. ниже), каждый из которых отвечает за определенный стиль-состояние строк таблицы.

<table class="shop-table" width="100%">
    <thead>
        <tr>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
        </tr>
    </thead>
    <tr class="blocked">
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="row-hidden">
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="row-checked">
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="row-selected">
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="row-deleted">
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
</table>