Кейс: сложная таблица / админка с фильтрами

↑ 8.4 Frontend System Design · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Типовая enterprise-задача: таблица на 100k строк с фильтрами, сортировкой, экспортом и правами.

Требования

• большие данные, фильтры, сортировка, поиск, выбор колонок;
• выделение строк, массовые действия;
• inline-редактирование, экспорт;
• права по ролям, сохранение представлений.

Серверная или клиентская обработка

Объём	Подход
до нескольких тысяч строк	клиент: загрузить всё, фильтровать локально
десятки тысяч и более	сервер: фильтр, сортировка, пагинация на бэкенде

Серверный контракт:

GET /orders?page=2&pageSize=50&sort=createdAt:desc&status=paid,new&q=иван&createdFrom=2026-01-01

Ответ: items, total (или hasMore), при необходимости агрегаты.

Состояние

• параметры таблицы (страница, сортировка, фильтры) — в URL: ссылкой можно поделиться, работает «назад»;
• данные — кэш запросов (ключ = параметры);
• выбор строк — локально (ids), с режимом «выбрать всё по фильтру»;
• настройки колонок — localStorage/профиль пользователя.

Производительность

• виртуализация строк и колонок;
• debounce фильтров;
• отмена устаревших запросов, keepPreviousData (не мигать таблицей);
• предзагрузка следующей страницы;
• мемоизация ячеек и v-memo;
• shallowRef для больших массивов;
• тяжёлые вычисления (агрегации) — сервер или Worker.

Функции

• Фильтры: типизированные (текст, диапазон, дата, мультивыбор), конструктор условий, сохранённые фильтры;
• Массовые действия с подтверждением и прогрессом (очередь на сервере, опрос статуса);
• Inline-редактирование: валидация, оптимистичное обновление, конфликты;
• Экспорт больших данных: асинхронное задание на сервере + ссылка (не собирать миллионы строк в браузере);
• Права: скрытие колонок и действий по ролям (проверка и на сервере).

Доступность

Семантическая table или ARIA grid, aria-sort, управление фокусом клавиатурой, объявление изменений.

Библиотеки

TanStack Table, AG Grid, Quasar QTable, Element Plus Table.

Вопросы с ответами

Где хранить параметры фильтра?

В URL: возможность поделиться ссылкой, кнопка «назад» и обновление страницы сохраняют состояние.

Как экспортировать 1 млн строк?

Серверное асинхронное задание, формирование файла на сервере и уведомление со ссылкой на скачивание; не выгружать всё в браузер.