Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fixes in various guide links #5932

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
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
8 changes: 4 additions & 4 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](../rows). Enough said, right?
Cells come from [Rows](./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](../rows) and [column](../columns) objects.
Every cell stores a reference to its parent [row](./rows) and [column](./columns) objects.

#### Access Cell Values

Expand Down Expand Up @@ -82,4 +82,4 @@ const columns = [
{row.getVisibleCells().map(cell => {
return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
})}
</tr>
</tr>
8 changes: 4 additions & 4 deletions docs/guide/column-defs.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ title: Columns Definitions Guide

## API

[Column Def](../../api/core/column-def)
[Column Def](../api/core/column-def)

## Column Definitions Guide

> Note: This guide is about setting up column definitions for your table and NOT about the actual [`column`](../columns) objects that are generated within the table instance.
> Note: This guide is about setting up column definitions for your table and NOT about the actual [`column`](./columns) objects that are generated within the table instance.

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), [headers](../../../api/core/header) and [footers](../../../api/core/column-def#footer)
- Creating [header groups](../api/core/header-group), [headers](../api/core/header) and [footers](../api/core/column-def#footer)
- Creating columns for display-only purposes, eg. action buttons, checkboxes, expanders, sparklines, etc.

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

## Aggregated Cell Formatting

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

## Header & Footer Formatting

Expand Down
10 changes: 5 additions & 5 deletions docs/guide/columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ title: Columns Guide

## API

[Column API](../../api/core/column)
[Column API](../api/core/column)

## Columns Guide

> Note: This guide is about the actual `column` objects that are generated within the table instance and NOT about setting up the [column definitions](../column-defs) for your table.
> Note: This guide is about the actual `column` objects that are generated within the table instance and NOT about setting up the [column definitions](./column-defs) for your table.

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

Expand All @@ -18,7 +18,7 @@ You can find the `column` objects in many places. They are often attached

#### Header and Cell Objects

Before you reach for one of the `table` instance APIs, consider if you actually need to retrieve either [headers](../headers) or [cells](../cells) instead of `columns`. If you are rending out the markup for your table, you will most likely want to reach for the APIs that return headers or cells instead of columns. The column objects themselves are not really meant to render out the headers or cells, but the `header` and `cell` objects will contain references to these `column` objects from which they can derive the necessary information to render their UI.
Before you reach for one of the `table` instance APIs, consider if you actually need to retrieve either [headers](./headers) or [cells](./cells) instead of `columns`. If you are rending out the markup for your table, you will most likely want to reach for the APIs that return headers or cells instead of columns. The column objects themselves are not really meant to render out the headers or cells, but the `header` and `cell` objects will contain references to these `column` objects from which they can derive the necessary information to render their UI.

```js
const column = cell.column; // get column from cell
Expand Down Expand Up @@ -47,7 +47,7 @@ Column objects are not actually meant to be used to render out the table UI dire

#### Column IDs

Every column must have a unique `id` defined in their associated [Column Definition](../column-defs). Usually, you define this `id` yourself, or it is derived from the `accessorKey` or `header` properties in the column definition.
Every column must have a unique `id` defined in their associated [Column Definition](./column-defs). Usually, you define this `id` yourself, or it is derived from the `accessorKey` or `header` properties in the column definition.

#### ColumnDef

Expand All @@ -67,6 +67,6 @@ There are dozens of Column APIs that you can use to interact with the table stat

### Column Rendering

Don't necessarily use `column` objects to render `headers` or `cells` directly. Instead, use the [`header`](../headers) and [`cell`](../cells) objects, as discussed above.
Don't necessarily use `column` objects to render `headers` or `cells` directly. Instead, use the [`header`](./headers) and [`cell`](./cells) objects, as discussed above.

But if you are just rendering a list of columns somewhere else in your UI for something like a column visibility menu or something similar, you can just map over a columns array and render out the UI as you normally would.
10 changes: 5 additions & 5 deletions docs/guide/data.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,13 @@ const columns = [
},
{
header: 'Age',
accessorFn: row => row.info.age,
accessorFn: row => row.info.age,
},
//...
]
```

This is discussed in more detail in the [Column Def Guide](../column-defs).
This is discussed in more detail in the [Column Def Guide](./column-defs).

> NOTE: The "keys" in your json data can usually be anything, but any periods in the keys will be interpreted as a deep key and will cause errors.

Expand Down Expand Up @@ -179,7 +179,7 @@ type User = {
}
```

Where `subRows` is an optional array of `User` objects. This is discussed in more detail in the [Expanding Guide](../expanding).
Where `subRows` is an optional array of `User` objects. This is discussed in more detail in the [Expanding Guide](./expanding).

### Give Data a "Stable" Reference

Expand Down Expand Up @@ -239,12 +239,12 @@ export default function MyComponent() {

### How TanStack Table Transforms Data

Later, in other parts of these docs, you will see how TanStack Table processes the `data` that you pass to the table and generates the row and cell objects that are used to create the table. The `data` that you pass to the table is never mutated by TanStack Table, but the actual values in the rows and cells may be transformed by the accessors in your column definitions, or by other features performed by [row models](../row-models) like grouping or aggregation.
Later, in other parts of these docs, you will see how TanStack Table processes the `data` that you pass to the table and generates the row and cell objects that are used to create the table. The `data` that you pass to the table is never mutated by TanStack Table, but the actual values in the rows and cells may be transformed by the accessors in your column definitions, or by other features performed by [row models](./row-models) like grouping or aggregation.

### How Much Data Can TanStack Table Handle?

Believe it or not, TanStack Table was actually built to scale up to handle potentially hundreds of thousands of rows of data in the client. This is obviously not always possible, depending on the size of each column's data and the number of columns. However, the sorting, filtering, pagination, and grouping features are all built with performance in mind for large datasets.

The default mindset of a developer building a data grid is to implement server-side pagination, sorting, and filtering for large datasets. This is still usually a good idea, but a lot of developers underestimate how much data can actually be handled in the client with modern browsers and the right optimizations. If your table will never have more than a few thousand rows, you can probably take advantage of the client-side features in TanStack Table instead of implementing them yourself on the server. Before committing to letting TanStack Table's client-side features handle your large dataset, you should test it with your actual data to see if it performs well enough for your needs, of course.

This is discussed in more detail in the [Pagination Guide](../pagination#should-you-use-client-side-pagination).
This is discussed in more detail in the [Pagination Guide](./pagination#should-you-use-client-side-pagination).
10 changes: 5 additions & 5 deletions docs/guide/header-groups.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,29 @@ title: Header Groups Guide

## API

[Header Group API](../../api/core/header-group)
[Header Group API](../api/core/header-group)

## Header Groups Guide

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

### What are Header Groups?

Header Groups are simply "rows" of headers. Don't let the name confuse you, it's just that simple. The large majority of tables will only have one row of headers (a single header group), but if you define your column structure with nested columns as with the [Column Groups example](../../framework/react/examples/column-groups), you can have multiple rows of headers (multiple header groups).
Header Groups are simply "rows" of headers. Don't let the name confuse you, it's just that simple. The large majority of tables will only have one row of headers (a single header group), but if you define your column structure with nested columns as with the [Column Groups example](../framework/react/examples/column-groups), you can have multiple rows of headers (multiple header groups).

### Where to Get Header Groups From

There are multiple `table` instance APIs you can use to retrieve header groups from the table instance. `table.getHeaderGroups` is the most common API to use, but depending on the features that you are using, you may need to use other APIs, such as `table.get[Left/Center/Right]HeaderGroups` if you are using column pinning features.

### Header Group Objects

Header Group objects are similar to [Row](../rows) objects, though simpler since there is not as much going on in header rows as there are in the body rows.
Header Group objects are similar to [Row](./rows) objects, though simpler since there is not as much going on in header rows as there are in the body rows.

By default, header groups only have three properties:

- `id`: The unique identifier for the header group that is generated from its depth (index). This is useful as a key for React components.
- `depth`: The depth of the header group, zero-indexed based. Think of this as the row index amongst all header rows.
- `headers`: An array of [Header](../headers) cell objects that belong to this header group (row).
- `headers`: An array of [Header](./headers) cell objects that belong to this header group (row).

### Access Header Cells

Expand All @@ -46,4 +46,4 @@ To render the header cells in a header group, you just map over the `headers` ar
)
})}
</thead>
```
```
14 changes: 7 additions & 7 deletions docs/guide/headers.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Headers Guide

## API

[Header API](../../api/core/header)
[Header API](../api/core/header)

## Headers Guide

Expand All @@ -14,7 +14,7 @@ Headers are the equivalent of cells, but meant for the `<thead>` section of the

### Where to Get Headers From

Headers come from [Header Groups](../header-groups), which are the equivalent of rows, but meant for the `<thead>` section of the table instead of the `<tbody>` section.
Headers come from [Header Groups](./header-groups), which are the equivalent of rows, but meant for the `<thead>` section of the table instead of the `<tbody>` section.

#### HeaderGroup Headers

Expand Down Expand Up @@ -42,11 +42,11 @@ There are multiple `table` instance APIs that you can use to retrieve a list of

### Header Objects

Header objects are similar to [Cell](../cells) objects, but meant for the `<thead>` section of the table instead of the `<tbody>` section. Every header object can be associated with a `<th>` or similar cell element in your UI. There are a few properties and methods on `header` objects that you can use to interact with the table state and extract cell values from the table based on the state of the table.
Header objects are similar to [Cell](./cells) objects, but meant for the `<thead>` section of the table instead of the `<tbody>` section. Every header object can be associated with a `<th>` or similar cell element in your UI. There are a few properties and methods on `header` objects that you can use to interact with the table state and extract cell values from the table based on the state of the table.

#### Header IDs

Every header object has an `id` property that makes it unique within the table instance. Usually you only need this `id` as a unique identifier for React keys or if you are following the [performant column resizing example](../../framework/react/examples/column-resizing-performant).
Every header object has an `id` property that makes it unique within the table instance. Usually you only need this `id` as a unique identifier for React keys or if you are following the [performant column resizing example](../framework/react/examples/column-resizing-performant).

For simple headers with no advanced nested or grouped headers logic, the `header.id` will be the same as it's parent `column.id`. However, if the header is part group column or a placeholder cell, it will have a more complicated id that is constructed from the header family, depth/header row index, column id, and header group id.

Expand All @@ -65,11 +65,11 @@ There are a few properties on `header` objects that are only useful if the heade

#### Header Parent Objects

Every header stores a reference to its parent [column](../columns) object and its parent [header group](../header-groups) object.
Every header stores a reference to its parent [column](./columns) object and its parent [header group](./header-groups) object.

### More Header APIs

Headers have a few more useful APIs attached to them that are useful for interacting with the table state. Most of them relate to the Column sizing and resizing features. See the [Column Resizing Guide](../column-resizing) for more information.
Headers have a few more useful APIs attached to them that are useful for interacting with the table state. Most of them relate to the Column sizing and resizing features. See the [Column Resizing Guide](./column-resizing) for more information.

### Header Rendering

Expand All @@ -81,4 +81,4 @@ Since the `header` column option you defined can be either a string, jsx, or a f
{/* Handles all possible header column def scenarios for `header` */}
{flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
))}
6 changes: 3 additions & 3 deletions docs/guide/rows.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Rows Guide

## API

[Row API](../../api/core/row)
[Row API](../api/core/row)

## Rows Guide

Expand All @@ -24,7 +24,7 @@ const row = table.getRow(rowId)

#### Row Models

The `table` instance generates `row` objects and stores them in useful arrays called ["Row Models"](../row-models). This is discussed in much more detail in the [Row Models Guide](../row-models), but here are the most common ways you may access the row models.
The `table` instance generates `row` objects and stores them in useful arrays called ["Row Models"](./row-models). This is discussed in much more detail in the [Row Models Guide](./row-models), but here are the most common ways you may access the row models.

##### Render Rows

Expand Down Expand Up @@ -94,4 +94,4 @@ If you are using either grouping or expanding features, your rows may contain su

### More Row APIs

Depending on the features that you are using for your table, there are dozens more useful APIs for interacting with rows. See each features' respective API docs or guide for more information.
Depending on the features that you are using for your table, there are dozens more useful APIs for interacting with rows. See each features' respective API docs or guide for more information.
10 changes: 5 additions & 5 deletions docs/guide/tables.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Table Instance Guide

## API

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

## Table Instance Guide

Expand All @@ -22,7 +22,7 @@ Define your data as an array of objects with a stable reference. `data` can come

#### Defining Columns

Column definitions are covered in detail in the previous section in the [Column Def Guide](../column-defs). We'll note here, however, that when you define the type of your columns, you should use the same `TData` type that you used for your data.
Column definitions are covered in detail in the previous section in the [Column Def Guide](./column-defs). We'll note here, however, that when you define the type of your columns, you should use the same `TData` type that you used for your data.

```ts
const columns: ColumnDef<User>[] = [] //Pass User type as the generic TData type
Expand All @@ -34,7 +34,7 @@ The column definitions are where we will tell TanStack Table how each column sho

#### Passing in Row Models

This is explained in much more detail in the [Row Models Guide](../row-models), but for now, just import the `getCoreRowModel` function from TanStack Table and pass it in as a table option. Depending on the features you plan to use, you may need to pass in additional row models later.
This is explained in much more detail in the [Row Models Guide](./row-models), but for now, just import the `getCoreRowModel` function from TanStack Table and pass it in as a table option. Depending on the features you plan to use, you may need to pass in additional row models later.

```ts
import { getCoreRowModel } from '@tanstack/[framework]-table'
Expand Down Expand Up @@ -86,15 +86,15 @@ table.setRowSelection((old) => ({...old})) //set the row selection state
table.resetRowSelection() //reset the row selection state
```

This is covered in more detail in the [Table State Guides](../../framework/react/guide/table-state)
This is covered in more detail in the [Table State Guides](../framework/react/guide/table-state)

### Table APIs

There are dozens of table APIs created by each feature to help you either read or mutate the table state in different ways.

API reference docs for the core table instance and all other feature APIs can be found throughout the API docs.

For example, you can find the core table instance API docs here: [Table API](../../api/core/table#table-api)
For example, you can find the core table instance API docs here: [Table API](../api/core/table#table-api)

### Table Row Models

Expand Down