docs: prep for tanstack.com migration to TSR

TanStack · Apr 2, 2024 · 024ecda · 024ecda
1 parent dad9126
commit 024ecda
Show file tree

Hide file tree

Showing 23 changed files with 84 additions and 84 deletions.
diff --git a/docs/framework/react/guide/table-state.md b/docs/framework/react/guide/table-state.md
@@ -6,8 +6,8 @@ title: Table State (React) Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [kitchen sink](../framework/react/examples/kitchen-sink)
-- [fully controlled](../framework/react/examples/fully-controlled)
+- [kitchen sink](../../examples/kitchen-sink)
+- [fully controlled](../../examples/fully-controlled)
 
 ## Table State (React) Guide
 

diff --git a/docs/guide/cells.md b/docs/guide/cells.md
@@ -4,4 +4,4 @@ title: Cells Guide
 
 ## API
 
-[Cell API](../api/core/cell)
+[Cell API](../../api/core/cell)
diff --git a/docs/guide/column-defs.md b/docs/guide/column-defs.md
@@ -4,7 +4,7 @@ title: Columns Guide
 
 ## API
 
-[Table API](../api/core/table)
+[Table API](../../api/core/table)
 
 ## Column Definitions Guide
 
@@ -242,7 +242,7 @@ columnHelper.accessor('firstName', {
 
 ## Aggregated Cell Formatting
 
-For more info on aggregated cells, see [grouping](../guide/grouping).
+For more info on aggregated cells, see [grouping](../grouping).
 
 ## Header & Footer Formatting
 

diff --git a/docs/guide/column-faceting.md b/docs/guide/column-faceting.md
@@ -6,10 +6,10 @@ title: Column Faceting Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [filters](../framework/react/examples/filters) (includes faceting)
+- [filters](../../framework/react/examples/filters) (includes faceting)
 
 ## API
 
-[Column Faceting API](../api/features/column-faceting)
+[Column Faceting API](../../api/features/column-faceting)
 
 ## Column Faceting Guide
diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md
@@ -6,16 +6,16 @@ title: Column Filtering Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [filters](../framework/react/examples/filters) (includes faceting)
-- [editable-data](../framework/react/examples/editable-data)
-- [expanding](../framework/react/examples/expanding)
-- [grouping](../framework/react/examples/grouping)
-- [pagination](../framework/react/examples/pagination)
-- [row-selection](../framework/react/examples/row-selection)
+- [filters](../../framework/react/examples/filters) (includes faceting)
+- [editable-data](../../framework/react/examples/editable-data)
+- [expanding](../../framework/react/examples/expanding)
+- [grouping](../../framework/react/examples/grouping)
+- [pagination](../../framework/react/examples/pagination)
+- [row-selection](../../framework/react/examples/row-selection)
 
 ## API
 
-[Column Filtering API](../api/features/column-filtering)
+[Column Filtering API](../../api/features/column-filtering)
 
 ## Column Filtering Guide
 

diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md
@@ -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
 
@@ -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](../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](../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.
 
@@ -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.
 

diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md
@@ -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
 
@@ -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](../column-ordering) - A manually specified column order is applied.
+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.
 
 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.
 
@@ -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
 

diff --git a/docs/guide/column-sizing.md b/docs/guide/column-sizing.md
@@ -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
 
@@ -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.

diff --git a/docs/guide/column-visibility.md b/docs/guide/column-visibility.md
@@ -6,18 +6,18 @@ title: Column Visibility Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [column-visibility](../framework/react/examples/column-visibility)
-- [column-ordering](../framework/react/examples/column-ordering)
-- [sticky-column-pinning](../framework/react/examples/column-pinning-sticky)
+- [column-visibility](../../framework/react/examples/column-visibility)
+- [column-ordering](../../framework/react/examples/column-ordering)
+- [sticky-column-pinning](../../framework/react/examples/column-pinning-sticky)
 
 ### Other Examples
 
-- [SolidJS column-visibility](../framework/solid/examples/column-visibility)
-- [Svelte column-visibility](../framework/svelte/examples/column-visibility)
+- [SolidJS column-visibility](../../framework/solid/examples/column-visibility)
+- [Svelte column-visibility](../../framework/svelte/examples/column-visibility)
 
 ## API
 
-[Column Visibility API](../api/features/column-visibility)
+[Column Visibility API](../../api/features/column-visibility)
 
 ## Column Visibility Guide
 

diff --git a/docs/guide/custom-features.md b/docs/guide/custom-features.md
@@ -6,7 +6,7 @@ title: Custom Features Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [custom-features](../framework/react/examples/custom-features)
+- [custom-features](../../framework/react/examples/custom-features)
 
 ## Custom Features Guide
 
@@ -108,7 +108,7 @@ The `createCell` method in a table feature is responsible for adding methods to
 
 Let's walk through making a custom table feature for a hypothetical use case. Let's say we want to add a feature to the table instance that allows the user to change the "density" (padding of cells) of the table. 
 
-Check out the full [custom-features](../framework/react/examples/custom-features) example to see the full implementation, but here's an in-depth look at the steps to create a custom feature.
+Check out the full [custom-features](../../framework/react/examples/custom-features) example to see the full implementation, but here's an in-depth look at the steps to create a custom feature.
 
 #### Step 1: Set up TypeScript Types
 

diff --git a/docs/guide/expanding.md b/docs/guide/expanding.md
@@ -6,11 +6,11 @@ title: Expanding Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [expanding](../framework/react/examples/expanding)
-- [grouping](../framework/react/examples/grouping)
+- [expanding](../../framework/react/examples/expanding)
+- [grouping](../../framework/react/examples/grouping)
 
 ## API
 
-[Expanding API](../api/features/expanding)
+[Expanding API](../../api/features/expanding)
 
 ## Expanding Feature Guide
diff --git a/docs/guide/fuzzy-filtering.md b/docs/guide/fuzzy-filtering.md
@@ -6,11 +6,11 @@ title: Fuzzy Filtering Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [filters](../framework/react/examples/filters)
+- [filters](../../framework/react/examples/filters)
 
 ## API
 
-[Filters API](../api/features/filters)
+[Filters API](../../api/features/filters)
 
 ## Fuzzy Filtering Guide
 
diff --git a/docs/guide/global-faceting.md b/docs/guide/global-faceting.md
@@ -6,10 +6,10 @@ title: Global Faceting Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [filters](../framework/react/examples/filters) (includes faceting)
+- [filters](../../framework/react/examples/filters) (includes faceting)
 
 ## API
 
-[Global Faceting API](../api/features/global-faceting)
+[Global Faceting API](../../api/features/global-faceting)
 
 ## Global Faceting Guide
diff --git a/docs/guide/global-filtering.md b/docs/guide/global-filtering.md
@@ -6,11 +6,11 @@ title: Global Filtering Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [filters](../framework/react/examples/filters) (includes faceting)
+- [filters](../../framework/react/examples/filters) (includes faceting)
 
 ## API
 
-[Global Filtering API](../api/features/global-filtering)
+[Global Filtering API](../../api/features/global-filtering)
 
 ## Overview
 

diff --git a/docs/guide/grouping.md b/docs/guide/grouping.md
@@ -6,16 +6,16 @@ title: Grouping Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [grouping](../framework/react/examples/grouping)
+- [grouping](../../framework/react/examples/grouping)
 
 ## API
 
-[Grouping API](../api/features/grouping)
+[Grouping API](../../api/features/grouping)
 
 ## Grouping Guide
 
 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.
-2. Manual [Column Ordering](../guide/column-ordering) - A manually specified column order is applied.
+1. [Column Pinning](../column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns.
+2. Manual [Column Ordering](../column-ordering) - A manually specified column order is applied.
 3. **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.
diff --git a/docs/guide/headers.md b/docs/guide/headers.md
@@ -4,6 +4,6 @@ title: Headers Guide
 
 ## API
 
-[Header API](../api/core/header)
+[Header API](../../api/core/header)
 
 ## Headers Guide
diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md
@@ -6,17 +6,17 @@ title: Pagination Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [pagination](../framework/react/examples/pagination)
-- [pagination-controlled (React Query)](../framework/react/examples/pagination-controlled)
-- [editable-data](../framework/react/examples/editable-data)
-- [expanding](../framework/react/examples/expanding)
-- [filters](../framework/react/examples/filters)
-- [fully-controlled](../framework/react/examples/fully-controlled)
-- [row-selection](../framework/react/examples/row-selection)
+- [pagination](../../framework/react/examples/pagination)
+- [pagination-controlled (React Query)](../../framework/react/examples/pagination-controlled)
+- [editable-data](../../framework/react/examples/editable-data)
+- [expanding](../../framework/react/examples/expanding)
+- [filters](../../framework/react/examples/filters)
+- [fully-controlled](../../framework/react/examples/fully-controlled)
+- [row-selection](../../framework/react/examples/row-selection)
 
 ## API
 
-[Pagination API](../api/features/pagination)
+[Pagination API](../../api/features/pagination)
 
 ## Pagination Guide
 
@@ -30,7 +30,7 @@ Using client-side pagination means that the `data` that you fetch will contain *
 
 Client-side pagination is usually the simplest way to implement pagination when using TanStack Table, but it might not be practical for very large datasets.
 
-However, a lot of people underestimate just how much data can be handled client-side. If your table will only ever have a few thousand rows or less, client-side pagination can still be a viable option. TanStack Table is designed to scale up to 10s of thousands of rows with decent performance for pagination, filtering, sorting, and grouping. The [official pagination example](../framework/react/examples/pagination) loads 100,000 rows and still performs well, albeit with only handful of columns.
+However, a lot of people underestimate just how much data can be handled client-side. If your table will only ever have a few thousand rows or less, client-side pagination can still be a viable option. TanStack Table is designed to scale up to 10s of thousands of rows with decent performance for pagination, filtering, sorting, and grouping. The [official pagination example](../../framework/react/examples/pagination) loads 100,000 rows and still performs well, albeit with only handful of columns.
 
 Every use-case is different and will depend on the complexity of the table, how many columns you have, how large every piece of data is, etc. The main bottlenecks to pay attention to are:
 

diff --git a/docs/guide/row-pinning.md b/docs/guide/row-pinning.md
@@ -6,15 +6,15 @@ title: Row Pinning Guide
 
 Want to skip to the implementation? Check out these examples:
 
-- [row-pinning](../framework/react/examples/row-pinning)
+- [row-pinning](../../framework/react/examples/row-pinning)
 
 ## API
 
-[Row Pinning API](../api/features/row-pinning)
+[Row Pinning API](../../api/features/row-pinning)
 
 ## Row Pinning Guide
 
 There are 2 table features that can reorder rows, which happen in the following order:
 
 1. **Row Pinning** - If pinning, rows are split into top, center (unpinned), and bottom pinned rows.
-2. [Sorting](../guide/sorting)
+2. [Sorting](../sorting)