You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Would obsolete #5965, #5918 if merged.
I listed the broken links on my end like this:
# utilizing lychee
# lychee doesn't support checking links recursively from a web page;
# but we do have a kind of sitemap here that we can pass to it.
cd tanstack-table/docs/
lychee $(find . -name '*.md' | sed 's~./~https://tanstack.com/table/latest/docs/~;s/.md//')
# for the local build; might also want `--timeout 60`
lychee $(find . -name '*.md' | sed 's~./~http://localhost:3000/table/latest/docs/~;s/.md//')
# sed's separator in 's/from/to/' can be changed to avoid escaping,
# so 's~from~to~' has the same effect except slashes can stay as-is.
# then s/.md// gets rid of the extension, completing the conversion
# to deployed URLs.
# (I'm explaining all this because I'm also scared by the xz takeover.)
There is some magic with relative links: "../" seems to navigate to
"../../" instead (???), while ./ is the current path. As a result every
replacement here is manually done and tested with lychee. Exceptional
cases are explained in the details section below.
When checking the result afterwards, there may be one broken link left
if locally only the /tanstack/tanstack.com and /tanstack/table
repositories are checked out:
from localhost:3000/table/latest/docs/guide/virtualization,
linking to localhost:3000/virtual/v3/docs/api/virtualizer.
This is an artifact of the way it's checked out.
Detailed changes:
docs/api/core/{cell,column,header-group,header,row,table}:
link to /docs/guide/features currently link to /guide/features
instead, and causes a redirect loop.
This error is deployed right now: check eg.
https://tanstack.com/table/latest/docs/api/core/cell
and click the "table features" link.
(This is not exceptional, just the first case I tackled.)
docs/guide/headers:
Aside from fixing paths, also fix an incorrect reference to
non-existant Column Resizing Guide at docs/guide/column-resizing;
presumably this is misspelling for the Column Sizing Guide at
docs/guide/column-sizing.
docs/guide/row-selection:
Beyond fixing paths, also fix a missing /example/ in the vue example
path.
Copy file name to clipboardexpand all lines: docs/api/core/cell.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: Cell APIs
3
3
---
4
4
5
-
These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../../guide/features).
5
+
These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../guide/features).
Copy file name to clipboardexpand all lines: docs/api/core/column.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: Column APIs
3
3
---
4
4
5
-
These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../../guide/features).
5
+
These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../guide/features).
Copy file name to clipboardexpand all lines: docs/api/core/header-group.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: HeaderGroup APIs
3
3
---
4
4
5
-
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).
5
+
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).
6
6
7
7
## Header Group API
8
8
@@ -30,4 +30,4 @@ The depth of the header group, zero-indexed based.
30
30
typeheaders=Header<TData>[]
31
31
```
32
32
33
-
An array of [Header](../header) objects that belong to this header group
33
+
An array of [Header](../api/core/header) objects that belong to this header group
Copy file name to clipboardexpand all lines: docs/api/core/header.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: Header APIs
3
3
---
4
4
5
-
These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../../guide/features).
5
+
These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../guide/features).
6
6
7
7
## Header API
8
8
@@ -38,15 +38,15 @@ The depth of the header, zero-indexed based.
38
38
column: Column<TData>
39
39
```
40
40
41
-
The header's associated [Column](../column) object
41
+
The header's associated [Column](../api/core/column) object
42
42
43
43
### `headerGroup`
44
44
45
45
```tsx
46
46
headerGroup: HeaderGroup<TData>
47
47
```
48
48
49
-
The header's associated [HeaderGroup](../header-group) object
49
+
The header's associated [HeaderGroup](../api/core/header-group) object
Copy file name to clipboardexpand all lines: docs/api/core/row.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: Row APIs
3
3
---
4
4
5
-
These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../../guide/features).
5
+
These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../guide/features).
6
6
7
7
## Row API
8
8
@@ -120,4 +120,4 @@ An array of the original subRows as returned by the `options.getSubRows` option.
120
120
typegetAllCells= () =>Cell<TData>[]
121
121
```
122
122
123
-
Returns all of the [Cells](../cell) for the row.
123
+
Returns all of the [Cells](../api/core/cell) for the row.
Copy file name to clipboardexpand all lines: docs/api/core/table.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ These functions are used to create a table. Which one you use depends on which f
14
14
15
15
## Options
16
16
17
-
These are **core** options and API properties for the table. More options and API properties are available for other [table features](../../../guide/features).
17
+
These are **core** options and API properties for the table. More options and API properties are available for other [table features](../guide/features).
> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data example](../../../framework/react/examples/editable-data).
92
+
> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data example](../framework/react/examples/editable-data).
You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering APIs](../column-filtering) to learn more about filter functions.
28
+
You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering APIs](../api/features/column-filtering) to learn more about filter functions.
Copy file name to clipboardexpand all lines: docs/api/features/row-selection.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ export type RowSelectionTableState = {
15
15
}
16
16
```
17
17
18
-
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](../../../api/core/table.md#getrowid) function to the the table.
18
+
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.
Copy file name to clipboardexpand all lines: docs/guide/cells.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -4,15 +4,15 @@ title: Cells Guide
4
4
5
5
## API
6
6
7
-
[Cell API](../../api/core/cell)
7
+
[Cell API](../api/core/cell)
8
8
9
9
## Cells Guide
10
10
11
11
This quick guide will discuss the different ways you can retrieve and interact with `cell` objects in TanStack Table.
12
12
13
13
### Where to Get Cells From
14
14
15
-
Cells come from [Rows](../rows). Enough said, right?
15
+
Cells come from [Rows](../guide/rows). Enough said, right?
16
16
17
17
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.
18
18
@@ -32,7 +32,7 @@ During grouping or aggregation features, the `cell.id` will have additional stri
32
32
33
33
#### Cell Parent Objects
34
34
35
-
Every cell stores a reference to its parent [row](../rows) and [column](../columns) objects.
35
+
Every cell stores a reference to its parent [row](../guide/rows) and [column](../guide/columns) objects.
> 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.
11
+
> Note: This guide is about setting up column definitions for your table and NOT about the actual [`column`](../guide/columns) objects that are generated within the table instance.
12
12
13
13
Column defs are the single most important part of building a table. They are responsible for:
14
14
15
15
- Building the underlying data model that will be used for everything including sorting, filtering, grouping, etc.
16
16
- Formatting the data model into what will be displayed in the table
17
-
- Creating [header groups](../../../api/core/header-group), [headers](../../../api/core/header) and [footers](../../../api/core/column-def#footer)
17
+
- Creating [header groups](../api/core/header-group), [headers](../api/core/header) and [footers](../api/core/column-def#footer)
18
18
- Creating columns for display-only purposes, eg. action buttons, checkboxes, expanders, sparklines, etc.
Alternatively, you don't have to put any of your faceting logic through the TanStack Table APIs at all. Just fetch your lists and pass them to your filter components directly.
89
+
Alternatively, you don't have to put any of your faceting logic through the TanStack Table APIs at all. Just fetch your lists and pass them to your filter components directly.
@@ -31,7 +31,7 @@ TanStack table supports both client-side and manual server-side filtering. This
31
31
32
32
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.
33
33
34
-
However, as also discussed in the [Pagination Guide](../pagination#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 mean 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.
34
+
However, as also discussed in the [Pagination Guide](../guide/pagination#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 mean 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.
35
35
36
36
> 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.
@@ -21,9 +21,9 @@ By default, columns are ordered in the order they are defined in the `columns` a
21
21
22
22
There are 3 table features that can reorder columns, which happen in the following order:
23
23
24
-
1.[Column Pinning](../column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns.
24
+
1.[Column Pinning](../guide/column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns.
25
25
2. Manual **Column Ordering** - A manually specified column order is applied.
26
-
3.[Grouping](../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.
26
+
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.
27
27
28
28
> **Note:**`columnOrder` state will only affect unpinned columns if used in conjunction with column pinning.
29
29
@@ -104,8 +104,8 @@ There are undoubtedly many ways to implement drag and drop features along-side T
104
104
105
105
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.
106
106
107
-
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.
107
+
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.
108
108
109
109
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.
110
110
111
-
4. Consider using native browser events and state management to implement lightweight drag and drop features. However, be aware that this approach may not be best for mobile users if you do not go the extra mile to implement proper touch events. [Material React Table V2](https://www.material-react-table.com/docs/examples/column-ordering) is an example of a library that implements TanStack Table with only browser drag and drop events such as `onDragStart`, `onDragEnd`, `onDragEnter` and no other dependencies. Browse its source code to see how it is done.
111
+
4. Consider using native browser events and state management to implement lightweight drag and drop features. However, be aware that this approach may not be best for mobile users if you do not go the extra mile to implement proper touch events. [Material React Table V2](https://www.material-react-table.com/docs/examples/column-ordering) is an example of a library that implements TanStack Table with only browser drag and drop events such as `onDragStart`, `onDragEnd`, `onDragEnter` and no other dependencies. Browse its source code to see how it is done.
0 commit comments