From c071d306ac9064b8a2eaff063adf7c5e622ac682 Mon Sep 17 00:00:00 2001 From: Vitaly Baev Date: Tue, 25 Feb 2025 22:57:55 +0100 Subject: [PATCH] docs: fixes in various guide links --- docs/guide/cells.md | 8 ++++---- docs/guide/column-defs.md | 8 ++++---- docs/guide/columns.md | 10 +++++----- docs/guide/data.md | 10 +++++----- docs/guide/header-groups.md | 10 +++++----- docs/guide/headers.md | 14 +++++++------- docs/guide/rows.md | 6 +++--- docs/guide/tables.md | 10 +++++----- 8 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/guide/cells.md b/docs/guide/cells.md index 489411122e..9bd8045caf 100644 --- a/docs/guide/cells.md +++ b/docs/guide/cells.md @@ -4,7 +4,7 @@ title: Cells Guide ## API -[Cell API](../../api/core/cell) +[Cell API](../api/core/cell) ## Cells Guide @@ -12,7 +12,7 @@ This quick guide will discuss the different ways you can retrieve and interact w ### 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. @@ -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 @@ -82,4 +82,4 @@ const columns = [ {row.getVisibleCells().map(cell => { return {flexRender(cell.column.columnDef.cell, cell.getContext())} })} - \ No newline at end of file + diff --git a/docs/guide/column-defs.md b/docs/guide/column-defs.md index 4b4f997dc9..03a1f366d3 100644 --- a/docs/guide/column-defs.md +++ b/docs/guide/column-defs.md @@ -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 @@ -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 diff --git a/docs/guide/columns.md b/docs/guide/columns.md index b2242d6f8b..d446c3dc27 100644 --- a/docs/guide/columns.md +++ b/docs/guide/columns.md @@ -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. @@ -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 @@ -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 @@ -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. diff --git a/docs/guide/data.md b/docs/guide/data.md index 552ddfb322..ae7640d0f0 100644 --- a/docs/guide/data.md +++ b/docs/guide/data.md @@ -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. @@ -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 @@ -239,7 +239,7 @@ 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? @@ -247,4 +247,4 @@ Believe it or not, TanStack Table was actually built to scale up to handle poten 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). diff --git a/docs/guide/header-groups.md b/docs/guide/header-groups.md index 0ea1754cf2..c1d592a9ef 100644 --- a/docs/guide/header-groups.md +++ b/docs/guide/header-groups.md @@ -4,7 +4,7 @@ title: Header Groups Guide ## API -[Header Group API](../../api/core/header-group) +[Header Group API](../api/core/header-group) ## Header Groups Guide @@ -12,7 +12,7 @@ This quick guide will discuss the different ways you can retrieve and interact w ### 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 @@ -20,13 +20,13 @@ There are multiple `table` instance APIs you can use to retrieve header groups f ### 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 @@ -46,4 +46,4 @@ To render the header cells in a header group, you just map over the `headers` ar ) })} -``` \ No newline at end of file +``` diff --git a/docs/guide/headers.md b/docs/guide/headers.md index 97623c908c..9b337aa644 100644 --- a/docs/guide/headers.md +++ b/docs/guide/headers.md @@ -4,7 +4,7 @@ title: Headers Guide ## API -[Header API](../../api/core/header) +[Header API](../api/core/header) ## Headers Guide @@ -14,7 +14,7 @@ Headers are the equivalent of cells, but meant for the `` 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 `` section of the table instead of the `` section. +Headers come from [Header Groups](./header-groups), which are the equivalent of rows, but meant for the `` section of the table instead of the `` section. #### HeaderGroup Headers @@ -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 `` section of the table instead of the `` section. Every header object can be associated with a `` 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 `` section of the table instead of the `` section. Every header object can be associated with a `` 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. @@ -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 @@ -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())} -))} \ No newline at end of file +))} diff --git a/docs/guide/rows.md b/docs/guide/rows.md index d2426453fc..edea981329 100644 --- a/docs/guide/rows.md +++ b/docs/guide/rows.md @@ -4,7 +4,7 @@ title: Rows Guide ## API -[Row API](../../api/core/row) +[Row API](../api/core/row) ## Rows Guide @@ -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 @@ -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. \ No newline at end of file +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. diff --git a/docs/guide/tables.md b/docs/guide/tables.md index 2ee721f6e9..394327540b 100644 --- a/docs/guide/tables.md +++ b/docs/guide/tables.md @@ -4,7 +4,7 @@ title: Table Instance Guide ## API -[Table API](../../api/core/table) +[Table API](../api/core/table) ## Table Instance Guide @@ -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[] = [] //Pass User type as the generic TData type @@ -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' @@ -86,7 +86,7 @@ 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 @@ -94,7 +94,7 @@ There are dozens of table APIs created by each feature to help you either read o 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