Дело ← К программе
Frontend · React Занятие 06 из 09

Списки, фильтры и пагинация

Превращаем список в рабочий инструмент: поиск, фильтры, сортировка, пагинация и синхронизация состояния с URL.

О чём занятие

Разберём паттерны таблиц и списков для реальных данных. Добавим поиск, фильтрацию, сортировку и пагинацию — с debounce и аккуратной связкой с query keys.

Параметры вынесем в URL: страница должна быть шарируемой и переживать обновление. Это важно и для UX, и для отладки.

Отдельно добьём состояния загрузки и пустых выборок, чтобы фильтры не выглядели «сломанными».

Что разберём

  • Таблицы/списки, поиск, фильтры, сортировка
  • Пагинация и debounce
  • Параметры фильтров в URL
  • Связь фильтров с query keys TanStack Query
Практика

Страница списка с фильтрами и loading / error / empty states.