Table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Alternatives To Table
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Free Programming Books Zh_cn105,193
2 days ago30gpl-3.0
:books: 免费的计算机编程类中文书籍,欢迎投稿
Storybook80,4647,28921,476a day ago1,108September 14, 20221,836mitTypeScript
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
Ionic Framework49,4892,75942711 hours ago2,170July 31, 2023439mitTypeScript
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Bulma47,54910,3721,5635 days ago60May 08, 2022380mitCSS
Modern CSS framework based on Flexbox
30 Days Of Javascript38,596
a day ago1January 19, 2022327JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
Taro33,5922546853 days ago613July 28, 20231,043otherTypeScript
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
Sheetjs33,5844,3793,8162 months ago170March 24, 2022129apache-2.0JavaScript
📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs
Fe Interview23,980
a day ago5,500mitJavaScript
前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
Nativescript23,0012,6191,110a day ago1,908September 28, 2021876mitTypeScript
⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❤️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: SwiftUI, Jetpack Compose, Flutter and you name it compatible.
Table22,5221,7701,4174 days ago217May 16, 2022169mitTypeScript
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Alternatives To Table
Select To Compare


Alternative Project Comparisons
Readme

TanStack Table Header

TanStack Table v8

Headless UI for building powerful tables & datagrids for React, Solid, Vue, Svelte and TS/JS.

#TanStack semantic-release Join the discussion on Github

Looking for version 7 of react-table? Click here!

Enjoy this library?

Try some other TanStack like React Query, React Form, React Charts

Visit tanstack.com/table for docs, guides, API and more!

You may know TanStack Table by our adapter names, too!

Summary

TanStack Table is a headless table library, which means it does not ship with components, markup or styles. This means that you have full control over markup and styles (CSS, CSS-in-JS, UI Component Libraries, etc) and this is also what gives it its portable nature. You can even use it in React Native!

If you want a lightweight table with full control over markup and implementation, then you should consider using TanStack Table, a headless table library.

If you want a ready-to-use component-based table with more power but more constraints around markup/styles/implementation, you should consider using AG Grid, a component-based table library from our OSS partner AG Grid.

TanStack Table and AG Grid are respectfully the best table/datagrid libraries around. Instead of competing, we're working together to ensure the highest quality table/datagrid options are available for the entire JS/TS ecosystem and every use-case.

Quick Features

  • Agnostic core (JS/TS)
  • 1st-class framework bindings for React, Vue, Solid
  • ~14kb or less (with tree-shaking)
  • 100% TypeScript (but not required)
  • Headless (100% customizable, Bring-your-own-UI)
  • Auto out of the box, opt-in controllable state
  • Filters (column and global)
  • Sorting (multi-column, multi-directional)
  • Grouping & Aggregation
  • Pivoting (coming soon!)
  • Row Selection
  • Row Expansion
  • Column Visibility/Ordering/Pinning/Resizing
  • Table Splitting
  • Animatable
  • Virtualizable
  • Server-side/external data model support

Migrating from React Table v7

Notable Changes

  • Full rewrite to TypeScript with types included in the base package
  • Removal of plugin system to favor more inversion of control
  • Vastly larger and improved API (and new features like pinning)
  • Better controlled state management
  • Better support for server-side operations
  • Complete (but optional) data pipeline control
  • Agnostic core with framework adapters for React, Solid, Svelte, Vue, and potentially more in the future
  • New Dev Tools

Migration

There are a fair amount of breaking changes (they're worth it, trust us!):

  • Turns out that TypeScript makes your code a lot better/safer, but also usually requires breaking changes to architecture.
  • Plugin system has been removed so plugins must be rewritten to wrap/compose the new functional API. Contact us if you need help!
  • Column configuration options have changed, but only slightly.
  • Table options are mostly the same, with some larger changes around optional state management/control and data pipeline control
  • The tableInstance while similar in spirit to v7 has been reconfigured to be much faster.

Todo (in order of priority)

  • [x] Rewrite Core
    • [x] Core
    • [x] Columns
    • [x] Headers
    • [x] Visibility
    • [x] Pinning
    • [x] Filters
    • [x] Sorting
    • [x] Grouping
    • [x] Expanding
    • [x] Column Sizing
    • [x] Pagination
    • [x] Row Selection
  • [ ] Migrate Examples
    • [x] column-visibility
    • [x] column-ordering
    • [x] column-pinning
    • [x] basic
    • [x] filters
    • [x] sorting
    • [x] pagination
    • [x] pagination-controlled
    • [x] column-sizing
    • [x] row-selection
    • [x] expanding
    • [x] grouping-and-aggregation
    • [x] editable-data
    • [ ] kitchen-sink
    • [x] row-dnd
    • [ ] streaming-rows
    • [x] sub-components
    • [x] virtualized-rows
    • [ ] absolute-layout
    • [ ] block-layout
    • [ ] animated-framer-motion
    • [x] bootstrap
    • [ ] bootstrap-ui-components
    • [ ] data-driven-classes-and-styles
    • [x] full-width-resizable-table
    • [x] full-width-table
    • [ ] material-ui-components
    • [ ] material-UI-enhanced-table

Installation

# Npm
npm install @tanstack/react-table
npm install @tanstack/solid-table
npm install @tanstack/vue-table
npm install @tanstack/svelte-table

#pnpm
pnpm install @tanstack/react-table
pnpm install @tanstack/solid-table
pnpm install @tanstack/vue-table
pnpm install @tanstack/svelte-table

#Yarn
yarn add @tanstack/react-table
yarn add @tanstack/solid-table
yarn add @tanstack/vue-table
yarn add @tanstack/svelte-table

How to help?

  • Try out the already-migrated examples
  • Try it out in your own projects.
  • Introspect the types! Even without the docs finished, the library ships with 100% typescript to help you explore its capabilities.
  • Read the contribution guidelines
  • Write some docs! Start with the API docs and try adding some information about one or more of the features. The types do a decent job of showing what's supported and the capabilities of the library.
  • Try your hand at migrating an example to v8! The todo list for the examples is above!
  • Using a plugin? Try rewriting your plugin (v8 doesn't have a plugin system any more) as a functional wrapper that uses TanStack Table internally. The new API is much more powerful and easier to compose. If you find something you can't figure out, let us know and we'll add it to the API.

Become a Sponsor

Popular Reactjs Projects
Popular Vue Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Typescript
Reactjs
Vue
Table
Grid
Pagination
Filtering
Datatables
Datagrid