You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/installation.md
+29-7
Original file line number
Diff line number
Diff line change
@@ -4,38 +4,60 @@ title: Installation
4
4
5
5
Before we dig in to the API, let's get you set up!
6
6
7
-
Install your table adapter as a dependency using your favorite npm package manager
7
+
Install your table adapter as a dependency using your favorite npm package manager.
8
8
9
-
## Qwik Table
9
+
_Only install ONE of the following packages:_
10
+
11
+
## React Table
10
12
11
13
```bash
12
-
npm install @tanstack/qwik-table
14
+
npm install @tanstack/react-table
13
15
```
14
16
15
-
## React Table
17
+
The `@tanstack/react-table` package works with React 16.8, React 17, React 18, and React 19.
18
+
19
+
## Vue Table
16
20
17
21
```bash
18
-
npm install @tanstack/react-table
22
+
npm install @tanstack/vue-table
19
23
```
20
24
25
+
The `@tanstack/vue-table` package works with Vue 3.
26
+
21
27
## Solid Table
22
28
23
29
```bash
24
30
npm install @tanstack/solid-table
25
31
```
26
32
33
+
The `@tanstack/solid-table` package works with Solid-JS 1
34
+
27
35
## Svelte Table
28
36
29
37
```bash
30
38
npm install @tanstack/svelte-table
31
39
```
32
40
33
-
## Vue Table
41
+
The `@tanstack/svelte-table` package works with Svelte 3 and Svelte 4.
42
+
43
+
> NOTE: There is not a built-in Svelte 5 adapter yet, but you can still use TanStack Table with Svelte 5 by installing the `@tanstack/table-core` package and using a custom adapter from the community. See this [PR](https://github.com/TanStack/table/pull/5403) for inspiration.
44
+
45
+
## Qwik Table
34
46
35
47
```bash
36
-
npm install @tanstack/vue-table
48
+
npm install @tanstack/qwik-table
37
49
```
38
50
51
+
The `@tanstack/qwik-table` package works with Qwik 1.
52
+
53
+
> NOTE: There will be a "breaking change" release in the near future to support Qwik 2. This will be released as a minor version bump, but will be documented. Qwik 2 itself will have no breaking changes, but its name on the npm registry will change, and require different peer dependencies.
54
+
55
+
## Angular Table
56
+
57
+
(Coming Soon) - Help with this adapter is needed! See this [PR](https://github.com/TanStack/table/pull/5432) if you want to help, or use as inspiration for your own adapter.
58
+
59
+
The official TanStack Table Angular adapter will most likely only work with Angular 17+ and use a "signals" implementation for state management.
Copy file name to clipboardexpand all lines: docs/overview.md
+36-2
Original file line number
Diff line number
Diff line change
@@ -8,10 +8,46 @@ TanStack Table's core is **framework agnostic**, which means its API is the same
8
8
9
9
While TanStack Table is written in [TypeScript](https://www.typescriptlang.org/), using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase)
10
10
11
+
If you use TypeScript, you will get top-notch type safety and editor autocomplete for all table APIs and state.
12
+
11
13
## Headless
12
14
13
15
As it was mentioned extensively in the [Intro](../introduction) section, TanStack Table is **headless**. This means that it doesn't render any DOM elements, and instead relies on you, the UI/UX developer to provide the table's markup and styles. This is a great way to build a table that can be used in any UI framework, including React, Vue, Solid, Svelte, Qwik, and even JS-to-native platforms like React Native!
14
16
17
+
## Agnostic
18
+
19
+
Since TanStack Table is headless and runs on a vanilla JavaScript core, it is agnostic in a couple of ways:
20
+
21
+
1. TanStack Table is **Framework Agnostic**, which means you can use it with any JavaScript framework (or library) that you want. TanStack Table provides ready-to-use adapters for React, Vue, Solid, Svelte, and Qwik out of the box, but you can create your own adapter if you need to.
22
+
2. TanStack Table is **CSS / Component Library Agnostic**, which means that you can use TanStack Table with whatever CSS strategy or component library you want. TanStack Table itself does not render any table markup or styles. You bring your own! Want to use Tailwind or ShadCN? No problem! Want to use Material UI or Bootstrap? No problem!
23
+
24
+
## Features
25
+
26
+
TanStack Table will help you build just about any type of table you can imagine. It has built-in state and APIs for the following features:
27
+
28
+
-[Column Faceting](../guide/column-faceting) - List unique lists of column values or min/max values for a column
29
+
-[Column Filtering](../guide/column-filtering) - Filter rows based based on search values for a column
30
+
-[Column Grouping](../guide/grouping) - Group columns together, run aggregations, and more
31
+
-[Column Ordering](../guide/column-ordering) - Dynamically change the order of columns
32
+
-[Column Pinning](../guide/column-pinning) - Pin (Freeze) columns to the left or right of the table
33
+
-[Column Sizing](../guide/column-sizing) - Dynamically change the size of columns (column resizing handles)
-[Row Sorting](../guide/sorting) - Sort rows by column values
42
+
43
+
These are just some of the capabilities that you can build with TanStack Table. There are many more features that are possible with TanStack Table that you can add along-side the built-in features.
44
+
45
+
[Virtualization](../guide/virtualization) is an example of a feature that is not built-in to TanStack Table, but can be achieved by using another library (like [TanStack Virtual](https://tanstack.com/virtual/v3)) and adding it along-side your other table rendering logic.
46
+
47
+
TanStack Table also supports [Custom Features](../guide/custom-features) (plugins) that you can use to modify the table instance to add your own custom logic to the table in a more integrated way.
48
+
49
+
And of course, you can just write your own state and hooks to add whatever other features you want for your table. The features from the TanStack Table core are just a solid foundation to build on, with a large focus on performance and DX.
50
+
15
51
## Core Objects and Types
16
52
17
53
The table core uses the following abstractions, commonly exposed by adapters:
@@ -32,5 +68,3 @@ The table core uses the following abstractions, commonly exposed by adapters:
32
68
- Each header is either directly associated with or derived from its column def and provides header-specific APIs
33
69
- Cells
34
70
- Each cell mirrors its respective row-column intersection and provides cell-specific APIs
35
-
36
-
There are even more structures that pertain to specific features like filtering, sorting, grouping, etc, which you can find in the [features](./guide/features) section.
0 commit comments