Что это такое?
TanStack Table — это headless-библиотека таблиц для создания мощных датагридов на TypeScript и JavaScript. Возможно, вы знаете её под именами её адаптеров — React Table, Vue Table, Solid Table, Svelte Table.
TanStack Table — это headless-библиотека таблиц для создания мощных датагридов на TypeScript и JavaScript. Возможно, вы знаете её под именами её адаптеров — React Table, Vue Table, Solid Table, Svelte Table.Что значит, что таблицы headless?Библиотека даёт логику, а не готовый внешний вид: не зависящее от фреймворка ядро управляет состоянием и поведением таблицы, а разметку, компоненты и стили вы приносите сами, поэтому вёрстка и оформление на 100 процентов ваши.
Библиотека даёт логику, а не готовый внешний вид: не зависящее от фреймворка ядро управляет состоянием и поведением таблицы, а разметку, компоненты и стили вы приносите сами, поэтому вёрстка и оформление на 100 процентов ваши.Как добавить её в проект?Установите адаптер для вашего фреймворка из npm — для React это @tanstack/react-table — и соберите таблицу из его хуков и опций, написав разметку самостоятельно.
Установите адаптер для вашего фреймворка из npm — для React это @tanstack/react-table — и соберите таблицу из его хуков и опций, написав разметку самостоятельно.С какими фреймворками она работает?Адаптеры есть для React, Preact, Solid, Vue, Svelte, Angular, Ember, Lit, Alpine и Octane — все вокруг одного общего ядра. Вы просто берёте пакет под свой стек, например @tanstack/react-table.
Адаптеры есть для React, Preact, Solid, Vue, Svelte, Angular, Ember, Lit, Alpine и Octane — все вокруг одного общего ядра. Вы просто берёте пакет под свой стек, например @tanstack/react-table.Выдержит ли она vraiment большие таблицы?Да — она по замыслу лёгкая, поддерживает виртуализацию и удобна для серверного рендеринга, поэтому большие объёмы данных обычно обрабатывают в паре с виртуализатором. Сама виртуализация в библиотеку не встроена.
Да — она по замыслу лёгкая, поддерживает виртуализацию и удобна для серверного рендеринга, поэтому большие объёмы данных обычно обрабатывают в паре с виртуализатором. Сама виртуализация в библиотеку не встроена.Я слышал про React Table — это отдельный проект?Нет — React Table это «реактовское» имя TanStack Table. Каждая обёртка публикуется как отдельный Table-пакет вокруг одного общего ядра, поэтому в README проект и представляется этим списком имён.
Нет — React Table это «реактовское» имя TanStack Table. Каждая обёртка публикуется как отдельный Table-пакет вокруг одного общего ядра, поэтому в README проект и представляется этим списком имён.Почему выбрать headless-таблицу, а не готовый компонент-грид?Из-за затрат на старте: разметку, стили и оформление компонентов вы пишете сами вместо того, чтобы вставить готовый стилизованный грид. Взамен ничего в интерфейсе не «зашито», так что полностью кастомный дизайн остаётся простым делом.
Из-за затрат на старте: разметку, стили и оформление компонентов вы пишете сами вместо того, чтобы вставить готовый стилизованный грид. Взамен ничего в интерфейсе не «зашито», так что полностью кастомный дизайн остаётся простым делом.Насколько проект зрелый?Он существует с 2016 года, у него около 28.5k звёзд на GitHub, и он входит в экосистему TanStack рядом с Query, Router, Form и Virtual.
Он существует с 2016 года, у него около 28.5k звёзд на GitHub, и он входит в экосистему TanStack рядом с Query, Router, Form и Virtual.What are similar projects?ag-grid, handsontable, shaders, bootstrap-table, mitosis, canvas-ui, query, x-spreadsheet
ag-grid, handsontable, shaders, bootstrap-table, mitosis, canvas-ui, query, x-spreadsheet