Skip to content

Commit c40d734

Browse files
authored
docs: update overview and installation (#5462)
1 parent b23c133 commit c40d734

File tree

2 files changed

+65
-9
lines changed

2 files changed

+65
-9
lines changed

docs/installation.md

+29-7
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,60 @@ title: Installation
44

55
Before we dig in to the API, let's get you set up!
66

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.
88

9-
## Qwik Table
9+
_Only install ONE of the following packages:_
10+
11+
## React Table
1012

1113
```bash
12-
npm install @tanstack/qwik-table
14+
npm install @tanstack/react-table
1315
```
1416

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
1620

1721
```bash
18-
npm install @tanstack/react-table
22+
npm install @tanstack/vue-table
1923
```
2024

25+
The `@tanstack/vue-table` package works with Vue 3.
26+
2127
## Solid Table
2228

2329
```bash
2430
npm install @tanstack/solid-table
2531
```
2632

33+
The `@tanstack/solid-table` package works with Solid-JS 1
34+
2735
## Svelte Table
2836

2937
```bash
3038
npm install @tanstack/svelte-table
3139
```
3240

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
3446

3547
```bash
36-
npm install @tanstack/vue-table
48+
npm install @tanstack/qwik-table
3749
```
3850

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.
60+
3961
## Table Core (no framework)
4062

4163
```bash

docs/overview.md

+36-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,46 @@ TanStack Table's core is **framework agnostic**, which means its API is the same
88

99
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)
1010

11+
If you use TypeScript, you will get top-notch type safety and editor autocomplete for all table APIs and state.
12+
1113
## Headless
1214

1315
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!
1416

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)
34+
- [Column Visibility](../guide/column-visibility) - Hide/show columns
35+
- [Global Faceting](../guide/global-faceting) - List unique lists of column values or min/max values for the entire table
36+
- [Global Filtering](../guide/global-filtering) - Filter rows based based on search values for the entire table
37+
- [Row Expanding](../guide/expanding) - Expand/collapse rows (sub-rows)
38+
- [Row Pagination](../guide/pagination) - Paginate rows
39+
- [Row Pinning](../guide/row-pinning) - Pin (Freeze) rows to the top or bottom of the table
40+
- [Row Selection](../guide/row-selection) - Select/deselect rows (checkboxes)
41+
- [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+
1551
## Core Objects and Types
1652

1753
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:
3268
- Each header is either directly associated with or derived from its column def and provides header-specific APIs
3369
- Cells
3470
- 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

Comments
 (0)