Скачать или смотреть TanStack Table: внутренняя пагинация, фильтрация и сортировка с помощью TanStack Query + TanStack...

При серверной пагинации браузер должен обрабатывать локальное состояние с помощью фильтров и сортировки. Хотите сделать это с параметрами запроса, чтобы URL-адреса были общими?
TanStack предлагает отличный DX!

Я создал пример на React, используя Query, Router и Table.

TanStack Query управляет вашим асинхронным состоянием. В данном случае он отвечает за предоставление свежих данных при каждом изменении фильтров.

TanStack Router — это ваш менеджер локального состояния. Вы можете заменить useState функцией Navigation и убедиться, что все параметры сохранены в URL-адресе.

TanStack Table предназначен не только для отображения данных, но и для сбора пользовательского ввода и запуска необходимых взаимодействий для обеспечения комфортной работы пользователя.

Если хотите взглянуть поближе, вот репозиторий: https://github.com/Balastrong/tanstac...
(Буду рад, если вы также поставите звездочку на GitHub ⭐️)

Как уже упоминалось в конце, это был один из возможных способов связать воедино все точки. Если у вас есть предложения по другим подходам или улучшениям к тому, что я представил, я буду очень рад получить сообщения о проблемах и запросы на вынос в репозиторий!

Руководство по запуску TanStack:    • TanStack Start Tutorial  

_______________________________
Поддержите мою работу: https://github.com/sponsors/Balastrong ❤️

Поставьте лайк и подпишитесь, чтобы увидеть больше контента! :D

Проекты с открытым исходным кодом для начинающих: https://github.com/DevLeonardoCommunity
Присоединяйтесь к сообществу Discord! Вот приглашение:   / discord  

Вы также можете подписаться на меня на других платформах:
Twitter:   / balastrong  
dev.to: https://dev.to/balastrong
GitHub: https://github.com/Balastrong
Домашняя страница: https://leonardomontini.dev/
TikTok:   / balastrong  
Instagram:   / devbalastrong  

______________________________
Тайм-коды
00:00 Демонстрация
00:11 Извлечение данных (запрос)
01:25 Параметры поиска (маршрутизатор)
04:07 Интеграция таблиц
05:03 Фильтрация
08:05 Сортировка
11:12 Пагинация