Философия TanStack Table и бессодержательный дизайн

Библиотека UI без готовой разметки предоставляет всю необходимую логику, управление состоянием и поведение, но намеренно не содержит ни разметки, ни стилей. Вы управляете каждым пикселем отображаемого результата.

Такой подход означает, что вам никогда не придётся бороться с переопределениями CSS или подстраиваться под навязанную библиотекой структуру DOM.

В традиционном компоненте таблицы изменение внешнего вида требует переопределить десятки стилей, а иногда и обходить структурную разметку HTML нестандартными способами. Библиотека без готовой разметки передаёт вам данные и состояние, а затем не мешает их использовать.

В результате вы получаете полную свободу оформления: можно без затруднений использовать Tailwind, модули CSS, Emotion или обычный CSS.

TanStack Table v8 работает с React, Vue, Solid, Svelte и даже с обычным JavaScript. Основная логика не зависит от фреймворка, а каждый адаптер оборачивает её в привычные хуки.

Это позволяет переносить навыки между фреймворками и сохраняет единообразие API.

В React вызовите useReactTable({ data, columns, getCoreRowModel }), и он вернёт объект таблицы. Этот объект является основой всего.

Он хранит всё текущее состояние (сортировку, разбиение на страницы и выбор) и предоставляет вспомогательные методы, управляющие отображением JSX.

TanStack Table не отображает за вас ни одного тега HTML. Вы сами пишете элементы table, thead, tbody, tr, th и td, а затем запрашиваете у объекта таблицы содержимое, которое нужно поместить внутрь них.

Это отличается от AG Grid или Ant Design Table: они создают собственный DOM и предоставляют лишь ограниченные слоты для настройки.

AG Grid, Material Table и Ant Design Table из коробки включают полноценные конвейеры рендеринга, встроенные стили и богатые интерфейсы для работы с функциями. С ними быстрее создавать прототипы, но глубоко настраивать их сложнее.

TanStack Table требует больше первоначальной настройки, зато позволяет создать полностью доступную таблицу в стиле вашего продукта, не борясь с переопределениями.

Поскольку TanStack Table не содержит стилей и вы импортируете только действительно используемые модели строк (сортировку, фильтрацию и разбиение на страницы), размер библиотеки остаётся небольшим.

Вы платите только за включённые функции, поэтому библиотека хорошо подходит для приложений, требовательных к производительности.

Поскольку TanStack Table не создаёт разметку, интеграция с Tailwind CSS сводится к добавлению имён классов в собственные элементы tr и td. То же самое относится к модулям CSS и любому другому подходу к оформлению.

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

Подход без готовой разметки действительно требует больше кода на начальном этапе. Вам придётся самостоятельно написать цикл отображения и вручную связать обработчики состояния.

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

Хук useReactTable принимает объект конфигурации, содержащий как минимум data (ваш массив объектов), columns (массив ColumnDef) и getCoreRowModel.

Возвращённый экземпляр таблицы предоставляет getHeaderGroups() для заголовков и getRowModel().rows для строк тела таблицы, которые вы перебираете в JSX.

Начните с установки @tanstack/react-table, определите массив columns, вызовите useReactTable, а затем отобразите собственный элемент table с помощью вспомогательных методов. Библиотека управляет всем состоянием и производными данными, а вы — всей разметкой.

Такое чёткое разделение упрощает тестирование компонентов таблицы и помогает поддерживать целостную систему оформления.

Каково основное преимущество библиотеки UI без готовой разметки, такой как TanStack Table?

TanStack Table — это библиотека таблиц без готовой разметки, не зависящая от фреймворка: она предоставляет состояние и логику, оставляя всю отрисовку вам. Вы вызываете useReactTable, получаете экземпляр таблицы и перебираете его вспомогательные методы, чтобы создать собственную разметку.

Это означает отсутствие конфликтов стилей, полную свободу выбора CSS-фреймворка и размер пакета, зависящий только от используемых возможностей.