Skip to content

Commit bf0783c

Browse files
chore: Update README (#6096)
* readme updates * update readme * fix links and add alt * fix some nitpicks * update readme * fix photo
1 parent 9c62cf2 commit bf0783c

File tree

3 files changed

+123
-129
lines changed

3 files changed

+123
-129
lines changed

README.md

Lines changed: 97 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,112 @@
1-
![TanStack Table Header](https://github.com/tanstack/table/raw/main/media/repo-header.png)
1+
<div align="center">
2+
<img src="./media/header_table.png" alt="TanStack Table">
3+
</div>
24

3-
# [TanStack](https://tanstack.com) Table v8
5+
<br />
46

5-
Headless UI for building **powerful tables & datagrids** for **React, Solid, Vue, Svelte, Qwik and TS/JS**.
6-
7-
<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
8-
<img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" />
9-
</a>
10-
<a href="https://github.com/tanstack/table/actions?table=workflow%3A%22react-table+tests%22">
11-
<img src="https://github.com/tanstack/table/workflows/react-table%20tests/badge.svg" />
12-
</a>
7+
<div align="center">
138
<a href="https://npmjs.com/package/@tanstack/react-table" target="\_parent">
14-
<img alt="" src="https://img.shields.io/npm/dm/@tanstack/react-table.svg" />
9+
<img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/react-table.svg" />
10+
</a>
11+
<a href="https://github.com/tanstack/table" target="\_parent">
12+
<img alt="github stars" src="https://img.shields.io/github/stars/tanstack/react-table.svg?style=social&label=Star" />
1513
</a>
1614
<a href="https://bundlephobia.com/result?p=@tanstack/react-table@latest" target="\_parent">
17-
<img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-table@latest" />
15+
<img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-table@latest" />
1816
</a>
17+
</div>
18+
19+
<div align="center">
1920
<a href="#badge">
2021
<img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
2122
</a>
22-
<a href="https://github.com/tanstack/table/discussions">
23-
<img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
24-
</a>
25-
<a href="https://github.com/tanstack/table" target="\_parent">
26-
<img alt="" src="https://img.shields.io/github/stars/tanstack/react-table.svg?style=social&label=Star" />
27-
</a>
28-
<a href="https://twitter.com/tannerlinsley" target="\_parent">
29-
<img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
23+
<a href="https://bestofjs.org/projects/tanstack-table"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Ftable%26since=daily" /></a>
24+
<a href="https://twitter.com/tan_stack"><img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/></a>
25+
</div>
26+
27+
28+
<div align="center">
29+
30+
### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
31+
</div>
32+
33+
# TanStack Table
34+
35+
> [!NOTE]
36+
> You may know TanStack Table by the adapter names:
37+
> - [Angular Table](https://tanstack.com/table/v8/docs/framework/angular/angular-table)
38+
> - [Lit Table](https://tanstack.com/table/v8/docs/framework/lit/lit-table)
39+
> - [Qwik Table](https://tanstack.com/table/v8/docs/framework/qwik/qwik-table)
40+
> - [React Table](https://tanstack.com/table/v8/docs/framework/react/react-table)
41+
> - [Solid Table](https://tanstack.com/table/v8/docs/framework/solid/solid-table)
42+
> - [Svelte Table](https://tanstack.com/table/v8/docs/framework/svelte/svelte-table)
43+
> - [Vue Table](https://tanstack.com/table/v8/docs/framework/vue/vue-table)
44+
45+
A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
46+
47+
- Framework‑agnostic core with bindings for React, Vue & Solid
48+
- 100% customizable — bring your own UI, components, and styles
49+
- Sorting, filtering, grouping, aggregation & row selection
50+
- Lightweight, virtualizable & server‑side friendly
51+
52+
### <a href="https://tanstack.com/table">Read the Docs →</a>
53+
54+
## Get Involved
55+
56+
- We welcome issues and pull requests!
57+
- Participate in [GitHub discussions](https://github.com/TanStack/table/discussions)
58+
- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
59+
- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
60+
61+
## Partners
62+
63+
<table align="center">
64+
<tr>
65+
<td>
66+
<a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS">
67+
<img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" padding="20px" alt="Code Rabbit"/>
3068
</a>
31-
<a href="https://www.coderabbit.ai">
32-
<img alt="" src="https://img.shields.io/coderabbit/prs/github/TanStack/table?utm_source=oss&utm_medium=github&utm_campaign=TanStack%2Ftable&labelColor=171717&color=FF570A&link=https%3A%2F%2Fcoderabbit.ai&label=CodeRabbit+Reviews" />
69+
</td>
70+
<td padding="20">
71+
<a href="https://www.cloudflare.com?utm_source=tanstack">
72+
<img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="70" alt="Cloudflare"/>
3373
</a>
74+
</td>
75+
<td>
76+
<a href="https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable" style="display: flex; align-items: center; border: none;">
77+
<img src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/ag-grid.svg" height="40" alt="AG Grid"/>
78+
</a>
79+
</td>
80+
</tr>
81+
</table>
82+
83+
84+
85+
86+
<div align="center">
87+
<img src="./media/partner_logo.svg" alt="Table & you?" height="65">
88+
<p>
89+
We're looking for TanStack Table Partners to join our mission! Partner with us to push the boundaries of TanStack Table and build amazing things together.
90+
</p>
91+
<a href="mailto:[email protected]?subject=TanStack Table Partnership"><b>LET'S CHAT</b></a>
92+
</div>
93+
94+
95+
96+
## Explore the TanStack Ecosystem
3497

35-
> [Looking for version 7 of `react-table`? Click here!](https://github.com/tanstack/table/tree/v7)
98+
- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
99+
- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
100+
- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
101+
- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
102+
- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching <br/>
103+
- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
104+
- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
105+
- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
106+
- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
107+
- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
108+
- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
36109

37-
## Enjoy this library?
38-
39-
Try other [TanStack](https://tanstack.com) libraries:
40-
41-
- [TanStack Query](https://github.com/TanStack/query) <img alt="" src="https://img.shields.io/github/stars/tanstack/query.svg" />
42-
- [TanStack Table](https://github.com/TanStack/table) <img alt="" src="https://img.shields.io/github/stars/tanstack/table.svg" />
43-
- [TanStack Router](https://github.com/TanStack/router) <img alt="" src="https://img.shields.io/github/stars/tanstack/router.svg" />
44-
- [TanStack Virtual](https://github.com/TanStack/virtual) <img alt="" src="https://img.shields.io/github/stars/tanstack/virtual.svg" />
45-
- [TanStack Form](https://github.com/TanStack/form) <img alt="" src="https://img.shields.io/github/stars/tanstack/form.svg" />
46-
- [TanStack Ranger](https://github.com/TanStack/ranger) <img alt="" src="https://img.shields.io/github/stars/tanstack/ranger.svg" />
47-
48-
## Visit [tanstack.com/table](https://tanstack.com/table) for docs, guides, API and more!
49-
50-
You may know **TanStack Table** by our adapter names, too!
51-
52-
- [Angular Table](https://tanstack.com/table/v8/docs/framework/angular/angular-table)
53-
- [Lit Table](https://tanstack.com/table/v8/docs/framework/lit/lit-table)
54-
- [Qwik Table](https://tanstack.com/table/v8/docs/framework/qwik/qwik-table)
55-
- [**React Table**](https://tanstack.com/table/v8/docs/framework/react/react-table)
56-
- [Solid Table](https://tanstack.com/table/v8/docs/framework/solid/solid-table)
57-
- [Svelte Table](https://tanstack.com/table/v8/docs/framework/svelte/svelte-table)
58-
- [Vue Table](https://tanstack.com/table/v8/docs/framework/vue/vue-table)
59-
60-
## Summary
61-
62-
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!
63-
64-
If you want a **lightweight table with full control over markup and implementation**, then you should consider using **TanStack Table, a headless table library**.
65-
66-
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](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable), a component-based table library from our OSS partner [AG Grid](https://ag-grid.com).
67-
68-
TanStack Table and AG Grid are respectfully the
69-
**best table/datagrid libraries around**. Instead
70-
of competing, we're working together to ensure the highest
71-
quality table/datagrid options are available for the entire
72-
JS/TS ecosystem and every use-case.
73-
74-
## Quick Features
75-
76-
- Agnostic core (JS/TS)
77-
- 1st-class framework bindings for React, Vue, Solid
78-
- ~15kb or less (with tree-shaking)
79-
- 100% TypeScript (but not required)
80-
- Headless (100% customizable, Bring-your-own-UI)
81-
- Auto out of the box, opt-in controllable state
82-
- Filters (column and global)
83-
- Sorting (multi-column, multi-directional)
84-
- Grouping & Aggregation
85-
- Pivoting (coming soon!)
86-
- Row Selection
87-
- Row Expansion
88-
- Column Visibility/Ordering/Pinning/Resizing
89-
- Table Splitting
90-
- Animatable
91-
- Virtualizable
92-
- Server-side/external data model support
93-
94-
# Migrating from React Table v7
95-
96-
## Notable Changes
97-
98-
- Full rewrite to TypeScript with types included in the base package
99-
- Removal of plugin system to favor more inversion of control
100-
- Vastly larger and improved API (and new features like pinning)
101-
- Better controlled state management
102-
- Better support for server-side operations
103-
- Complete (but optional) data pipeline control
104-
- Agnostic core with framework adapters for React, Solid, Svelte, Vue, and potentially more in the future
105-
- New Dev Tools
106-
107-
## Migration
108-
109-
There are a fair amount of breaking changes (they're worth it, trust us!):
110-
111-
- Turns out that TypeScript makes your code **a lot** better/safer, but also usually requires breaking changes to architecture.
112-
- Plugin system has been removed so plugins must be rewritten to wrap/compose the new functional API. Contact us if you need help!
113-
- Column configuration options have changed, but only slightly.
114-
- Table options are mostly the same, with some larger changes around optional state management/control and data pipeline control
115-
- The `table` instance while similar in spirit to v7 has been reconfigured to be much faster.
116-
117-
## Installation
118-
119-
Install one of the following packages based on your framework of choice:
120-
121-
```bash
122-
# Npm
123-
npm install @tanstack/angular-table
124-
npm install @tanstack/lit-table
125-
npm install @tanstack/qwik-table
126-
npm install @tanstack/react-table
127-
npm install @tanstack/solid-table
128-
npm install @tanstack/svelte-table
129-
npm install @tanstack/vue-table
130-
npm install @tanstack/table-core #vanilla js that can work with any framework
131-
```
132-
133-
## How to help?
134-
135-
- Try out the already-migrated examples
136-
- Try it out in your own projects.
137-
- Introspect the types! Even without the docs finished, the library ships with 100% typescript to help you explore its capabilities.
138-
- [Read the contribution guidelines](https://github.com/tanstack/table/tree/main/CONTRIBUTING.md)
139-
- Write some docs! Start with the [API docs](https://github.com/TanStack/react-table/tree/main/docs/api) 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.
140-
- **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.
141-
142-
### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/)
110+
… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
143111

144112
<!-- USE THE FORCE LUKE -->

media/header_table.png

133 KB
Loading

media/partner_logo.svg

Lines changed: 26 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)