📺 Один компонент на 13 страниц Коллеги, 13 страниц. 13 разных таблиц. 1 компонент.
Закреплённые столбцы, sticky scrollbar, градиенты. StickyTable внедрён везде, где нужны данные.
📍Проблема Таблицы на каждой странице:
- Товары (SKU, название, остаток, цена)
- Заказы (номер, клиент, сумма, статус)
- Поставщики (название, контакты, долг)
- Аналитика (метрика, значение, динамика)
Каждая таблица уникальная, но логика одинаковая.
📍Решение Vue 3 композит StickyTable:
- Закрепление левых столбцов через position: sticky
- Горизонтальный скролл с sticky scrollbar снизу
- ::before градиенты для индикации скролла
- CSS-only, без JavaScript
Просто передаёшь columns и data.
📍Фишки реализации
.sticky-column::before {
content: '';
position: absolute;
right: 0;
width: 10px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1));
}
Градиент показывает, что справа ещё есть колонки.
📍Результат 13 страниц используют один компонент:
- products/index.vue
- orders/index.vue
- suppliers/index.vue
- analytics/dashboard.vue
- inventory/movements.vue
- И 8 других
Одна правка — обновляются все таблицы.
📍Переиспользование Composable паттерн позволяет:
- Настраивать ширину колонок
- Добавлять кастомные фильтры
- Менять стили под контекст
- Экспортировать данные
DRY principle в действии.
Как создал библиотеку компонентов для быстрой разработки. Vue композитивный подход в бесплатном гиде.
#моикейсы_поповвии Работаем дальше.
