vegas-dynamicTable

Динамическая таблица с поддержкой:

• статических и серверных данных
• пагинации
• сортировки (одиночной и мультисортировки)
• поиска и фильтрации
• синхронизации состояния в URL
• тем и локализации

Основные настройки (DEFAULT_OPTIONS)

search

• enabled (boolean) включение модуля поиска
• debouncems (number) задержка ввода
• param (string) имя query-параметра, по умолчанию q
• inputselector (string) селектор поля поиска

filters

• enabled (boolean) включение модуля фильтров
• formselector (string) селектор формы с полями [data-filter-param]
• debouncems (number) задержка в авто-режиме
• applymode ('auto' | 'manual') применять сразу или по кнопке
• applybuttonselector (string) селектор кнопки применения
• categoriesendpoint (string) endpoint для загрузки категорий в select
• validationenabled (boolean) проверка диапазона цен
• presetsenabled (boolean) пресеты в localStorage
• presetsstoragekey (string) ключ хранения пресетов

sortable

• enabled (boolean)
• initialfield (string)
• initialdir ('asc' | 'desc')
• multi (boolean) мультисортировка
• multiwithshift (boolean) мультисортировка только с Shift
• fields (string[] | string) whitelist sortable fields by data-field (['name','price'] or name,price)

pagination

• enabled, page, perpage, maxvisiblepages, ellipsis, quickjump, perpageoptions

urlstate

• enabled (boolean) синхронизация состояния таблицы в URL
• mode ('replace' | 'push') режим обновления history
• includepagination (boolean)
• includesort (boolean)
• listenpopstate (boolean) восстановление состояния по Back/Forward

callbacks

• oninit(detail, instance)
• onbeforeload(detail, instance)
• ondataloaded(detail, instance)
• onerror(detail, instance)
• onsortchange(detail, instance)
• onpagechange(detail, instance)
• onperpagechange(detail, instance)
• onsearch(detail, instance)
• onfilterschange(detail, instance)
• onreset(detail, instance)
• onrowdelete(detail, instance)
• onrowcheck(detail, instance)
• oncheckall(detail, instance)
• onselectionchange(detail, instance)

events

• enabled (boolean) включить/выключить CustomEvent
• prefix (string) префикс имени события, по умолчанию vgdt
• bubbles (boolean) режим всплытия события

Пример: событие сортировки vgdt:sortchange, загрузки vgdt:dataloaded, ошибки vgdt:error. Для editable-режима: vgdt:rowdelete, vgdt:rowcheck, vgdt:checkall, vgdt:selectionchange.

Data-атрибуты

Пример таблицы:

<table
  data-vg-table
  data-request-route="/api/v1/table/filters.php"
  data-search-enabled="true"
  data-search-inputselector="#table-filters-search"
  data-filters-enabled="true"
  data-filters-formselector="#table-filters-form"
  data-filters-categoriesendpoint="/api/v1/table/categories.php"
  data-filters-applymode="manual"
  data-filters-presetsenabled="true"
  data-urlstate-enabled="true"
  data-sort-multi="true"
  data-sort-multi-with-shift="true"
  data-sort-fields="name,price,stock"
></table>

Per-column override:

<th data-field="price" data-sortable="false">Price</th>

Поля формы фильтров:

<input data-filter-param="min_price" />
<input data-filter-param="max_price" />
<select data-filter-param="category_id" data-filter-source="remote-categories"></select>

Дополнительные элементы управления:

• data-filter-apply
• data-filter-reset
• data-filter-errors
• data-filter-preset-select
• data-filter-preset-save
• data-filter-preset-apply
• data-filter-preset-delete

Пример подписки на события:

const table = document.querySelector('[data-vg-table]');
table.addEventListener('vgdt:dataloaded', (event) => {
  console.log('Rows loaded:', event.detail.rows.length);
});
table.addEventListener('vgdt:error', (event) => {
  console.error('Load failed:', event.detail.message);
});

Backend API

GET /api/v1/table.php

Базовый endpoint таблицы с пагинацией, сортировкой и фильтрами.

GET /api/v1/table/filters.php

Поддерживает параметры:

• q, category_id, min_price/price_min, max_price/price_max
• stock_min, rating_min
• page, per_page
• sort, dir

Формат мультисортировки:

• sort=name,price
• dir=asc,desc

GET /api/v1/table/categories.php

Возвращает активные категории:

• data: [{ id, name }]

Формат успешного ответа

• data: массив строк таблицы
• meta: page, per_page, pages, total, sort, dir, filters, request_id, timestamp_utc

Формат ошибки

• error.code
• error.message
• error.details
• error.request_id

Доступность (A11y)

Реализовано:

• aria-sort для сортируемых заголовков
• aria-live для статусов загрузки/пустого результата/ошибки
• aria-invalid для невалидных полей фильтра