VGTable

Динамические таблицы

Мультисортировка

Сортировка по нескольким колонкам с видимым приоритетом, Shift-режимом и Remote-параметрами.

Мультисортировка с Shift

Первый клик задаёт основную сортировку. Удерживайте Shift и нажимайте другие заголовки, чтобы добавить уровни. Числа возле шевронов показывают приоритет сравнения.

Например: сначала «Отдел», затем с Shift — «Стаж».

Отдел	Сотрудник	Стаж
Разработка	Анна	5 лет
Поддержка	Борис	8 лет
Разработка	Виктор	2 года
Продажи	Галина	6 лет
Поддержка	Денис	3 года
Разработка	Елена	9 лет
Продажи	Жанна	1 год
Поддержка	Игорь	4 года

<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-sort-multiple="true"
  data-sort-multiple-with-shift="true"
>
  <thead>
    <tr>
      <th data-field="department">Отдел</th>
      <th data-field="employee">Сотрудник</th>
      <th data-field="experience" data-sort-type="number">Стаж</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>

// Дополнительная инициализация не требуется: используется Data API.

/* Дополнительные стили не требуются. */

Постоянная мультисортировка и Remote режим

Shift не требуется: каждый новый заголовок добавляется в цепочку. VGTable передаёт серверу поля и направления через запятую, а URL state сохраняет тот же порядок. В таблице 100 серверных строк.

ID	Название	Категория	Статус	Обновлено

<table
  class="vg-table vg-table-striped"
  data-vg-table
  data-request-route="/api/table/remote"
  data-sort-multiple="true"
  data-sort-multiple-with-shift="false"
  data-pagination-enable="true"
  data-pagination-per-page="10"
  data-pagination-show-per-page="true"
  data-url-state-enable="true"
>
  <thead>
    <tr>
      <th data-field="id" data-sort-type="number">ID</th>
      <th data-field="category">Категория</th>
      <th data-field="status">Статус</th>
      <th data-field="updated" data-sort-type="date">Обновлено</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

// Дополнительная инициализация не требуется: используется Data API.

/* Дополнительные стили не требуются. */