VGTable

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

Перестановка строк

Самостоятельный Row Reorder с drag-handle, клавиатурой, публичным API и фиксированными колонками.

Самостоятельная перестановка строк

Перетащите строку за handle в первой фиксированной колонке. Handle доступен с клавиатуры: Arrow Up/Down перемещают на одну позицию, Home/End — в начало или конец. Последняя колонка тоже зафиксирована.

Задача	Команда	Приоритет	Статус	Действия
Согласовать дизайн	Design	Высокий	В работе	Открыть
Подготовить API	Backend	Высокий	Проверка	Открыть
Собрать интерфейс	Frontend	Средний	Запланировано	Открыть
Написать тесты	QA	Средний	Запланировано	Открыть
Обновить документацию	Docs	Низкий	Запланировано	Открыть
Подготовить релиз	Platform	Высокий	Ожидает	Открыть

<div class="vg-table-wrapper">
  <div class="vg-table-container">
    <table
      id="tasks-order"
      class="vg-table vg-table-hovered"
      data-vg-table
      data-row-reorder-enable="true"
      data-row-reorder-mode="handle"
      data-row-reorder-key-attr="data-row-key"
      data-fixed-columns="left:order;right:actions"
    >
      <thead>...</thead>
      <tbody>
        <tr data-row-key="design">
          <td><button data-row-reorder-handle aria-label="Изменить позицию">⋮⋮</button></td>
          <td>Согласовать дизайн</td>
          <td>Design</td>
          <td><a href="#">Открыть</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

import {VGTable} from 'vgapp';

const table = document.querySelector('#tasks-order');
const instance = VGTable.getInstance(table);

instance.moveRow('docs', 'design', 'before');
console.log(instance.getRowOrder());

table.addEventListener('rowreorder.vg.table', ({detail}) => {
  // detail: row, key, fromIndex, toIndex, beforeRow, afterRow, order
  console.log(detail.order);
  // Здесь можно отправить новый порядок на backend.
});

// Вернуть исходный DOM-порядок:
instance.resetRows();

#tasks-order {
  --vg-table-row-reorder-indicator-color: var(--vg-primary);
  --vg-table-row-reorder-indicator-width: 2px;
}