diff --git a/docs/api/core/cell.md b/docs/api/core/cell.md index e02aa1e59c..b579fd5047 100644 --- a/docs/api/core/cell.md +++ b/docs/api/core/cell.md @@ -2,7 +2,7 @@ title: Cell APIs --- -These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../../guide/features.md). +These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../guide/features.md). ## Cell API diff --git a/docs/api/core/column.md b/docs/api/core/column.md index 18a11ac9ba..10fcb8690a 100644 --- a/docs/api/core/column.md +++ b/docs/api/core/column.md @@ -2,7 +2,7 @@ title: Column APIs --- -These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../../guide/features.md). +These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../guide/features.md). ## Column API diff --git a/docs/api/core/header-group.md b/docs/api/core/header-group.md index c4881dd27c..1c506c97ed 100644 --- a/docs/api/core/header-group.md +++ b/docs/api/core/header-group.md @@ -2,7 +2,7 @@ title: HeaderGroup APIs --- -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.md). +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.md). ## Header Group API @@ -30,4 +30,4 @@ The depth of the header group, zero-indexed based. type headers = Header[] ``` -An array of [Header](../header.md) objects that belong to this header group +An array of [Header](./header.md) objects that belong to this header group diff --git a/docs/api/core/header.md b/docs/api/core/header.md index cc6db9f687..542eed6ead 100644 --- a/docs/api/core/header.md +++ b/docs/api/core/header.md @@ -2,7 +2,7 @@ title: Header APIs --- -These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../../guide/features.md). +These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../guide/features.md). ## Header API @@ -38,7 +38,7 @@ The depth of the header, zero-indexed based. column: Column ``` -The header's associated [Column](../column.md) object +The header's associated [Column](./column.md) object ### `headerGroup` @@ -46,7 +46,7 @@ The header's associated [Column](../column.md) object headerGroup: HeaderGroup ``` -The header's associated [HeaderGroup](../header-group.md) object +The header's associated [HeaderGroup](./header-group.md) object ### `subHeaders` diff --git a/docs/api/core/row.md b/docs/api/core/row.md index c478062f56..2e8cf7d09f 100644 --- a/docs/api/core/row.md +++ b/docs/api/core/row.md @@ -2,7 +2,7 @@ title: Row APIs --- -These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../../guide/features.md). +These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../guide/features.md). ## Row API @@ -120,4 +120,4 @@ An array of the original subRows as returned by the `options.getSubRows` option. type getAllCells = () => Cell[] ``` -Returns all of the [Cells](../cell.md) for the row. +Returns all of the [Cells](./cell.md) for the row. diff --git a/docs/api/core/table.md b/docs/api/core/table.md index fbd1e06cf8..ebac5a5c6b 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -14,7 +14,7 @@ These functions are used to create a table. Which one you use depends on which f ## Options -These are **core** options and API properties for the table. More options and API properties are available for other [table features](../../../guide/features.md). +These are **core** options and API properties for the table. More options and API properties are available for other [table features](../../guide/features.md). ### `data` @@ -34,7 +34,7 @@ When the `data` option changes reference (compared via `Object.is`), the table w type columns = ColumnDef[] ``` -The array of column defs to use for the table. See the [Column Def Guide](../../../guide/column-defs.md) for more information on creating column definitions. +The array of column defs to use for the table. See the [Column Def Guide](../../guide/column-defs.md) for more information on creating column definitions. ### `defaultColumn` diff --git a/docs/api/features/filters.md b/docs/api/features/filters.md index 167fec059f..7df657c606 100644 --- a/docs/api/features/filters.md +++ b/docs/api/features/filters.md @@ -7,7 +7,7 @@ id: filters The Filtering API docs are now split into multiple API doc pages: -- [Column Faceting](../../../guide/column-faceting.md) -- [Global Faceting](../../../guide/global-faceting.md) -- [Column Filtering](../../../guide/column-filtering.md) -- [Global Filtering](../../../guide/global-filtering.md) \ No newline at end of file +- [Column Faceting](../../guide/column-faceting.md) +- [Global Faceting](../../guide/global-faceting.md) +- [Column Filtering](../../guide/column-filtering.md) +- [Global Filtering](../../guide/global-filtering.md) \ No newline at end of file diff --git a/docs/api/features/global-filtering.md b/docs/api/features/global-filtering.md index 47b79d15bc..75271f731f 100644 --- a/docs/api/features/global-filtering.md +++ b/docs/api/features/global-filtering.md @@ -25,7 +25,7 @@ export interface GlobalFilterTableState { ## Filter Functions -You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering](../../../guide/column-filtering.md) to learn more about filter functions. +You can use the same filter functions that are available for column filtering for global filtering. See the [Column Filtering](../../guide/column-filtering.md) to learn more about filter functions. #### Using Filter Functions diff --git a/docs/api/features/pinning.md b/docs/api/features/pinning.md index 15f18316df..a592a03a99 100644 --- a/docs/api/features/pinning.md +++ b/docs/api/features/pinning.md @@ -7,5 +7,5 @@ id: pinning The pinning apis are now split into multiple api pages: -- [Column Pinning](../../../guide/column-pinning.md) -- [Row Pinning](../../../guide/row-pinning.md) \ No newline at end of file +- [Column Pinning](../../guide/column-pinning.md) +- [Row Pinning](../../guide/row-pinning.md) \ No newline at end of file diff --git a/docs/api/features/row-selection.md b/docs/api/features/row-selection.md index e21cb6e5bc..877e3775d1 100644 --- a/docs/api/features/row-selection.md +++ b/docs/api/features/row-selection.md @@ -15,7 +15,7 @@ export type RowSelectionTableState = { } ``` -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. +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. ## Table Options diff --git a/docs/framework/react/guide/table-state.md b/docs/framework/react/guide/table-state.md index fb5ac16321..09d57566a0 100644 --- 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](../../examples/kitchen-sink) -- [fully controlled](../../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 index e6e5023923..56ef95246f 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](../../guide/rows). Enough said, right? +Cells come from [Rows](../guide/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](../../guide/rows) and [column](../../guide/columns) objects. +Every cell stores a reference to its parent [row](../guide/rows) and [column](../guide/columns) objects. #### Access Cell Values diff --git a/docs/guide/column-defs.md b/docs/guide/column-defs.md index 0eba8225f3..07daad7c05 100644 --- 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.md) +[Table API](../api/core/table.md) ## Column Definitions Guide @@ -12,7 +12,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 [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. ## Column Def Types @@ -242,7 +242,7 @@ columnHelper.accessor('firstName', { ## Aggregated Cell Formatting -For more info on aggregated cells, see [grouping](../grouping.md). +For more info on aggregated cells, see [grouping](./grouping.md). ## Header & Footer Formatting diff --git a/docs/guide/column-faceting.md b/docs/guide/column-faceting.md index ba4ccb9b32..1cbc68f37d 100644 --- a/docs/guide/column-faceting.md +++ b/docs/guide/column-faceting.md @@ -6,11 +6,11 @@ title: Column Faceting Guide Want to skip to the implementation? Check out these examples: -- [filters-faceted](../../framework/react/examples/filters-faceted) +- [filters-faceted](../framework/react/examples/filters-faceted) ## 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 index bca981e6db..0d9d7e2087 100644 --- a/docs/guide/column-filtering.md +++ b/docs/guide/column-filtering.md @@ -15,7 +15,7 @@ Want to skip to the implementation? Check out these examples: ## API -[Column Filtering API](../../api/features/column-filtering.md) +[Column Filtering API](../api/features/column-filtering.md) ## Column Filtering Guide @@ -29,7 +29,7 @@ TanStack table supports both both client-side and manual server-side filtering. 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. -However, as also discussed in the [Pagination Guide](../pagination.md#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 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. +However, as also discussed in the [Pagination Guide](./pagination.md#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 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. > 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. diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index a721a35b7a..1e511841d5 100644 --- 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](../guide/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](../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. > **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 `` 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 `
` 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 `
` markup. diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md index 3970a42a16..9a2f5a4a95 100644 --- 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](../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. 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 index a4212559da..4c35ffbab8 100644 --- 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 index ba7e7e744f..d65d42fff3 100644 --- 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/columns.md b/docs/guide/columns.md index 9abfae87be..a40d2edb2a 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](../../guide/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](../guide/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](../../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 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](../../guide/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](../guide/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`](../../guide/headers) and [`cell`](../../guide/cells) objects, as discussed above. +Don't necessarily use `column` objects to render `headers` or `cells` directly. Instead, use the [`header`](../guide/headers) and [`cell`](../guide/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/custom-features.md b/docs/guide/custom-features.md index 9242209fdd..5eaa8bdf78 100644 --- 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/data.md b/docs/guide/data.md index 76325e9042..f6a969a972 100644 --- a/docs/guide/data.md +++ b/docs/guide/data.md @@ -133,7 +133,7 @@ const columns = [ ] ``` -This is discussed in more detail in the [Column Def Guide](../../guide/column-defs). +This is discussed in more detail in the [Column Def Guide](../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](../../guide/expanding). +Where `subRows` is an optional array of `User` objects. This is discussed in more detail in the [Expanding Guide](../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](../../guide/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](../guide/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](../../guide/pagination#should-you-use-client-side-pagination). +This is discussed in more detail in the [Pagination Guide](../guide/pagination#should-you-use-client-side-pagination). diff --git a/docs/guide/expanding.md b/docs/guide/expanding.md index 600a0dee0c..6088251ec9 100644 --- a/docs/guide/expanding.md +++ b/docs/guide/expanding.md @@ -6,13 +6,13 @@ title: Expanding Guide Want to skip to the implementation? Check out these examples: -- [expanding](../../framework/react/examples/expanding) -- [grouping](../../framework/react/examples/grouping) -- [sub-components](../../framework/react/examples/sub-components) +- [expanding](../framework/react/examples/expanding) +- [grouping](../framework/react/examples/grouping) +- [sub-components](../framework/react/examples/sub-components) ## API -[Expanding API](../../api/features/expanding) +[Expanding API](../api/features/expanding) ## Expanding Feature Guide @@ -211,7 +211,7 @@ const table = useReactTable({ ### Pinning Expanded Rows -Pinning expanded rows works the same way as pinning regular rows. You can pin expanded rows to the top or bottom of the table. Please refer to the [Pinning Guide](../pinning.md) for more information on row pinning. +Pinning expanded rows works the same way as pinning regular rows. You can pin expanded rows to the top or bottom of the table. Please refer to the [Pinning Guide](./pinning.md) for more information on row pinning. ### Sorting Expanded Rows diff --git a/docs/guide/features.md b/docs/guide/features.md index 956f6fc4bd..fad7441652 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -4,18 +4,18 @@ title: Features Guide TanStack Table comes with many features, each with their own associated options and API: -- [Column Ordering](../column-ordering.md) -- [Column Pinning](../column-pinning.md) -- [Column Sizing](../column-sizing.md) -- [Column Visibility](../column-visibility.md) -- [Expanding](../expanding.md) -- [Column Faceting](../column-faceting.md) -- [Column Filtering](../column-filtering.md) -- [Global Faceting](../global-faceting.md) -- [Global Filtering](../global-filtering.md) -- [Grouping](../grouping.md) -- [Pagination](../pagination.md) -- [Row Pinning](../row-pinning.md) -- [Row Selection](../row-selection.md) -- [Sorting](../sorting.md) -- [Virtualization](../virtualization.md) \ No newline at end of file +- [Column Ordering](./column-ordering.md) +- [Column Pinning](./column-pinning.md) +- [Column Sizing](./column-sizing.md) +- [Column Visibility](./column-visibility.md) +- [Expanding](./expanding.md) +- [Column Faceting](./column-faceting.md) +- [Column Filtering](./column-filtering.md) +- [Global Faceting](./global-faceting.md) +- [Global Filtering](./global-filtering.md) +- [Grouping](./grouping.md) +- [Pagination](./pagination.md) +- [Row Pinning](./row-pinning.md) +- [Row Selection](./row-selection.md) +- [Sorting](./sorting.md) +- [Virtualization](./virtualization.md) \ No newline at end of file diff --git a/docs/guide/filters.md b/docs/guide/filters.md index f17249e36d..478915025e 100644 --- a/docs/guide/filters.md +++ b/docs/guide/filters.md @@ -6,7 +6,7 @@ title: Filters Guide The filter guides are now split into multiple guides: -- [Column Filtering](../column-filtering.md) -- [Global Filtering](../global-filtering.md) -- [Fuzzy Filtering](../fuzzy-filtering.md) - \ No newline at end of file +- [Column Filtering](./column-filtering.md) +- [Global Filtering](./global-filtering.md) +- [Fuzzy Filtering](./fuzzy-filtering.md) + \ No newline at end of file diff --git a/docs/guide/fuzzy-filtering.md b/docs/guide/fuzzy-filtering.md index 6a42b8a839..4dbfefd75f 100644 --- 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-fuzzy](../../framework/react/examples/filters-fuzzy) +- [filters-fuzzy](../framework/react/examples/filters-fuzzy) ## 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 index 708d2d53f4..76a531a98d 100644 --- a/docs/guide/global-faceting.md +++ b/docs/guide/global-faceting.md @@ -6,11 +6,11 @@ title: Global Faceting Guide Want to skip to the implementation? Check out these examples: -- [filters-faceted](../../framework/react/examples/filters) +- [filters-faceted](../framework/react/examples/filters) ## 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 index a6cd743bea..c4e7fb437b 100644 --- a/docs/guide/global-filtering.md +++ b/docs/guide/global-filtering.md @@ -10,7 +10,7 @@ Want to skip to the implementation? Check out these examples: ## API -[Global Filtering API](../../api/features/global-filtering) +[Global Filtering API](../api/features/global-filtering) ## Global Filtering Guide @@ -22,7 +22,7 @@ This guide will focus on global filtering, which is a filter that is applied acr 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. -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. +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. > 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. @@ -138,7 +138,7 @@ return ( If you want to use a custom global filter function, you can define the function and pass it to the globalFilterFn option. -> **Note:** It is often a popular idea to use fuzzy filtering functions for global filtering. This is discussed in the [Fuzzy Filtering Guide](../fuzzy-filtering.md). +> **Note:** It is often a popular idea to use fuzzy filtering functions for global filtering. This is discussed in the [Fuzzy Filtering Guide](./fuzzy-filtering.md). ```jsx const customFilterFn = (rows, columnId, filterValue) => { diff --git a/docs/guide/grouping.md b/docs/guide/grouping.md index 20d7bee292..9c8ee4b278 100644 --- a/docs/guide/grouping.md +++ b/docs/guide/grouping.md @@ -10,14 +10,14 @@ Want to skip to the implementation? Check out these examples: ## API -[Grouping API](../../api/features/grouping.md) +[Grouping API](../api/features/grouping.md) ## Grouping Guide There are 3 table features that can reorder columns, which happen in the following order: -1. [Column Pinning](../column-pinning.md) - If pinning, columns are split into left, center (unpinned), and right pinned columns. -2. Manual [Column Ordering](../column-ordering.md) - A manually specified column order is applied. +1. [Column Pinning](./column-pinning.md) - If pinning, columns are split into left, center (unpinned), and right pinned columns. +2. Manual [Column Ordering](./column-ordering.md) - 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. Grouping in TanStack table is a feature that applies to columns and allows you to categorize and organize the table rows based on specific columns. This can be useful in cases where you have a large amount of data and you want to group them together based on certain criteria. diff --git a/docs/guide/header-groups.md b/docs/guide/header-groups.md index fad2176464..9a5762130e 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](../../guide/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](../guide/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](../../guide/headers) cell objects that belong to this header group (row). +- `headers`: An array of [Header](../guide/headers) cell objects that belong to this header group (row). ### Access Header Cells diff --git a/docs/guide/headers.md b/docs/guide/headers.md index 98d887e242..e0414c8678 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](../../guide/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](../guide/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](../../guide/cells) objects, but meant for the `` section of the table instead of the `` section. Every header object can be associated with a `` 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](../guide/cells) objects, but meant for the `
` 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](../../guide/columns) object and its parent [header group](../../guide/header-groups) object. +Every header stores a reference to its parent [column](../guide/columns) object and its parent [header group](../guide/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 Sizing Guide](../../guide/column-sizing) 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 Sizing Guide](../guide/column-sizing) for more information. ### Header Rendering diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md index 8ff1aec367..6cc2b73f01 100644 --- 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/pinning.md b/docs/guide/pinning.md index 7796ee22df..3d33e44ebb 100644 --- a/docs/guide/pinning.md +++ b/docs/guide/pinning.md @@ -6,5 +6,5 @@ title: Pinning Guide Pinning is split into 2 different feature guides: -- [Column Pinning](../column-pinning.md) -- [Row Pinning](../row-pinning.md) \ No newline at end of file +- [Column Pinning](./column-pinning.md) +- [Row Pinning](./row-pinning.md) \ No newline at end of file diff --git a/docs/guide/row-pinning.md b/docs/guide/row-pinning.md index bfe5383856..8554253c9a 100644 --- 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](../guide/sorting) diff --git a/docs/guide/row-selection.md b/docs/guide/row-selection.md index 1d47aceb49..a5a868833b 100644 --- a/docs/guide/row-selection.md +++ b/docs/guide/row-selection.md @@ -12,7 +12,7 @@ Want to skip to the implementation? Check out these examples: ## API -[Row Selection API](../../api/features/row-selection.md) +[Row Selection API](../api/features/row-selection.md) ## Row Selection Guide diff --git a/docs/guide/rows.md b/docs/guide/rows.md index 9eefb0dc23..a54fd50fd5 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"](../../guide/row-models). This is discussed in much more detail in the [Row Models Guide](../../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"](../guide/row-models). This is discussed in much more detail in the [Row Models Guide](../guide/row-models), but here are the most common ways you may access the row models. ##### Render Rows @@ -85,7 +85,7 @@ const firstName = row.original.firstName // { firstName: 'John', lastName: 'Doe' ### Sub Rows -If you are using either grouping or expanding features, your rows may contain sub-rows or parent row references. This is discussed in much more detail in the [Expanding Guide](../../guide/expanding), but here is a quick overview of useful properties and methods for working with sub-rows. +If you are using either grouping or expanding features, your rows may contain sub-rows or parent row references. This is discussed in much more detail in the [Expanding Guide](../guide/expanding), but here is a quick overview of useful properties and methods for working with sub-rows. - `row.subRows`: An array of sub-rows for the row. - `row.depth`: The depth of the row (if nested or grouped) relative to the root row array. 0 for root level rows, 1 for child rows, 2 for grandchild rows, etc. diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md index ec58b7fed4..13e756dfb8 100644 --- a/docs/guide/sorting.md +++ b/docs/guide/sorting.md @@ -6,12 +6,12 @@ title: Sorting Guide Want to skip to the implementation? Check out these examples: -- [sorting](../../framework/react/examples/sorting) -- [filters](../../framework/react/examples/filters) +- [sorting](../framework/react/examples/sorting) +- [filters](../framework/react/examples/filters) ## API -[Sorting API](../../api/features/sorting) +[Sorting API](../api/features/sorting) ## Sorting Guide diff --git a/docs/guide/tables.md b/docs/guide/tables.md index b0153464b7..781ae37c6c 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.md) +[Table API](../api/core/table.md) ## Table Instance Guide @@ -71,7 +71,7 @@ const data = ref([]) #### 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 you data. ```ts const columns: ColumnDef[] = [] //Pass User type as the generic TData type @@ -79,7 +79,7 @@ const columns: ColumnDef[] = [] //Pass User type as the generic TData type const columnHelper = createColumnHelper() //Pass User type as the generic TData type ``` -The column definitions are where we will tell TanStack Table how each column should access and/or transform row data with either an `accessorKey` or `accessorFn`. See the [Column Def Guide](../column-defs.md) for more info. +The column definitions are where we will tell TanStack Table how each column should access and/or transform row data with either an `accessorKey` or `accessorFn`. See the [Column Def Guide](./column-defs.md) for more info. #### Creating the Table Instance @@ -122,8 +122,8 @@ 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 -There is a special set of table instance APIs for reading rows out of the table instance called row models. TanStack Table has advanced features where the rows that are generated may be very different than the array of `data` that you originally passed in. To learn more about the different row models that you can pass in as a table option, see the [Row Models Guide](../row-models.md). +There is a special set of table instance APIs for reading rows out of the table instance called row models. TanStack Table has advanced features where the rows that are generated may be very different than the array of `data` that you originally passed in. To learn more about the different row models that you can pass in as a table option, see the [Row Models Guide](./row-models.md). diff --git a/docs/overview.md b/docs/overview.md index c6a4cd9444..7d20598014 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -10,7 +10,7 @@ While TanStack Table is written in [TypeScript](https://www.typescriptlang.org/) ## Headless -As it was mentioned extensively in the [Intro](../introduction.md) section, TanStack Table is **headless**. This means that it doesn't render any DOM elements, and instead relies on you, the UI/UX developer to provide the table's markup and styles. This is a great way to build a table that can be used in any UI framework, including React, Vue, Solid, Svelte, Qwik, and even JS-to-native platforms like React Native! +As it was mentioned extensively in the [Intro](./introduction.md) section, TanStack Table is **headless**. This means that it doesn't render any DOM elements, and instead relies on you, the UI/UX developer to provide the table's markup and styles. This is a great way to build a table that can be used in any UI framework, including React, Vue, Solid, Svelte, Qwik, and even JS-to-native platforms like React Native! ## Core Objects and Types @@ -33,4 +33,4 @@ The table core uses the following abstractions, commonly exposed by adapters: - Cells - Each cell mirrors its respective row-column intersection and provides cell-specific APIs -There are even more structures that pertain to specific features like filtering, sorting, grouping, etc, which you can find in the [features](../guide/features.md) section. +There are even more structures that pertain to specific features like filtering, sorting, grouping, etc, which you can find in the [features](./guide/features.md) section. diff --git a/scripts/verify-links.ts b/scripts/verify-links.ts index 3b42b54403..4e03d84295 100644 --- a/scripts/verify-links.ts +++ b/scripts/verify-links.ts @@ -1,12 +1,19 @@ import { existsSync, readFileSync, statSync } from 'node:fs' -import path, { resolve } from 'node:path' +import { extname, resolve } from 'node:path' import { glob } from 'tinyglobby' // @ts-ignore Could not find a declaration file for module 'markdown-link-extractor'. import markdownLinkExtractor from 'markdown-link-extractor' +const errors: Array<{ + file: string + link: string + resolvedPath: string + reason: string +}> = [] + function isRelativeLink(link: string) { return ( - link && + !link.startsWith('/') && !link.startsWith('http://') && !link.startsWith('https://') && !link.startsWith('//') && @@ -15,39 +22,33 @@ function isRelativeLink(link: string) { ) } -function normalizePath(p: string): string { - // Remove any trailing .md - p = p.replace(`${path.extname(p)}`, '') - return p +/** Remove any trailing .md */ +function stripExtension(p: string): string { + return p.replace(`${extname(p)}`, '') } -function fileExistsForLink( - link: string, - markdownFile: string, - errors: Array -): boolean { +function relativeLinkExists(link: string, file: string): boolean { // Remove hash if present - const filePart = link.split('#')[0] + const linkWithoutHash = link.split('#')[0] // If the link is empty after removing hash, it's not a file - if (!filePart) return false - - // Normalize the markdown file path - markdownFile = normalizePath(markdownFile) + if (!linkWithoutHash) return false - // Normalize the path - const normalizedPath = normalizePath(filePart) + // Strip the file/link extensions + const filePath = stripExtension(file) + const linkPath = stripExtension(linkWithoutHash) // Resolve the path relative to the markdown file's directory - let absPath = resolve(markdownFile, normalizedPath) + // Nav up a level to simulate how links are resolved on the web + let absPath = resolve(filePath, '..', linkPath) // Ensure the resolved path is within /docs const docsRoot = resolve('docs') if (!absPath.startsWith(docsRoot)) { errors.push({ link, - markdownFile, + file, resolvedPath: absPath, - reason: 'navigates above /docs, invalid', + reason: 'Path outside /docs', }) return false } @@ -76,15 +77,15 @@ function fileExistsForLink( if (!exists) { errors.push({ link, - markdownFile, + file, resolvedPath: absPath, - reason: 'not found', + reason: 'Not found', }) } return exists } -async function findMarkdownLinks() { +async function verifyMarkdownLinks() { // Find all markdown files in docs directory const markdownFiles = await glob('docs/**/*.md', { ignore: ['**/node_modules/**'], @@ -92,26 +93,18 @@ async function findMarkdownLinks() { console.log(`Found ${markdownFiles.length} markdown files\n`) - const errors: Array = [] - // Process each file for (const file of markdownFiles) { const content = readFileSync(file, 'utf-8') - const links: Array = markdownLinkExtractor(content) - - const filteredLinks = links.filter((link: any) => { - if (typeof link === 'string') { - return isRelativeLink(link) - } else if (link && typeof link.href === 'string') { - return isRelativeLink(link.href) - } - return false + const links: Array = markdownLinkExtractor(content) + + const relativeLinks = links.filter((link: string) => { + return isRelativeLink(link) }) - if (filteredLinks.length > 0) { - filteredLinks.forEach(link => { - const href = typeof link === 'string' ? link : link.href - fileExistsForLink(href, file, errors) + if (relativeLinks.length > 0) { + relativeLinks.forEach(link => { + relativeLinkExists(link, file) }) } } @@ -120,7 +113,7 @@ async function findMarkdownLinks() { console.log(`\nāŒ Found ${errors.length} broken links:`) errors.forEach(err => { console.log( - `${err.link}\n in: ${err.markdownFile}\n path: ${err.resolvedPath}\n why: ${err.reason}\n` + `${err.file}\n link: ${err.link}\n resolved: ${err.resolvedPath}\n why: ${err.reason}\n` ) }) process.exit(1) @@ -129,4 +122,4 @@ async function findMarkdownLinks() { } } -findMarkdownLinks().catch(console.error) +verifyMarkdownLinks().catch(console.error)