✨ Как выбрать таблицу под свои задачи

В любом проекте рано или поздно возникает таблица. И почти всегда выбор делается неправильно — берут первую попавшуюся библиотеку и потом героически борются с тормозами на 10 000 строк.

Делюсь практическим фреймворком, который экономит часы.

━━━━━━━━━━━━━━━━━━

🎯 Первое, что нужно понять — объём данных.

Это определяет ВСЁ остальное:

<100 строк → простая HTML-таблица
Плюс: никаких библиотек, мгновенная загрузка, минимум кода.
Минус: ручная сортировка, нет фильтрации.
Когда подходит: статичные справочники, настройки, небольшие отчёты.

100–1 000 строк → клиентская интерактивная таблица
Плюс: сортировка, фильтрация, пагинация — всё работает в браузере.
Минус: начинает подтормаживать на слабых устройствах.
Когда подходит: списки пользователей, каталоги товаров, табличные отчёты.

1 000–10 000 строк → серверная пагинация
Плюс: браузер не грузит данные целиком, стабильная скорость.
Минус: нужен API с поддержкой offset/limit.
Когда подходит: любые списки, где пользователь обычно смотрит только начало.

10 000–100 000 строк → виртуальный скроллинг
Плюс: рендерится только видимая часть, память не растёт.
Минус: сложнее в отладке, нужна правильная реализация.
Когда подходит: логи, история транзакций, любые большие массивы.

>100 000 строк → Enterprise-грид
Плюс: потоковая загрузка, группировка, экспорт в Excel.
Минус: AG Grid Enterprise — платная штука.
Когда подходит: внутренние B2B-инструменты, финансовые дашборды.

━━━━━━━━━━━━━━━━━━

⚙️ Второе — выбрать библиотеку.

Всего два реальных варианта:

TanStack Table (headless)
— 15 КБ в сборке, полный контроль над версткой, TypeScript из коробки.
— Идеально: когда уникальный дизайн и таблица не главное на экране.
— Не подходит: если нужна Inline-редактирование и Excel-подобный UX из коробки.

AG Grid
— Миллионы строк, встроенные фильтры, группировка, редактирование.
— Идеально: когда таблица — это продукт (инструмент аналитика, трейдера).
— Не подходит: когда хочется кастомизировать всё под себя.

━━━━━━━━━━━━━━━━━━

📋 Третье — не забыть про accessibility.

Таблица — это не только визуальный компонент:

• Семантическая разметка: <table>, <thead>, <tbody>
• ARIA-grid pattern для интерактивных гридов
• Полная клавиатурная навигация (Tab, стрелки, Enter)
• Озвучка изменений для скринридеров

Без этого таблица — это барьер для части пользователей.

━━━━━━━━━━━━━━━━━━

📱 Четвёртое — адаптивность.

Четыре рабочих подхода:

1. Горизонтальный скролл — самый простой, структура не ломается.
2. Карточки вместо строк — на мобильных таблица превращается в стек карточек.
3. Приоритетные колонки — скрываем второстепенное на маленьких экранах.
4. Сжатие + раскрытие — компактный вид по умолчанию, детали по клику.

━━━━━━━━━━━━━━━━━━

🔧 Чек-лист перед стартом

□ Объём данных — сколько строк реально будет?
□ Нужны ли фильтры, сортировка, экспорт?
□ Это read-only или с редактированием?
□ Какие устройства: только десктоп или мобильные тоже?
□ Есть accessibility-требования?

Ответы на эти пять вопросов однозначно определят и тип таблицы, и библиотеку.

Хотите разбор конкретной библиотеки или пример с кодом — пишите.

#OpenClaw #Таблицы #Вёрстка #Frontend