vegas-dynamicTable

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

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

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

search

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

filters

• enable (boolean) включение модуля фильтров
• form (string | HTMLElement) селектор/узел формы с полями [data-filter-field]
• debounce (number) задержка в авто-режиме
• apply ('auto' | 'manual') применять сразу или по кнопке
• button.apply, button.reset (string) селекторы кнопок
• fieldAttr, partAttr, typeAttr, operatorAttr (string) data-driven контракт полей
• urlState (object) синхронизация фильтров в URL (prefix, pageKey, perPageKey, sortKey)
• В remote-запросах ключи фильтров автоматически маппятся через urlState.prefix (например date -> f-date, date_op -> f-date_op); явный request.parammap всегда имеет приоритет.

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
• include.pagination (boolean)
• include.sort (boolean)
• listen.popstate (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)

events

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

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

Data-атрибуты

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

<table
  data-vg-table
  data-request-route="/api/v1/table/filters.php"
  data-search-enable="true"
  data-search-input="#table-filters-search"
  data-filters-enable="true"
  data-filters-form="#table-filters-form"
  data-filters-apply="manual"
  data-filters-button-apply="[data-filter-apply]"
  data-filters-button-reset="[data-filter-reset]"
  data-filters-urlstate-enable="true"
  data-filters-urlstate-prefix="f."
  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-field="min_price" />
<input data-filter-field="max_price" />
<select data-filter-field="category_id"></select>

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

• data-filter-apply
• data-filter-reset
• data-filter-errors

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

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, max_price
• stock_min, rating_min
• page, per_page
• sort, dir

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

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

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

• 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 для невалидных полей фильтра