VGTable

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

Выбор строк

Выбор строк кликом, пользовательскими checkbox и массовые действия.

Выбор строки

Клик по строке переключает её выделение. По умолчанию одновременно выбрана только одна строка.

Название	Статус	Обновлено
Публичный сайт	Работает	сегодня
Личный кабинет	Проверка	вчера
Служба поддержки	Работает	сегодня
Внутренний портал	Обновление	2 дня назад
Архив документов	Работает	неделю назад

Множественный выбор строк

Каждый клик независимо переключает выбранное состояние строки. Параметр multiple разрешает сохранять несколько выбранных строк одновременно.

Название	Статус	Обновлено
Публичный сайт	Работает	сегодня
Личный кабинет	Проверка	вчера
Служба поддержки	Работает	сегодня
Внутренний портал	Обновление	2 дня назад
Архив документов	Работает	неделю назад

Выбор пользовательскими checkbox

Checkbox остаются пользовательской разметкой, а проектный обработчик вызывает публичный метод VGTable и получает событие selectionchange.vg.table.

Название	Статус	Обновлено
Публичный сайт	Работает	сегодня
Личный кабинет	Проверка	вчера
Служба поддержки	Работает	сегодня
Внутренний портал	Обновление	2 дня назад
Архив документов	Работает	неделю назад

<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-selection-enabled="true"
  data-selection-click="false"
  data-selection-multiple="true"
>
  <tbody>
    <tr data-row-key="project-1">
      <td><input type="checkbox" data-vg-table-row-checkbox></td>
      <td>Публичный сайт</td>
      <td>Работает</td>
    </tr>
  </tbody>
</table>

import {VGTable} from 'vgapp';

document.addEventListener('click', (event) => {
  const checkbox = event.target.closest('[data-vg-table-row-checkbox]');
  if (!checkbox) return;

  const table = checkbox.closest('[data-vg-table]');
  const row = checkbox.closest('tbody tr');
  const instance = VGTable.getInstance(table)
    || VGTable.getOrCreateInstance(table).init();

  instance.selectRow(row, checkbox.checked);
});

document.addEventListener('selectionchange.vg.table', (event) => {
  console.log(event.detail.rows, event.detail.keys);
});

Массовые действия в статичном VGToast

Выбор одной или всех строк открывает готовый toast из разметки страницы. Событие таблицы передаёт выбранные DOM-строки и их data-row-key как ID.

ID	Название	Статус	Обновлено
101	Публичный сайт	Работает	сегодня
205	Личный кабинет	Проверка	вчера
318	Служба поддержки	Работает	сегодня
407	Внутренний портал	Обновление	2 дня назад
512	Архив документов	Работает	неделю назад

<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-selection-enabled="true"
  data-selection-click="false"
  data-selection-multiple="true"
  data-selection-toast="#vg-table-selection-toast"
>
  <thead>
    <tr>
      <th><input type="checkbox" data-vg-table-select-all></th>
      <th>ID</th>
      <th>Название</th>
    </tr>
  </thead>
  <tbody>
    <tr data-row-key="101">
      <td><input type="checkbox" data-vg-table-row-checkbox></td>
      <td>101</td>
      <td>Публичный сайт</td>
    </tr>
  </tbody>
</table>

<div id="vg-table-selection-toast" class="vg-toast" role="status" aria-live="polite">
  <div class="vg-toast-wrapper">
    <div class="vg-toast-content">
      <div class="vg-toast-header">
        Выбрано строк: <span data-vg-table-selection-count>0</span>
      </div>
      <div class="vg-toast-body">
        Передано: <span data-vg-table-selection-id-count>0</span> ID ·
        <span data-vg-table-selection-row-count>0</span>
        <span data-vg-table-selection-row-label>строк</span>
      </div>
    </div>
    <button class="btn btn-error btn-sm" type="button">Удалить</button>
  </div>
</div>

import {VGTable, VGToast} from 'vgapp';

const getRowsLabel = (count) => {
  const mod100 = count % 100;
  const mod10 = count % 10;
  if (mod100 >= 11 && mod100 <= 14) return 'строк';
  if (mod10 === 1) return 'строка';
  if (mod10 >= 2 && mod10 <= 4) return 'строки';
  return 'строк';
};

document.addEventListener('selectionchange.vg.table', (event) => {
  const {rows, keys} = event.detail;
  const toastElement = document.querySelector('#vg-table-selection-toast');

  toastElement.querySelector('[data-vg-table-selection-count]').textContent = rows.length;
  toastElement.querySelector('[data-vg-table-selection-id-count]').textContent = keys.length;
  toastElement.querySelector('[data-vg-table-selection-row-count]').textContent = rows.length;
  toastElement.querySelector('[data-vg-table-selection-row-label]').textContent = getRowsLabel(rows.length);

  const toast = VGToast.getOrCreateInstance(toastElement, {
    static: true,
    autohide: false,
    enableClickToast: false,
  });

  if (!rows.length) toast.hide();
  if (rows.length && !toastElement.classList.contains('shown')) toast.show();
});

// Для «выбрать все» вызовите selectRow() для каждой строки таблицы.
const table = document.querySelector('[data-vg-table]');
const instance = VGTable.getInstance(table);

Передано: 0 ID · 0 строк

IDs: —