table

Ищете версию 7 react-table ? Кликните сюда!

Наслаждайтесь этой библиотекой?

Попробуйте другие библиотеки Tanstack:

• Танстак запрос
• Табличный стол
• Танстак маршрутизатор
• Tanstack Virtual
• Форма загар
• Танстак Рейнджер

Посетите tanstack.com/table для документов, гидов, API и многого другого!

Вы также можете знать таблицу Tanstack по нашим именам адаптеров!

• Угловой стол
• Зажженная таблица
• Qwik Table
• Реагировать таблицу
• Сплошной стол
• СВОВНАЯ таблица
• Таблица Vue

Краткое содержание

Tanstack Table - это библиотека стола без головы , что означает, что он не отправляется с компонентами, разметкой или стилями. Это означает, что у вас есть полный контроль над разметкой и стилями (CSS, CSS-In-JS, библиотеки компонентов пользовательского интерфейса и т. Д.), И это также то, что дает ему портативный характер. Вы даже можете использовать его в RACE Native!

Если вам нужна легкая стол с полным контролем над разметкой и реализацией , то вам следует рассмотреть возможность использования таблицы Tanstack, библиотеки таблиц без головы .

Если вам нужна таблица на основе готового к использованию компонентов с большей мощностью, но большим количеством ограничений в отношении разметки/стилей/реализации , вам следует рассмотреть возможность использования AG Grid, библиотеки таблиц на основе компонентов из нашей сетки OSS AG AG.

Таблица Tanstack и Ag Grid с уважением являются лучшими библиотеками таблицы/Datagrid вокруг . Вместо того, чтобы конкурировать, мы работаем вместе, чтобы обеспечить доступность таблицы таблицы/данных высочайшего качества для всей экосистемы JS/TS и для каждого варианта использования.

Быстрые функции

• Агностическое ядро ​​(JS/TS)
• Структурные привязки 1-го класса для React, Vue, Solid
• ~ 15 КБ или меньше (с помощью деревьев)
• 100% TypeScript (но не требуется)
• Безголова (настраиваемое на 100%, принесите свой собеседник)
• Авто из коробки, взимаемое управляемое состояние
• Фильтры (столбец и глобальный)
• Сортировка (многоколонов, многонаправленная)
• Группировка и агрегация
• Поворот (скоро!)
• Выбор строки
• Расширение ряда
• Видимость столбца/упорядочение/прикрепление/изменение размера
• Расщепление таблицы
• Анимируемый
• Виртуализируемый
• Серверная сторона/внешняя поддержка модели данных

Мигрирование из React Table v7

Примечательные изменения

• Полное переписывание в TypeScript с типами, включенными в базовый пакет
• Удаление системы плагинов в пользу большей инверсии управления
• Значительно больше и улучшенный API (и новые функции, такие как прикрепление)
• Лучше контролируемого государственного управления
• Лучшая поддержка операций на стороне сервера
• Полный (но необязательный) управление конвейером данных
• Агностическое ядро ​​с адаптерами рамок для React, Solid, Svelte, Vue и, возможно, в будущем в будущем
• Новые инструменты разработки

Миграция

Существует немало разбитых изменений (они того стоят, поверьте нам!):

• Оказывается, что TypeScript делает ваш код намного лучше/безопаснее, но также обычно требует нарушающих изменений в архитектуре.
• Система плагинов была удалена, поэтому плагины должны быть переписаны, чтобы обернуть/составить новый функциональный API. Свяжитесь с нами, если вам нужна помощь!
• Параметры конфигурации столбца изменились, но лишь немного.
• Параметры таблицы в основном одинаковы, с некоторыми большими изменениями в отношении дополнительных управления состоянием/управления управлением состоянием и управления конвейером данных
• Экземпляр table , хотя и похожий на дух с V7, был перенастроен, чтобы быть намного быстрее.

Установка

Установите один из следующих пакетов в зависимости от выбранного вами фреймворка:

 # Npm
npm install @tanstack/angular-table
npm install @tanstack/lit-table
npm install @tanstack/qwik-table
npm install @tanstack/react-table
npm install @tanstack/solid-table
npm install @tanstack/svelte-table
npm install @tanstack/vue-table
npm install @tanstack/table-core # vanilla js that can work with any framework 

Как помочь?

• Попробуйте уже мигрированные примеры
• Попробуйте это в своих собственных проектах.
• Индивидуальность типов! Даже без завершенных документов библиотека поставляется со 100% -ным типографией, чтобы помочь вам изучить его возможности.
• Прочитайте руководящие принципы вклада
• Напишите несколько документов! Начните с документов API и попробуйте добавить некоторую информацию об одной или нескольких функциях. Типы выполняют достойную работу по тому, чтобы показать то, что поддерживается, и возможности библиотеки.
• Используете плагин? Попробуйте переписать свой плагин (V8 больше не имеет системы плагинов) в качестве функциональной обертки, которая использует таблицу Tanstack внутри. Новый API гораздо более мощный и легкий для сочинения. Если вы найдете то, что не можете понять, дайте нам знать, и мы добавим его в API.

Станьте спонсором