Контекст
Разрабатывается страница по дизайн-макету на основе готового Bootstrap-шаблона ТЗ, в котором активно используются таблицы через плагин DataTables с загрузкой данных с сервера. Текущая верстка страницы уже готова.
Цель
Разработать расширение (компонент) для DataTables, которое добавит кастомный стиль, возможность изменения ширины колонок, сохранение настроек пользователя и полноценную адаптацию для мобильных устройств.
Функциональные требования
Ресайз колонок
- Изменение ширины колонок перетаскиванием за заголовок
- Поддержка минимальной и опционально максимальной ширины
- Возможность отключать ресайз для отдельных колонок
- Синхронизация ширины заголовков и содержимого таблицы
Сохранение состояния
- Сохранение пользовательских ширин колонок в localStorage привязанное к идентификатору таблицы
- Автоматическое восстановление при перезагрузке страницы
- Функция сброса до заводских (дефолтных) настроек
- Корректная работа при изменении набора колонок
Адаптивный UI (мобильная версия)
- Автоматическое переключение в мобильный режим для устройств с шириной экрана менее 768px (возможность настройки порога)
- Использование вида карточек или сворачивающихся строк вместо классической таблицы
- Отсутствие горизонтального скролла по умолчанию
- Автоматический возврат к десктопному виду при изменении ориентации или размера окна
Серверная загрузка
- Совместимость с пагинацией, сортировкой и поиском DataTables
- Изменение ширин колонок и адаптация не должны приводить к повторным запросам на сервер
- Обработка состояний: загрузка, пустые данные, ошибка
Технические требования и стек
- Внешний вид и стили компонента должны полностью соответствовать Bootstrap шаблону
- Конфигурация осуществляется через JavaScript без хардкода имен таблиц
- Компонент должен быть переиспользуемым, модульным
Описание работы
В рамках задачи требуется разработать:
- JavaScript компонент или расширение для DataTables
- Базовые стили (CSS/SCSS) для адаптивного представления
- Пример интеграции с демонстрацией работы
- Краткую справку (README) по использованию и настройке компонента