WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/api/core/cell.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Cell APIs
---

These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../../guide/features.md).
These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../guide/features.md).

## Cell API

Expand Down
2 changes: 1 addition & 1 deletion docs/api/core/column.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Column APIs
---

These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../../guide/features.md).
These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../guide/features.md).

## Column API

Expand Down
4 changes: 2 additions & 2 deletions docs/api/core/header-group.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: HeaderGroup APIs
---

These are **core** options and API properties for all header groups. More options and API properties may be available for other [table features](../../../guide/features.md).
These are **core** options and API properties for all header groups. More options and API properties may be available for other [table features](../../guide/features.md).

## Header Group API

Expand Down Expand Up @@ -30,4 +30,4 @@ The depth of the header group, zero-indexed based.
type headers = Header<TData>[]
```

An array of [Header](../header.md) objects that belong to this header group
An array of [Header](./header.md) objects that belong to this header group
6 changes: 3 additions & 3 deletions docs/api/core/header.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Header APIs
---

These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../../guide/features.md).
These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../guide/features.md).

## Header API

Expand Down Expand Up @@ -38,15 +38,15 @@ The depth of the header, zero-indexed based.
column: Column<TData>
```

The header's associated [Column](../column.md) object
The header's associated [Column](./column.md) object

### `headerGroup`

```tsx
headerGroup: HeaderGroup<TData>
```

The header's associated [HeaderGroup](../header-group.md) object
The header's associated [HeaderGroup](./header-group.md) object

### `subHeaders`

Expand Down
4 changes: 2 additions & 2 deletions docs/api/core/row.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Row APIs
---

These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../../guide/features.md).
These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../guide/features.md).

## Row API

Expand Down Expand Up @@ -120,4 +120,4 @@ An array of the original subRows as returned by the `options.getSubRows` option.
type getAllCells = () => Cell<TData>[]
```

Returns all of the [Cells](../cell.md) for the row.
Returns all of the [Cells](./cell.md) for the row.
4 changes: 2 additions & 2 deletions docs/api/core/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ These functions are used to create a table. Which one you use depends on which f

## Options

These are **core** options and API properties for the table. More options and API properties are available for other [table features](../../../guide/features.md).
These are **core** options and API properties for the table. More options and API properties are available for other [table features](../../guide/features.md).

### `data`

Expand All @@ -34,7 +34,7 @@ When the `data` option changes reference (compared via `Object.is`), the table w
type columns = ColumnDef<TData>[]
```

The array of column defs to use for the table. See the [Column Def Guide](../../../guide/column-defs.md) for more information on creating column definitions.
The array of column defs to use for the table. See the [Column Def Guide](../../guide/column-defs.md) for more information on creating column definitions.

### `defaultColumn`

Expand Down
8 changes: 4 additions & 4 deletions docs/api/features/filters.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ id: filters

The Filtering API docs are now split into multiple API doc pages:

- [Column Faceting](../../../guide/column-faceting.md)
- [Global Faceting](../../../guide/global-faceting.md)
- [Column Filtering](../../../guide/column-filtering.md)
- [Global Filtering](../../../guide/global-filtering.md)
- [Column Faceting](../../guide/column-faceting.md)
- [Global Faceting](../../guide/global-faceting.md)
- [Column Filtering](../../guide/column-filtering.md)
- [Global Filtering](../../guide/global-filtering.md)
2 changes: 1 addition & 1 deletion docs/api/features/global-filtering.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export interface GlobalFilterTableState {

## Filter Functions

You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering](../../../guide/column-filtering.md) to learn more about filter functions.
You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering](../../guide/column-filtering.md) to learn more about filter functions.

#### Using Filter Functions

Expand Down
4 changes: 2 additions & 2 deletions docs/api/features/pinning.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ id: pinning

The pinning apis are now split into multiple api pages:

- [Column Pinning](../../../guide/column-pinning.md)
- [Row Pinning](../../../guide/row-pinning.md)
- [Column Pinning](../../guide/column-pinning.md)
- [Row Pinning](../../guide/row-pinning.md)
2 changes: 1 addition & 1 deletion docs/api/features/row-selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export type RowSelectionTableState = {
}
```

By default, the row selection state uses the index of each row as the row identifiers. Row selection state can instead be tracked with a custom unique row id by passing in a custom [getRowId](../../core/table.md#getrowid) function to the the table.
By default, the row selection state uses the index of each row as the row identifiers. Row selection state can instead be tracked with a custom unique row id by passing in a custom [getRowId](../core/table.md#getrowid) function to the the table.

## Table Options

Expand Down
4 changes: 2 additions & 2 deletions docs/framework/react/guide/table-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ title: Table State (React) Guide

Want to skip to the implementation? Check out these examples:

- [kitchen sink](../../examples/kitchen-sink)
- [fully controlled](../../examples/fully-controlled)
- [kitchen sink](../examples/kitchen-sink)
- [fully controlled](../examples/fully-controlled)

## Table State (React) Guide

Expand Down
6 changes: 3 additions & 3 deletions docs/guide/cells.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: Cells Guide

## API

[Cell API](../../api/core/cell)
[Cell API](../api/core/cell)

## Cells Guide

This quick guide will discuss the different ways you can retrieve and interact with `cell` objects in TanStack Table.

### Where to Get Cells From

Cells come from [Rows](../../guide/rows). Enough said, right?
Cells come from [Rows](../guide/rows). Enough said, right?

There are multiple `row` instance APIs you can use to retrieve the appropriate cells from a row depending on which features you are using. Most commonly, you will use the `row.getAllCells` or `row.getVisibleCells` APIs (if you are using column visibility features), but there are a handful of other similar APIs that you can use.

Expand All @@ -32,7 +32,7 @@ During grouping or aggregation features, the `cell.id` will have additional stri

#### Cell Parent Objects

Every cell stores a reference to its parent [row](../../guide/rows) and [column](../../guide/columns) objects.
Every cell stores a reference to its parent [row](../guide/rows) and [column](../guide/columns) objects.

#### Access Cell Values

Expand Down
6 changes: 3 additions & 3 deletions docs/guide/column-defs.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: Columns Guide

## API

[Table API](../../api/core/table.md)
[Table API](../api/core/table.md)

## Column Definitions Guide

Column defs are the single most important part of building a table. They are responsible for:

- Building the underlying data model that will be used for everything including sorting, filtering, grouping, etc.
- Formatting the data model into what will be displayed in the table
- Creating [header groups](../../api/core/header-group.md), [headers](../../api/core/header.md) and [footers](../../api/core/column-def.md#footer)
- Creating [header groups](../api/core/header-group.md), [headers](../api/core/header.md) and [footers](../api/core/column-def.md#footer)
- Creating columns for display-only purposes, eg. action buttons, checkboxes, expanders, sparklines, etc.

## Column Def Types
Expand Down Expand Up @@ -242,7 +242,7 @@ columnHelper.accessor('firstName', {

## Aggregated Cell Formatting

For more info on aggregated cells, see [grouping](../grouping.md).
For more info on aggregated cells, see [grouping](./grouping.md).

## Header & Footer Formatting

Expand Down
4 changes: 2 additions & 2 deletions docs/guide/column-faceting.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ title: Column Faceting Guide

Want to skip to the implementation? Check out these examples:

- [filters-faceted](../../framework/react/examples/filters-faceted)
- [filters-faceted](../framework/react/examples/filters-faceted)

## API

[Column Faceting API](../../api/features/column-faceting)
[Column Faceting API](../api/features/column-faceting)

## Column Faceting Guide

Expand Down
4 changes: 2 additions & 2 deletions docs/guide/column-filtering.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Want to skip to the implementation? Check out these examples:

## API

[Column Filtering API](../../api/features/column-filtering.md)
[Column Filtering API](../api/features/column-filtering.md)

## Column Filtering Guide

Expand All @@ -29,7 +29,7 @@ TanStack table supports both both client-side and manual server-side filtering.

If you have a large dataset, you may not want to load all of that data into the client's browser in order to filter it. In this case, you will most likely want to implement server-side filtering, sorting, pagination, etc.

However, as also discussed in the [Pagination Guide](../pagination.md#should-you-use-client-side-pagination), a lot of developers underestimate how many rows can be loaded client-side without a performance hit. The TanStack table examples are often tested to handle up to 100,000 rows or more with decent performance for client-side filtering, sorting, pagination, and grouping. This doesn't necessarily that your app will be able to handle that many rows, but if your table is only going to have a few thousand rows at most, you might be able to take advantage of the client-side filtering, sorting, pagination, and grouping that TanStack table provides.
However, as also discussed in the [Pagination Guide](./pagination.md#should-you-use-client-side-pagination), a lot of developers underestimate how many rows can be loaded client-side without a performance hit. The TanStack table examples are often tested to handle up to 100,000 rows or more with decent performance for client-side filtering, sorting, pagination, and grouping. This doesn't necessarily that your app will be able to handle that many rows, but if your table is only going to have a few thousand rows at most, you might be able to take advantage of the client-side filtering, sorting, pagination, and grouping that TanStack table provides.

> TanStack Table can handle thousands of client-side rows with good performance. Don't rule out client-side filtering, pagination, sorting, etc. without some thought first.

Expand Down
12 changes: 6 additions & 6 deletions docs/guide/column-ordering.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ title: Column Ordering Guide

Want to skip to the implementation? Check out these examples:

- [column-ordering](../../framework/react/examples/column-ordering)
- [column-dnd](../../framework/react/examples/column-dnd)
- [column-ordering](../framework/react/examples/column-ordering)
- [column-dnd](../framework/react/examples/column-dnd)

## API

[Column Ordering API](../../api/features/column-ordering)
[Column Ordering API](../api/features/column-ordering)

## Column Ordering Guide

Expand All @@ -21,9 +21,9 @@ By default, columns are ordered in the order they are defined in the `columns` a

There are 3 table features that can reorder columns, which happen in the following order:

1. [Column Pinning](../../guide/column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns.
1. [Column Pinning](../guide/column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns.
2. Manual **Column Ordering** - A manually specified column order is applied.
3. [Grouping](../../guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow.
3. [Grouping](../guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow.

> **Note:** `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning.

Expand Down Expand Up @@ -104,7 +104,7 @@ There are undoubtedly many ways to implement drag and drop features along-side T

1. Do NOT try to use [`"react-dnd"`](https://react-dnd.github.io/react-dnd/docs/overview) _if you are using React 18 or newer_. React DnD was an important library for its time, but it now does not get updated very often, and it has incompatibilities with React 18, especially in React Strict Mode. It is still possible to get it to work, but there are newer alternatives that have better compatibility and are more actively maintained. React DnD's Provider may also interfere and conflict with any other DnD solutions you may want to try in your app.

2. Use [`"@dnd-kit/core"`](https://dndkit.com/). DnD Kit is a modern, modular and lightweight drag and drop library that is highly compatible with the modern React ecosystem, and it works well with semantic `<table>` markup. Both of the official TanStack DnD examples, [Column DnD](../../framework/react/examples/column-dnd) and [Row DnD](../../framework/react/examples/row-dnd), now use DnD Kit.
2. Use [`"@dnd-kit/core"`](https://dndkit.com/). DnD Kit is a modern, modular and lightweight drag and drop library that is highly compatible with the modern React ecosystem, and it works well with semantic `<table>` markup. Both of the official TanStack DnD examples, [Column DnD](../framework/react/examples/column-dnd) and [Row DnD](../framework/react/examples/row-dnd), now use DnD Kit.

3. Consider other DnD libraries like [`"react-beautiful-dnd"`](https://github.com/atlassian/react-beautiful-dnd), but be aware of their potentially large bundle sizes, maintenance status, and compatibility with `<table>` markup.

Expand Down
28 changes: 14 additions & 14 deletions docs/guide/column-pinning.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ title: Column Pinning Guide

Want to skip to the implementation? Check out these examples:

- [column-pinning](../../framework/react/examples/column-pinning)
- [sticky-column-pinning](../../framework/react/examples/column-pinning-sticky)
- [column-pinning](../framework/react/examples/column-pinning)
- [sticky-column-pinning](../framework/react/examples/column-pinning-sticky)

### Other Examples

- [Svelte column-pinning](../../framework/svelte/examples/column-pinning)
- [Vue column-pinning](../../framework/vue/examples/column-pinning)
- [Svelte column-pinning](../framework/svelte/examples/column-pinning)
- [Vue column-pinning](../framework/vue/examples/column-pinning)

## API

[Column Pinning API](../../api/features/column-pinning)
[Column Pinning API](../api/features/column-pinning)

## Column Pinning Guide

Expand All @@ -27,8 +27,8 @@ TanStack Table offers state and APIs helpful for implementing column pinning fea
There are 3 table features that can reorder columns, which happen in the following order:

1. **Column Pinning** - If pinning, columns are split into left, center (unpinned), and right pinned columns.
2. Manual [Column Ordering](../../guide/column-ordering) - A manually specified column order is applied.
3. [Grouping](../../guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow.
2. Manual [Column Ordering](../guide/column-ordering) - A manually specified column order is applied.
3. [Grouping](../guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow.

The only way to change the order of the pinned columns is in the `columnPinning.left` and `columnPinning.right` state itself. `columnOrder` state will only affect the order of the unpinned ("center") columns.

Expand Down Expand Up @@ -77,13 +77,13 @@ const table = useReactTable({

There are a handful of useful Column API methods to help you implement column pinning features:

- [`column.getCanPin`](../../api/features/column-pinning#getcanpin): Use to determine if a column can be pinned.
- [`column.pin`](../../api/features/column-pinning#pin): Use to pin a column to the left or right. Or use to unpin a column.
- [`column.getIsPinned`](../../api/features/column-pinning#getispinned): Use to determine where a column is pinned.
- [`column.getStart`](../../api/features/column-pinning#getstart): Use to provide the correct `left` CSS value for a pinned column.
- [`column.getAfter`](../../api/features/column-pinning#getafter): Use to provide the correct `right` CSS value for a pinned column.
- [`column.getIsLastColumn`](../../api/features/column-pinning#getislastcolumn): Use to determine if a column is the last column in its pinned group. Useful for adding a box-shadow
- [`column.getIsFirstColumn`](../../api/features/column-pinning#getisfirstcolumn): Use to determine if a column is the first column in its pinned group. Useful for adding a box-shadow
- [`column.getCanPin`](../api/features/column-pinning#getcanpin): Use to determine if a column can be pinned.
- [`column.pin`](../api/features/column-pinning#pin): Use to pin a column to the left or right. Or use to unpin a column.
- [`column.getIsPinned`](../api/features/column-pinning#getispinned): Use to determine where a column is pinned.
- [`column.getStart`](../api/features/column-pinning#getstart): Use to provide the correct `left` CSS value for a pinned column.
- [`column.getAfter`](../api/features/column-pinning#getafter): Use to provide the correct `right` CSS value for a pinned column.
- [`column.getIsLastColumn`](../api/features/column-pinning#getislastcolumn): Use to determine if a column is the last column in its pinned group. Useful for adding a box-shadow
- [`column.getIsFirstColumn`](../api/features/column-pinning#getisfirstcolumn): Use to determine if a column is the first column in its pinned group. Useful for adding a box-shadow

### Split Table Column Pinning

Expand Down
8 changes: 4 additions & 4 deletions docs/guide/column-sizing.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ title: Column Sizing Guide

Want to skip to the implementation? Check out these examples:

- [column-sizing](../../framework/react/examples/column-sizing)
- [column-resizing-performant](../../framework/react/examples/column-resizing-performant)
- [column-sizing](../framework/react/examples/column-sizing)
- [column-resizing-performant](../framework/react/examples/column-resizing-performant)

## API

[Column Sizing API](../../api/features/column-sizing)
[Column Sizing API](../api/features/column-sizing)

## Column Sizing Guide

Expand Down Expand Up @@ -166,7 +166,7 @@ TanStack Table keeps track of an state object called `columnSizingInfo` that you

If you are creating large or complex tables (and using React 😉), you may find that if you do not add proper memoization to your render logic, your users may experience degraded performance while resizing columns.

We have created a [performant column resizing example](../../framework/react/examples/column-resizing-performant) that demonstrates how to achieve 60 fps column resizing renders with a complex table that may otherwise have slow renders. It is recommended that you just look at that example to see how it is done, but these are the basic things to keep in mind:
We have created a [performant column resizing example](../framework/react/examples/column-resizing-performant) that demonstrates how to achieve 60 fps column resizing renders with a complex table that may otherwise have slow renders. It is recommended that you just look at that example to see how it is done, but these are the basic things to keep in mind:

1. Don't use `column.getSize()` on every header and every data cell. Instead, calculate all column widths once upfront, **memoized**!
2. Memoize your Table Body while resizing is in progress.
Expand Down
Loading
Loading