TanStack Table v8: Data Grid English for React Engineers (англійською)

TanStack Table v8 (раніше React Table) — безголовкова бібліотека даних для React, Vue, Solid та інших фреймворків. За допомогою цього інструменту можна керувати логікою впорядкування, фільтрування, сторінкування і видимості стовпчиків, а також самостійно виконувати всі дії з відтворення. Оскільки він безголовий, словник в основному стосується стану, конфігурації і моделей, а не компонентів інтерфейсу користувача. У цій статті пояснюється ключові англійські терміни, з якими ви можете зіткнутися під час створення сіток даних за допомогою таблиці TanStack.

---

Налаштування ядра

** useReactTable ** — основний гачок для таблиці TanStack Table у React; ви передаєте до нього визначення стовпчиків, дані і параметри можливостей, і програма повертає екземпляр таблиці з усіма необхідними вам функціями стану і допоміжними функціями.

• “Ми викликаємо useReactTable один раз у верхній частині компонента сітки даних, а потім використовуємо повернений екземпляр таблиці для відтворення заголовків, рядків і комірок.” *

** визначення стовпчика ** — об’ єкт, який описує один стовпчик у таблиці, включаючи його унікальний ідентифікатор, спосіб доступу до значення даних, спосіб відображення заголовка, а також можливості (наприклад, впорядкування або фільтрування), які буде увімкнено для цього стовпчика.

• “Ми додали визначення стовпчика для поля стану, яке відображає кольоровий значок замість звичайного тексту за допомогою нетипового відтворення комірки.” *

** getCoreRowModel ** — потрібна функція адаптера, яку ви передаєте до useReactTable, вона наказує TanStack Table обчислювати базову модель рядка з масиву даних; вона завжди потрібна, незалежно від того, які інші можливості ви увімкнено.

• “Без передачі getCoreRowModel до налаштувань таблиці, TanStack Table повертає помилку, оскільки не може обчислити базовий набір рядків.” *

---

Sorting

** sortting state ** — масив дескрипторів впорядкування, який описує те, яким чином впорядковано рядки таблиці; кожен дескриптор містить ідентифікатор стовпчика і булівське значення, яке вказує на напрямок зростання або спаду.

• “Ми перенесли стан впорядкування до параметра запиту URL, щоб користувачі могли створювати закладки для попередньо впорядкованого перегляду таблиці даних.” *

** getSortedRowModel ** — функція адаптера, яка уможливлює обчислення впорядкування сервером або клієнтом; якщо вона буде передано до useReactTable, екземпляр таблиці автоматично покаже впорядковані дані рядків і обробники клацання заголовків.

• “Після додавання getSortedRowModel до налаштувань, натискання заголовка стовпчика негайно пересортувало набір даних з 10 000 рядків на клієнті без виклику API.” *

** багаторазове впорядкування ** — функція, яка надає змогу впорядковувати таблицю за декількома стовпчиками одночасно; користувач може натиснути і утримувати клавішу Shift під час клацання на заголовку другого стовпчика, щоб додати до таблиці додаткові критерії впорядкування.

• “Ми ввімкнули багаторазове сортування, щоб аналітики могли спочатку сортувати за відділом, а потім за зарплатою в кожному відділі за однією операцією.” *

---

Filtering

** filtering ** — процес скорочення видимих рядків до тих, які відповідають заданій умові; TanStack Table підтримує як глобальне фільтрування (пошук у всіх стовпчиках), так і фільтрування на рівні стовпчиків.

• “Ми реалізували фільтрування на рівні стовпчика у стовпчику дати за допомогою фільтра діапазону, який приймає дату початку і дату закінчення з двох вхідних даних вибору дати.” *

** getFilteredRowModel ** — функція адаптера, яка уможливлює фільтрування з боку клієнта; після цього екземпляр таблиці показує відфільтрований перегляд даних, заснований на поточному стані фільтра.

• “Передача getFilteredRowModel дозволила нам додати вхід для миттєвого пошуку, який фільтрує всю таблицю під час введення користувачем без дотику до сервера.” *

---

Pagination

** pagination ** — функція, яка ділить рядки таблиці на сторінки, показуючи обмежену кількість рядків одночасно з елементами керування для навігації між сторінками.

• “Ми встановили початковий стан сторінкування на 25 рядків на сторінку після того, як дослідження користувачів показали, що 50- рядкові сторінки були занадто великими на менших екранах.” *

** getPaginationRowModel** — функція адаптера, яка уможливлює сторінкування з боку клієнта; у поєднанні з впорядкуванням і фільтруванням, вона забезпечує, що сторінковані рядки надходять з вже відфільтрованого і впорядкованого набору даних.

• “Ми використовуємо getPaginationRowModel разом з getFilteredRowModel, щоб сторінки сторінкування оновлювалися правильно, коли фільтр зменшує загальну кількість відповідних рядків.” *

---

Прикріплення і видимість стовпчиків

** прикріплення стовпчиків ** — функція, яка прив’ язує один або декілька стовпчиків до лівого або правого краю таблиці, щоб вони залишалися видимими під час горизонтального прокрутки користувачем багатьох стовпчиків.

• “Ми пришпилили стовпчик Назва ліворуч, щоб користувачі завжди могли бачити, який рядок вони читають, коли прокручують десятки стовпчиків даних у великих наборах даних.” *

** видимість стовпчиків ** — функція таблиці, яка стежить за тим, які стовпчики у даний час показано або приховано, надаючи користувачам змогу налаштувати розкладку таблиці за допомогою перемикачів стовпчиків.

• “Ми зберігаємо стан видимості стовпчиків у localStorage, щоб кожен користувач міг відновити улюблене розташування стовпчиків, коли повернеться на сторінку.” *

** модель рядка ** — обчислене представлення ваших даних після того, як TanStack Table застосує всі активні функції (фільтрування, впорядкування, групування, сторінкування); модель рядка — це те, що ви перевіряєте під час відтворення тіла таблиці.

“Ми ітеруємо над моделлю рядків таблиці, щоб відобразити кожен рядок, отримуючи доступ до значень комірки через допоміжну функцію cell.getValue(), а не читаючи початковий об’єкт даних безпосередньо.”

---

Practice

Збудувати таблицю TanStack з принаймні трьома стовпчиками, ** станом впорядкування **, збереженим у параметрі URL, і елементом глобального пошуку, з’ єднаним з ** getFilteredRowModel **. Англійською мовою поясніть колегі різницю між ** row model ** і масивом необроблених даних, який ви передали ** useReactTable **, а також чому TanStack Table розділяє ці два поняття.

На практиці: Навігація та співпраця

Термінологія TanStack Table v8 є неймовірно точною, що є фантастичним для ясності, але може здатися загрозливим, коли ви вивчаєте новий професійний словник. Розглянемо, як ці концепції будуть обговорюватися в типовому потоці розробки. Уявіть, що ви витратили ранок на створення складної сітки даних — можливо, показуючи дані про продажі за регіоном і категорією продукту — за допомогою таблиці TanStack. Після цього ви надсилаєте запит на звантаження для перегляду. Старший інженер, Сара, залишає коментар до вашого коду: « Це визначення стовпчика добре, але чи не могли б ми розглянути використання cellNoDataRenderer для обробки випадків, коли дані не доступні? Також я помітив сортування - чи ви впевнені, що це відповідає очікуванням користувачів щодо регіональної агрегації?”

У цьому коментарі описано декілька ключових термінів. « Відтворення даних у комірці відсутнє » безпосередньо стосується компонента, який обробляє порожні або відсутні значення у комірці таблиці, запобігаючи виникненню заплутаних порожніх рядків або помилок. Це не просто відображення даних; це грациозне управління їх відсутністю. «Сортування» є ще однією важливою областю. Формулювання передбачає оцінку того, чи має сенс типове сортування (імовірно, за регіоном) для того, як користувачі взаємодіють з даними - розгляд, який говорить про розуміння досвіду користувача і найкращих практик представлення даних. Ви можете відповісти в Slack: «Дякую, Сара! Хороший аргумент щодо cellNoDataRenderer. Я не вказав, що відсутні дані про продажі за регіонами; додавання цього безумовно покращить показ. Щодо сортування, ми визначили пріоритети за регіоном на основі початкового відгуку від команди продукту, але ваше спостереження є цінним - можливо, ми могли б додати вторинний параметр сортування для користувачів, які воліють бачити агреговані дані за категоріями. ”

Крім того, подумайте про написання опису самого запиту на завантаження. Ви не просто кажете « Реалізована таблиця ». Замість цього ви ретельно документуєте * чому * ви зробили певний вибір. Наприклад: «Ця PR вводить TanStack Table v8 для відображення даних про продажі. Основна функціональність включає в себе визначення стовпчиків для « Регіон », « Категорія продукту » і « Прибуток від продажу ». Визначення стовпчиків використовують символ headerGroup для візуального групування пов’ язаної інформації, що покращує читабельність. Типово, дані впорядковуються за « регіоном » у зростаючому порядку, визначеному за допомогою [посилання на документ з вимогами до продукту]. Страникування реалізовано з розміром сторінки 25 записів для оптимізації продуктивності для великих наборів даних

Цей рівень деталізації демонструє розуміння не тільки того, як використовувати таблицю, але також того, чому були прийняті певні рішення щодо дизайну, що сприяє підтримці та співпраці. Це про комунікацію ваших технічних виборів у такий спосіб, який є ясним, коротким і відповідає професійним очікуванням.

Ось простий приклад використання tanstack-table CLI для створення базового файла налаштування таблиці:

npx @tanstack/table@latest create-table --name SalesData

За допомогою цієї команди можна створити файл SalesData.ts, у якому міститься початкова структура вашої таблиці TanStack, яку можна буде заповнити даними і налаштувати для впорядкування, фільтрування тощо. CLI надає вам початкову точку — конкретний приклад того, як ви можете розпочати будувати основний словник.