Skip to content

Commit

Permalink
docs: update overview and installation (#5462)
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinVandy authored Apr 4, 2024
1 parent b23c133 commit c40d734
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 9 deletions.
36 changes: 29 additions & 7 deletions docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,60 @@ title: Installation

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

Install your table adapter as a dependency using your favorite npm package manager
Install your table adapter as a dependency using your favorite npm package manager.

## Qwik Table
_Only install ONE of the following packages:_

## React Table

```bash
npm install @tanstack/qwik-table
npm install @tanstack/react-table
```

## React Table
The `@tanstack/react-table` package works with React 16.8, React 17, React 18, and React 19.

## Vue Table

```bash
npm install @tanstack/react-table
npm install @tanstack/vue-table
```

The `@tanstack/vue-table` package works with Vue 3.

## Solid Table

```bash
npm install @tanstack/solid-table
```

The `@tanstack/solid-table` package works with Solid-JS 1

## Svelte Table

```bash
npm install @tanstack/svelte-table
```

## Vue Table
The `@tanstack/svelte-table` package works with Svelte 3 and Svelte 4.

> 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.
## Qwik Table

```bash
npm install @tanstack/vue-table
npm install @tanstack/qwik-table
```

The `@tanstack/qwik-table` package works with Qwik 1.

> 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.
## Angular Table

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

The official TanStack Table Angular adapter will most likely only work with Angular 17+ and use a "signals" implementation for state management.

## Table Core (no framework)

```bash
Expand Down
38 changes: 36 additions & 2 deletions docs/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,46 @@ TanStack Table's core is **framework agnostic**, which means its API is the same

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)

If you use TypeScript, you will get top-notch type safety and editor autocomplete for all table APIs and state.

## Headless

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!

## Agnostic

Since TanStack Table is headless and runs on a vanilla JavaScript core, it is agnostic in a couple of ways:

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

## Features

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:

- [Column Faceting](../guide/column-faceting) - List unique lists of column values or min/max values for a column
- [Column Filtering](../guide/column-filtering) - Filter rows based based on search values for a column
- [Column Grouping](../guide/grouping) - Group columns together, run aggregations, and more
- [Column Ordering](../guide/column-ordering) - Dynamically change the order of columns
- [Column Pinning](../guide/column-pinning) - Pin (Freeze) columns to the left or right of the table
- [Column Sizing](../guide/column-sizing) - Dynamically change the size of columns (column resizing handles)
- [Column Visibility](../guide/column-visibility) - Hide/show columns
- [Global Faceting](../guide/global-faceting) - List unique lists of column values or min/max values for the entire table
- [Global Filtering](../guide/global-filtering) - Filter rows based based on search values for the entire table
- [Row Expanding](../guide/expanding) - Expand/collapse rows (sub-rows)
- [Row Pagination](../guide/pagination) - Paginate rows
- [Row Pinning](../guide/row-pinning) - Pin (Freeze) rows to the top or bottom of the table
- [Row Selection](../guide/row-selection) - Select/deselect rows (checkboxes)
- [Row Sorting](../guide/sorting) - Sort rows by column values

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.

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

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.

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.

## Core Objects and Types

The table core uses the following abstractions, commonly exposed by adapters:
Expand All @@ -32,5 +68,3 @@ The table core uses the following abstractions, commonly exposed by adapters:
- Each header is either directly associated with or derived from its column def and provides header-specific APIs
- Cells
- Each cell mirrors its respective row-column intersection and provides cell-specific APIs

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 comments on commit c40d734

Please sign in to comment.