Skip to content
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
4 changes: 2 additions & 2 deletions docs/api/core/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ initialState?: Partial<
>
```

Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state.
Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (e.g. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state.

> 🧠 Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.

Expand Down Expand Up @@ -227,7 +227,7 @@ getRowId?: (
) => string
```

This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index e.g. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity e.g. a userId, taskId, database ID field, etc.

## Table API

Expand Down
4 changes: 2 additions & 2 deletions docs/api/features/column-filtering.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ This optional "hanging" method on any given `filterFn` allows the filter functio

### `filterFn.autoRemove`

This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. eg. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`.
This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. e.g. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`.

#### Using Filter Functions

Expand Down Expand Up @@ -169,7 +169,7 @@ The filter function to use with this column.

Options:

- A `string` referencing a [built-in filter function](#filter-functions))
- A `string` referencing a [built-in filter function](#filter-functions)
- A [custom filter function](#filter-functions)

### `enableColumnFilter`
Expand Down
2 changes: 1 addition & 1 deletion docs/api/features/column-sizing.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ The dragging and release events are automatically handled for you.
enableColumnResizing?: boolean
```

Enables/disables column resizing for \*all columns\*\*.
Enables/disables column resizing for **all columns**.

### `columnResizeMode`

Expand Down
2 changes: 1 addition & 1 deletion docs/api/features/global-filtering.md
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ The filter function to use for global filtering.

Options:

- A `string` referencing a [built-in filter function](#filter-functions))
- A `string` referencing a [built-in filter function](#filter-functions)
- A `string` that references a custom filter functions provided via the `tableOptions.filterFns` option
- A [custom filter function](#filter-functions)

Expand Down
2 changes: 1 addition & 1 deletion docs/api/features/grouping.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ The aggregation function to use with this column.

Options:

- A `string` referencing a [built-in aggregation function](#aggregation-functions))
- A `string` referencing a [built-in aggregation function](#aggregation-functions)
- A [custom aggregation function](#aggregation-functions)

### `aggregatedCell`
Expand Down
2 changes: 1 addition & 1 deletion docs/api/features/pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ When manually controlling pagination, you can supply a total `rowCount` value to
autoResetPageIndex?: boolean
```

If set to `true`, pagination will be reset to the first page when page-altering state changes eg. `data` is updated, filters change, grouping changes, etc.
If set to `true`, pagination will be reset to the first page when page-altering state changes e.g. `data` is updated, filters change, grouping changes, etc.

> 🧠 Note: This option defaults to `false` if `manualPagination` is set to `true`

Expand Down
4 changes: 2 additions & 2 deletions docs/api/features/sorting.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ The sorting function to use with this column.

Options:

- A `string` referencing a [built-in sorting function](#sorting-functions))
- A `string` referencing a [built-in sorting function](#sorting-functions)
- A [custom sorting function](#sorting-functions)

### `sortDescFirst`
Expand Down Expand Up @@ -118,7 +118,7 @@ Enables/Disables multi-sorting for this column.
invertSorting?: boolean
```

Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring
Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g. a ranking (1st, 2nd, 3rd) or golf-like scoring

### `sortUndefined`

Expand Down
2 changes: 1 addition & 1 deletion docs/enterprise/ag-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ title: AG Grid - An alternative enterprise data-grid solution
</a>
</p>

While we clearly love TanStack Table, we acknowledge that it is not a "batteries" included product packed with customer support and enterprise polish. We realize that some of our users may need this though! To help out here, we want to introduce you to AG Grid, an enterprise-grade data grid solution that can supercharge your applications with its extensive feature set and robust performance. While TanStack Table is also a powerful option for implementing data grids, we believe in providing our users with a diverse range of choices that best fit their specific requirements. AG Grid is one such choice, and we're excited to highlight its capabilities for you.
While we clearly love TanStack Table, we acknowledge that it is not a "batteries included" product packed with customer support and enterprise polish. We realize that some of our users may need this though! To help out here, we want to introduce you to AG Grid, an enterprise-grade data grid solution that can supercharge your applications with its extensive feature set and robust performance. While TanStack Table is also a powerful option for implementing data grids, we believe in providing our users with a diverse range of choices that best fit their specific requirements. AG Grid is one such choice, and we're excited to highlight its capabilities for you.

## Why Choose [AG Grid](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable)?

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/qwik/guide/table-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const table = useQwikTable({
})


const sate = Qwik.useSignal({
const state = Qwik.useSignal({
...table.initialState, //populate the initial state with all of the default state values from the table instance
pagination: {
pageIndex: 0,
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/react/guide/table-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ const table = useReactTable({
state: {
pagination,
sorting,
}
},
//syntax 1
onPaginationChange: (updater) => {
setPagination(old => {
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/solid/guide/table-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ const table = createSolidTable({
get sorting() {
return sorting()
},
}
},
//syntax 1
onPaginationChange: (updater) => {
setPagination(old => {
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/vue/guide/table-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const sorting = ref([{
id: 'age',
desc: true, //sort by age in descending order by default
}])
const pagination = ref({ pageIndex: 0, pageSize: 15 }
const pagination = ref({ pageIndex: 0, pageSize: 15 })

//Use our controlled state values to fetch data
const tableQuery = useQuery({
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 @@ -13,7 +13,7 @@ Column defs are the single most important part of building a table. They are res
- 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 columns for display-only purposes, eg. action buttons, checkboxes, expanders, sparklines, etc.
- Creating columns for display-only purposes, e.g. action buttons, checkboxes, expanders, sparklines, etc.

## Column Def Types

Expand All @@ -22,7 +22,7 @@ The following "types" of column defs aren't actually TypeScript types, but more
- `Accessor Columns`
- Accessor columns have an underlying data model which means they can be sorted, filtered, grouped, etc.
- `Display Columns`
- Display columns do **not** have a data model which means they cannot be sorted, filtered, etc, but they can be used to display arbitrary content in the table, eg. a row actions button, checkbox, expander, etc.
- Display columns do **not** have a data model which means they cannot be sorted, filtered, etc, but they can be used to display arbitrary content in the table, e.g. a row actions button, checkbox, expander, etc.
- `Grouping Columns`
- Group columns do **not** have a data model so they too cannot be sorted, filtered, etc, and are used to group other columns together. It's common to define a header or footer for a column group.

Expand Down Expand Up @@ -211,7 +211,7 @@ Columns are uniquely identified with 3 strategies:

## Column Formatting & Rendering

By default, columns cells will display their data model value as a string. You can override this behavior by providing custom rendering implementations. Each implementation is provided relevant information about the cell, header or footer and returns something your framework adapter can render eg. JSX/Components/strings/etc. This will depend on which adapter you are using.
By default, columns cells will display their data model value as a string. You can override this behavior by providing custom rendering implementations. Each implementation is provided relevant information about the cell, header or footer and returns something your framework adapter can render e.g. JSX/Components/strings/etc. This will depend on which adapter you are using.

There are a couple of formatters available to you:

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/column-filtering.md
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ You can attach a few other properties to filter functions to customize their beh

- `filterFn.resolveFilterValue` - This optional "hanging" method on any given `filterFn` allows the filter function to transform/sanitize/format the filter value before it is passed to the filter function.

- `filterFn.autoRemove` - This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. eg. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`.
- `filterFn.autoRemove` - This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. e.g. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`.

```tsx
const startsWithFilterFn = <TData extends MRT_RowData>(
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/column-ordering.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const reorderColumn = <TData extends RowData>(
};

const handleDragEnd = (e: DragEvent) => {
if(!movingColumnId || !targetColumnId) return;
if (!movingColumnId || !targetColumnId) return;
setColumnOrder(reorderColumn(movingColumnId, targetColumnId));
};

Expand All @@ -100,7 +100,7 @@ const handleDragEnd = (e: DragEvent) => {

#### Drag and Drop Column Reordering Suggestions (React)

There are undoubtedly many ways to implement drag and drop features along-side TanStack Table. Here are a few suggestions in order for you to not have a bad time:
There are undoubtedly many ways to implement drag and drop features alongside TanStack Table. Here are a few suggestions in order for you to not have a bad time:

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.

Expand Down
7 changes: 4 additions & 3 deletions docs/guide/column-pinning.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ 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)

### Other Examples

### Other Examples


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

Expand Down Expand Up @@ -55,7 +56,7 @@ const table = useReactTable({

### Pin Columns by Default

A very common use case is to pin some columns by default. You can do this by either initializing the `columnPinning` state with the pinned columnIds, or by using the `initialState` table option
A very common use case is to pin some columns by default. You can do this by either initializing the `columnPinning` state with the pinned columnIds, or by using the `initialState` table option.

```jsx
const table = useReactTable({
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/column-sizing.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:

## Column Sizing Guide

The column sizing feature allows you to optionally specify the width of each column including min and max widths. It also allows you and your users the ability to dynamically change the width of all columns at will, eg. by dragging the column headers.
The column sizing feature allows you to optionally specify the width of each column including min and max widths. It also allows you and your users the ability to dynamically change the width of all columns at will, e.g. by dragging the column headers.

### Column Widths

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -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](../guide/headers) or [cells](../guide/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](../guide/headers) or [cells](../guide/cells) instead of `columns`. If you are rendering 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
2 changes: 1 addition & 1 deletion docs/guide/custom-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -282,4 +282,4 @@ return(

#### Do We Have to Do It This Way?

This is just a new way to integrate custom code along-side the built-in features in TanStack Table. In our example up above, we could have just as easily stored the `density` state in a `React.useState`, defined our own `toggleDensity` handler wherever, and just used it in our code separately from the table instance. Building table features along-side TanStack Table instead of deeply integrating them into the table instance is still a perfectly valid way to build custom features. Depending on your use case, this may or may not be the cleanest way to extend TanStack Table with custom features.
This is just a new way to integrate custom code alongside the built-in features in TanStack Table. In our example up above, we could have just as easily stored the `density` state in a `React.useState`, defined our own `toggleDensity` handler wherever, and just used it in our code separately from the table instance. Building table features alongside TanStack Table instead of deeply integrating them into the table instance is still a perfectly valid way to build custom features. Depending on your use case, this may or may not be the cleanest way to extend TanStack Table with custom features.
2 changes: 1 addition & 1 deletion docs/guide/expanding.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ type Person = {
children?: Person[] | undefined
}

const data: Person[] = [
const data: Person[] = [
{ id: 1,
name: 'John',
age: 30,
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/global-filtering.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ const table = useReactTable({
// other options...
initialState: {
globalFilter: 'search term', // if not managing globalFilter state, set initial state here
}
},
state: {
globalFilter, // pass our managed globalFilter state to the table
}
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/grouping.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ When grouping state is active, the table will add matching rows as subRows to th
To allow the user to expand and collapse the grouped rows, you can use the expanding feature.

```tsx
import { getGroupedRowModel, getExpandedRowModel} from '@tanstack/react-table'
import { getGroupedRowModel, getExpandedRowModel } from '@tanstack/react-table'

const table = useReactTable({
// other options...
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/pinning.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Pinning Guide
---

<!-- Deprecated -->
<!-- Deprecated -->

Pinning is split into 2 different feature guides:

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/sorting.md
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ const table = useReactTable({

#### Invert Sorting

Inverting sorting is not the same as changing the default sorting direction. If `invertSorting` column option is `true` for a column, then the "desc/asc" sorting states will still cycle like normal, but the actual sorting of the rows will be inverted. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring.
Inverting sorting is not the same as changing the default sorting direction. If `invertSorting` column option is `true` for a column, then the "desc/asc" sorting states will still cycle like normal, but the actual sorting of the rows will be inverted. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g. a ranking (1st, 2nd, 3rd) or golf-like scoring.

```jsx
const columns = [
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/tables.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const data = ref<User[]>([])

#### Defining Columns

Column definitions are covered in detail in the next section in the [Column Def Guide](./column-defs.md). 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 you data.
Column definitions are covered in detail in the next section in the [Column Def Guide](./column-defs.md). 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 Down
4 changes: 2 additions & 2 deletions docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ npm install @tanstack/react-table

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

> NOTE: Even though the react adapter works with React 19, it may not work with the new React Compiler that's coming out along-side React 19. This may be fixed in future TanStack Table updates.
> NOTE: Even though the React adapter works with React 19, it may not work with the new React Compiler that's coming out alongside React 19. This may be fixed in future TanStack Table updates.

## Vue Table

Expand All @@ -32,7 +32,7 @@ The `@tanstack/vue-table` package works with Vue 3.
npm install @tanstack/solid-table
```

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

## Svelte Table

Expand Down
Loading