diff --git a/docs/framework/alpine/guide/cell-selection.md b/docs/framework/alpine/guide/cell-selection.md index 4b4e3d66ac..05f0657e93 100644 --- a/docs/framework/alpine/guide/cell-selection.md +++ b/docs/framework/alpine/guide/cell-selection.md @@ -140,7 +140,8 @@ const table = createTable( ) ``` -> Note: a drag emits one change per cell boundary the pointer crosses, so `onCellSelectionChange` fires repeatedly during a drag. If you are syncing selection to a server or a URL, debounce it or commit on `mouseup`. +> [!NOTE] +> a drag emits one change per cell boundary the pointer crosses, so `onCellSelectionChange` fires repeatedly during a drag. If you are syncing selection to a server or a URL, debounce it or commit on `mouseup`. ### Useful Row Ids @@ -257,7 +258,8 @@ function getCellClassName(cell) { } ``` -> Tip: draw the outline with `box-shadow: inset ...` rather than `border`. On a `border-collapse` table a thicker border widens the shared grid line, which makes rows change height as cells become selected. A box-shadow never affects layout. +> [!TIP] +> draw the outline with `box-shadow: inset ...` rather than `border`. On a `border-collapse` table a thicker border widens the shared grid line, which makes rows change height as cells become selected. A box-shadow never affects layout. ### Keyboard Navigation diff --git a/docs/framework/alpine/guide/column-filtering.md b/docs/framework/alpine/guide/column-filtering.md index 576108bc6a..7d5a9f416c 100644 --- a/docs/framework/alpine/guide/column-filtering.md +++ b/docs/framework/alpine/guide/column-filtering.md @@ -45,7 +45,8 @@ const table = createTable({ }) ``` -> **Note:** The `filterFns` registry above lists only the built-in filter functions this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `filterFn` column option with no registration at all. +> [!NOTE] +> The `filterFns` registry above lists only the built-in filter functions this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `filterFn` column option with no registration at all. ## Column Filtering (Alpine) Guide @@ -82,7 +83,8 @@ const table = createTable({ }) ``` -> **Note:** When using manual filtering, many of the options that are discussed in the rest of this guide will have no effect. When `manualFiltering` is set to `true`, the table instance will not apply any filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the `data` that you pass to it as-is. +> [!NOTE] +> When using manual filtering, many of the options that are discussed in the rest of this guide will have no effect. When `manualFiltering` is set to `true`, the table instance will not apply any filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the `data` that you pass to it as-is. ### Client-Side Filtering @@ -225,7 +227,8 @@ const table = createTable({ }) ``` -> **NOTE**: Do not use both `initialState.columnFilters` and `state.columnFilters` at the same time, as the controlled `state.columnFilters` value will override the `initialState.columnFilters`. +> [!NOTE] +> Do not use both `initialState.columnFilters` and `state.columnFilters` at the same time, as the controlled `state.columnFilters` value will override the `initialState.columnFilters`. ### FilterFns @@ -256,7 +259,8 @@ You can also define your own custom filter functions, either inline as the `filt #### Custom Filter Functions -> **Note:** These filter functions only run during client-side filtering. +> [!NOTE] +> These filter functions only run during client-side filtering. Whether you register a custom filter function in the `filterFns` slot on `tableFeatures` or pass it directly as a `filterFn` column option, it should have the following signature: @@ -372,7 +376,8 @@ const includesStringIgnoreDiacritics = constructFilterFn({ Register the variant by name in the `filterFns` registry or pass it directly to the `filterFn` column option, just like any other custom filter function. -> **Note:** The table applies `resolveFilterValue` once per filter before any rows are tested. If you ever call a filter function directly (outside of a table), resolve the filter value yourself: `myFilterFn(row, columnId, myFilterFn.resolveFilterValue?.(rawValue) ?? rawValue)`. +> [!NOTE] +> The table applies `resolveFilterValue` once per filter before any rows are tested. If you ever call a filter function directly (outside of a table), resolve the filter value yourself: `myFilterFn(row, columnId, myFilterFn.resolveFilterValue?.(rawValue) ?? rawValue)`. ### Wiring up the filter UI diff --git a/docs/framework/alpine/guide/column-ordering.md b/docs/framework/alpine/guide/column-ordering.md index adf0d934cb..85f0501ab1 100644 --- a/docs/framework/alpine/guide/column-ordering.md +++ b/docs/framework/alpine/guide/column-ordering.md @@ -44,7 +44,8 @@ There are 3 table features that can reorder columns, which happen in the followi 2. Manual **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. -> **Note:** `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning. +> [!NOTE] +> `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning. ### Column Order State @@ -67,7 +68,8 @@ const table = createTable({ }) ``` -> **Note:** If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both. +> [!NOTE] +> If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both. #### Managing Column Order State diff --git a/docs/framework/alpine/guide/column-pinning.md b/docs/framework/alpine/guide/column-pinning.md index 59d805e8dc..e82ae63317 100644 --- a/docs/framework/alpine/guide/column-pinning.md +++ b/docs/framework/alpine/guide/column-pinning.md @@ -132,7 +132,8 @@ const table = createTable({ ### Useful Column Pinning APIs -> Note: These APIs are available when using `columnPinningFeature`. +> [!NOTE] +> These APIs are available when using `columnPinningFeature`. There are a handful of useful Column API methods to help you implement column pinning features: diff --git a/docs/framework/alpine/guide/column-resizing.md b/docs/framework/alpine/guide/column-resizing.md index a380a29f6a..3e5d02a603 100644 --- a/docs/framework/alpine/guide/column-resizing.md +++ b/docs/framework/alpine/guide/column-resizing.md @@ -402,6 +402,7 @@ Alpine.data('table', () => { ``` -> Note: with the `() => ({})` selector, the `:class` binding on the resizer above will not update during a drag (the table is opted out of state-driven re-evaluation). The example instead toggles the `isResizing` class imperatively from a `table.atoms.columnResizing` subscription. Keeping the `:class` binding is fine if you accept the highlight only reflecting resize state on the next data-driven re-render. +> [!NOTE] +> with the `() => ({})` selector, the `:class` binding on the resizer above will not update during a drag (the table is opted out of state-driven re-evaluation). The example instead toggles the `isResizing` class imperatively from a `table.atoms.columnResizing` subscription. Keeping the `:class` binding is fine if you accept the highlight only reflecting resize state on the next data-driven re-render. If you follow these steps, you should see significant performance improvements while resizing columns. diff --git a/docs/framework/alpine/guide/column-visibility.md b/docs/framework/alpine/guide/column-visibility.md index 3244c1a7e3..0d3b2d1bae 100644 --- a/docs/framework/alpine/guide/column-visibility.md +++ b/docs/framework/alpine/guide/column-visibility.md @@ -102,7 +102,8 @@ const table = createTable({ Alternatively, if you don't need to manage the column visibility state outside of the table, you can still set the initial default column visibility state using the `initialState` option. -> **Note**: If `columnVisibility` is provided to both `initialState` and a controlled option (`atoms` or `state`), the controlled value will take precedence and `initialState` will be ignored. Only provide `columnVisibility` in one place. +> [!NOTE] +> If `columnVisibility` is provided to both `initialState` and a controlled option (`atoms` or `state`), the controlled value will take precedence and `initialState` will be ignored. Only provide `columnVisibility` in one place. ```ts const features = tableFeatures({ columnVisibilityFeature }) diff --git a/docs/framework/alpine/guide/expanding.md b/docs/framework/alpine/guide/expanding.md index 9531bbbffc..17e05674cb 100644 --- a/docs/framework/alpine/guide/expanding.md +++ b/docs/framework/alpine/guide/expanding.md @@ -117,7 +117,8 @@ const table = createTable({ }) ``` -> **Note:** You can have a complicated `getSubRows` function, but keep in mind that it will run for every row and every sub-row. This can be expensive if the function is not optimized. Async functions are not supported. +> [!NOTE] +> You can have a complicated `getSubRows` function, but keep in mind that it will run for every row and every sub-row. This can be expensive if the function is not optimized. Async functions are not supported. ### Custom Expanding UI diff --git a/docs/framework/alpine/guide/fuzzy-filtering.md b/docs/framework/alpine/guide/fuzzy-filtering.md index a7bd0b6ca3..5b4069d389 100644 --- a/docs/framework/alpine/guide/fuzzy-filtering.md +++ b/docs/framework/alpine/guide/fuzzy-filtering.md @@ -46,7 +46,8 @@ const table = createTable({ }) ``` -> **Note:** The `filterFns` and `sortFns` registries above list only the custom `fuzzy` functions this guide uses. Spreading the entire built-in registries (`filterFns: { ...filterFns, fuzzy: fuzzyFilter }`) still works, but it puts every built-in function in your bundle. Register just the functions you use, or pass functions directly to the `filterFn` and `sortFn` column options with no registration. +> [!NOTE] +> The `filterFns` and `sortFns` registries above list only the custom `fuzzy` functions this guide uses. Spreading the entire built-in registries (`filterFns: { ...filterFns, fuzzy: fuzzyFilter }`) still works, but it puts every built-in function in your bundle. Register just the functions you use, or pass functions directly to the `filterFn` and `sortFn` column options with no registration. ## Fuzzy Filtering (Alpine) Guide @@ -56,7 +57,8 @@ You can implement client-side fuzzy filtering by defining a custom filter functi Fuzzy filtering is mostly used with global filtering, but you can also apply it to individual columns. We will discuss how to implement fuzzy filtering for both cases. -> **Note:** You will need to install the `@tanstack/match-sorter-utils` library to use fuzzy filtering. +> [!NOTE] +> You will need to install the `@tanstack/match-sorter-utils` library to use fuzzy filtering. > TanStack Match Sorter Utils is a fork of [match-sorter](https://github.com/kentcdodds/match-sorter) by Kent C. Dodds. It was forked in order to work better with TanStack Table's row by row filtering approach. ```bash @@ -228,4 +230,5 @@ You can then pass this sorting function directly to the `sortFn` option of the c } ``` -> **Note:** Unlike `filterFn: 'fuzzy'` above, `fuzzySort` is passed as a function rather than a string. A string reference like `sortFn: 'fuzzySort'` would only work if you also registered the function in the `sortFns` slot on `tableFeatures` (e.g. `sortFns: { fuzzySort }`). Passing the function directly skips that step. +> [!NOTE] +> Unlike `filterFn: 'fuzzy'` above, `fuzzySort` is passed as a function rather than a string. A string reference like `sortFn: 'fuzzySort'` would only work if you also registered the function in the `sortFns` slot on `tableFeatures` (e.g. `sortFns: { fuzzySort }`). Passing the function directly skips that step. diff --git a/docs/framework/alpine/guide/global-filtering.md b/docs/framework/alpine/guide/global-filtering.md index 54bfd32673..3d031337a8 100644 --- a/docs/framework/alpine/guide/global-filtering.md +++ b/docs/framework/alpine/guide/global-filtering.md @@ -42,7 +42,8 @@ const table = createTable({ }) ``` -> **Note:** The `filterFns` registry above lists only the built-in filter function this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `globalFilterFn` option with no registration at all. +> [!NOTE] +> The `filterFns` registry above lists only the built-in filter function this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `globalFilterFn` option with no registration at all. ## Global Filtering (Alpine) Guide @@ -210,7 +211,8 @@ TanStack table will not add a global filter input UI to your table. You should m 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). +> [!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). ```ts const customFilterFn = (row, columnId, filterValue) => { @@ -238,7 +240,8 @@ const table = createTable({ }) ``` -> NOTE: Do not use both `initialState.globalFilter` and a controlled `globalFilter` (via `atoms` or `state`) at the same time, as the controlled value will override `initialState.globalFilter`. +> [!NOTE] +> Do not use both `initialState.globalFilter` and a controlled `globalFilter` (via `atoms` or `state`) at the same time, as the controlled value will override `initialState.globalFilter`. ### Disable Global Filtering diff --git a/docs/framework/alpine/guide/grouping.md b/docs/framework/alpine/guide/grouping.md index 3bbd58cccd..cfa62a07f5 100644 --- a/docs/framework/alpine/guide/grouping.md +++ b/docs/framework/alpine/guide/grouping.md @@ -8,7 +8,8 @@ Want to skip to the implementation? Check out these Alpine examples: - [Grouping](../examples/grouping) -> **Note:** `columnGroupingFeature` and `rowAggregationFeature` are now separate features. Register either one independently, or register both when grouped rows should also calculate aggregate values. See the [Aggregation Guide](./aggregation) for aggregation setup. +> [!NOTE] +> `columnGroupingFeature` and `rowAggregationFeature` are now separate features. Register either one independently, or register both when grouped rows should also calculate aggregate values. See the [Aggregation Guide](./aggregation) for aggregation setup. Read your reactive inputs such as `data` through a getter (for example backing them with `Alpine.reactive`) when creating the table, so the table sees updates. @@ -135,7 +136,8 @@ const table = createTable({ }) ``` -> **Note:** There are not currently many known easy ways to do server-side grouping with TanStack Table. You will need to do lots of custom cell rendering to make this work. +> [!NOTE] +> There are not currently many known easy ways to do server-side grouping with TanStack Table. You will need to do lots of custom cell rendering to make this work. ### Controlled Grouping State diff --git a/docs/framework/alpine/guide/pagination.md b/docs/framework/alpine/guide/pagination.md index 408dcfc585..2bcfac3797 100644 --- a/docs/framework/alpine/guide/pagination.md +++ b/docs/framework/alpine/guide/pagination.md @@ -108,7 +108,8 @@ const table = createTable({ }) ``` -> **Note**: Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated. +> [!NOTE] +> Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated. ### Pagination State @@ -202,7 +203,8 @@ const table = createTable({ }) ``` -> **Note**: Do NOT provide the `pagination` slice in more than one of the `atoms`, `state`, and `initialState` options. Controlled values (`atoms` or `state`) will overwrite `initialState`. Only use one of them. +> [!NOTE] +> Do NOT provide the `pagination` slice in more than one of the `atoms`, `state`, and `initialState` options. Controlled values (`atoms` or `state`) will overwrite `initialState`. Only use one of them. ### Pagination Options @@ -251,7 +253,8 @@ There are several pagination table instance APIs that are useful for hooking up - `setPagination`: Useful for setting all of the pagination state at once. - `resetPagination`: Useful for resetting the table state to the original pagination state. -> **Note**: These pagination APIs are available when using `rowPaginationFeature`. +> [!NOTE] +> These pagination APIs are available when using `rowPaginationFeature`. Pagination controls live on real elements so the click handlers and `:disabled` bindings stay interactive. Read the page index and page size with `table.atoms.pagination.get()`. diff --git a/docs/framework/alpine/guide/row-selection.md b/docs/framework/alpine/guide/row-selection.md index bd0a3a8f29..f1495ae465 100644 --- a/docs/framework/alpine/guide/row-selection.md +++ b/docs/framework/alpine/guide/row-selection.md @@ -54,7 +54,8 @@ console.log(table.getGroupedSelectedRowModel().rows) //get grouped client-side s In Alpine, the table's state atoms are reactive. `table.atoms.rowSelection.get()` is a reactive read when called inside an Alpine binding (`x-text`, `x-html`, `:value`, `x-if`, `x-for`, `x-effect`, or a getter/method on your `Alpine.data` object); in event handlers and other untracked code, the same call simply returns the current value. -> Note: If you are using `manualPagination`, be aware that the `getSelectedRowModel` API will only return selected rows on the current page because table row models can only generate rows based on the `data` that is passed in. Row selection state, however, can contain row ids that are not present in the `data` array just fine. +> [!NOTE] +> If you are using `manualPagination`, be aware that the `getSelectedRowModel` API will only return selected rows on the current page because table row models can only generate rows based on the `data` that is passed in. Row selection state, however, can contain row ids that are not present in the `data` array just fine. ### Manage Row Selection State @@ -282,7 +283,8 @@ const columns = [ ``` -> **Note:** The `getCanSelectSubRows()` and `getIsAllSubRowsSelected()` clauses on the row checkbox only matter for tables with sub-rows. With flat data, `row.getIsSelected()` alone is enough. See the expanding example for the full pattern, including the `deselectParents` option for pruning stale parent ids when children are deselected. +> [!NOTE] +> The `getCanSelectSubRows()` and `getIsAllSubRowsSelected()` clauses on the row checkbox only matter for tables with sub-rows. With flat data, `row.getIsSelected()` alone is enough. See the expanding example for the full pattern, including the `deselectParents` option for pruning stale parent ids when children are deselected. #### Connect Row Selection APIs to UI diff --git a/docs/framework/alpine/guide/sorting.md b/docs/framework/alpine/guide/sorting.md index d7e39b75a6..ccb30cb8bb 100644 --- a/docs/framework/alpine/guide/sorting.md +++ b/docs/framework/alpine/guide/sorting.md @@ -45,7 +45,8 @@ const table = createTable({ }) ``` -> **NOTE**: Spreading the entire built-in registry (`sortFns: { ...sortFns }`) still works, but it puts every built-in sorting function in your bundle. Registering just the functions you use, or passing a function directly to the `sortFn` column option, is recommended. The default `sortFn: 'auto'` resolves to `alphanumeric`, `text`, or `datetime` from the registry based on the column's data type, so register the ones your columns rely on. +> [!NOTE] +> Spreading the entire built-in registry (`sortFns: { ...sortFns }`) still works, but it puts every built-in sorting function in your bundle. Registering just the functions you use, or passing a function directly to the `sortFn` column option, is recommended. The default `sortFn: 'auto'` resolves to `alphanumeric`, `text`, or `datetime` from the registry based on the column's data type, so register the ones your columns rely on. ## Sorting (Alpine) Guide @@ -154,7 +155,8 @@ const table = createTable({ }) ``` -> **NOTE**: Do not use both `initialState.sorting` and `state.sorting` at the same time, as the controlled `state.sorting` value will override the `initialState.sorting`. +> [!NOTE] +> Do not use both `initialState.sorting` and `state.sorting` at the same time, as the controlled `state.sorting` value will override the `initialState.sorting`. ### Client-Side vs Server-Side Sorting @@ -190,7 +192,8 @@ const table = createTable({ Hoisting the sorting state into your own scope (with an external atom or the `state.sorting` plus `onSortingChange` pattern) is covered in the [Controlled Sorting State](#controlled-sorting-state) section above. -> **NOTE**: When `manualSorting` is set to `true`, the table will assume that the data that you provide is already sorted, and will not apply any sorting to it. +> [!NOTE] +> When `manualSorting` is set to `true`, the table will assume that the data that you provide is already sorted, and will not apply any sorting to it. ### Client-Side Sorting @@ -258,7 +261,8 @@ const myCustomSortFn: SortFn = ( } ``` -> Note: The comparison function does not need to take whether or not the column is in descending or ascending order into account. The row models will take care of that logic. `sortFn` functions only need to provide a consistent comparison. +> [!NOTE] +> The comparison function does not need to take whether or not the column is in descending or ascending order into account. The row models will take care of that logic. `sortFn` functions only need to provide a consistent comparison. Every sorting function receives 2 rows and a column ID and is expected to compare the two rows using the column ID to return `-1`, `0`, or `1` in ascending order. Here's a cheat sheet: @@ -422,7 +426,8 @@ const table = createTable({ }) ``` -> **NOTE**: You may want to explicitly set the `sortDescFirst` column option on any columns that have nullable values. The table may not be able to properly determine if a column is a number or a string if it contains nullable values. +> [!NOTE] +> You may want to explicitly set the `sortDescFirst` column option on any columns that have nullable values. The table may not be able to properly determine if a column is a number or a string if it contains nullable values. #### Invert Sorting @@ -451,7 +456,8 @@ If not specified, the default value for `sortUndefined` is `1`, and undefined va - `-1` - Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list) - `1` - Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list) -> NOTE: `'first'` and `'last'` options are available in v9. +> [!NOTE] +> `'first'` and `'last'` options are available in v9. ```ts const columns = [ diff --git a/docs/framework/alpine/guide/table-state.md b/docs/framework/alpine/guide/table-state.md index d8a6834794..21ec679be5 100644 --- a/docs/framework/alpine/guide/table-state.md +++ b/docs/framework/alpine/guide/table-state.md @@ -188,7 +188,8 @@ const table = createTable({ }) ``` -> **Note:** Do not provide the same state slice in multiple ownership places unless you intentionally want one to win. For a slice like `pagination`, prefer exactly one of `initialState.pagination`, `atoms.pagination`, or `state.pagination` as the source of truth. The precedence is `atoms[key]` > `state[key]` > internal `baseAtoms[key]`: external atoms take precedence over external `state`, and external `state` syncs into the table's internal base atom. +> [!NOTE] +> Do not provide the same state slice in multiple ownership places unless you intentionally want one to win. For a slice like `pagination`, prefer exactly one of `initialState.pagination`, `atoms.pagination`, or `state.pagination` as the source of truth. The precedence is `atoms[key]` > `state[key]` > internal `baseAtoms[key]`: external atoms take precedence over external `state`, and external `state` syncs into the table's internal base atom. #### Resetting to Initial State diff --git a/docs/framework/angular/guide/cell-selection.md b/docs/framework/angular/guide/cell-selection.md index 97a11dc914..d672174a95 100644 --- a/docs/framework/angular/guide/cell-selection.md +++ b/docs/framework/angular/guide/cell-selection.md @@ -122,7 +122,8 @@ export class App { } ``` -> Note: a drag emits one change per cell boundary the pointer crosses, so `onCellSelectionChange` fires repeatedly during a drag. If you are syncing selection to a server or a URL, debounce it or commit on `mouseup`. +> [!NOTE] +> a drag emits one change per cell boundary the pointer crosses, so `onCellSelectionChange` fires repeatedly during a drag. If you are syncing selection to a server or a URL, debounce it or commit on `mouseup`. ### Useful Row Ids @@ -241,7 +242,8 @@ function getCellClassName(cell) { } ``` -> Tip: draw the outline with `box-shadow: inset ...` rather than `border`. On a `border-collapse` table a thicker border widens the shared grid line, which makes rows change height as cells become selected. A box-shadow never affects layout. +> [!TIP] +> draw the outline with `box-shadow: inset ...` rather than `border`. On a `border-collapse` table a thicker border widens the shared grid line, which makes rows change height as cells become selected. A box-shadow never affects layout. ### Keyboard Navigation diff --git a/docs/framework/angular/guide/column-filtering.md b/docs/framework/angular/guide/column-filtering.md index 32d6530416..37cb7a66ad 100644 --- a/docs/framework/angular/guide/column-filtering.md +++ b/docs/framework/angular/guide/column-filtering.md @@ -47,7 +47,8 @@ export class App { } ``` -> **Note:** The `filterFns` registry above lists only the built-in filter functions this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `filterFn` column option with no registration at all. +> [!NOTE] +> The `filterFns` registry above lists only the built-in filter functions this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `filterFn` column option with no registration at all. ## Column Filtering (Angular) Guide @@ -82,7 +83,8 @@ readonly table = injectTable(() => ({ })) ``` -> **Note:** When using manual filtering, many of the options that are discussed in the rest of this guide will have no effect. When `manualFiltering` is set to `true`, the table instance will not apply any filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the `data` that you pass to it as-is. +> [!NOTE] +> When using manual filtering, many of the options that are discussed in the rest of this guide will have no effect. When `manualFiltering` is set to `true`, the table instance will not apply any filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the `data` that you pass to it as-is. ### Client-Side Filtering @@ -214,7 +216,8 @@ readonly table = injectTable(() => ({ })) ``` -> **NOTE**: Do not use both `initialState.columnFilters` and `state.columnFilters` at the same time, as the controlled `state.columnFilters` value will override the `initialState.columnFilters`. +> [!NOTE] +> Do not use both `initialState.columnFilters` and `state.columnFilters` at the same time, as the controlled `state.columnFilters` value will override the `initialState.columnFilters`. ### FilterFns @@ -245,7 +248,8 @@ You can also define your own custom filter functions, either inline as the `filt #### Custom Filter Functions -> **Note:** These filter functions only run during client-side filtering. +> [!NOTE] +> These filter functions only run during client-side filtering. Whether you register a custom filter function in the `filterFns` slot on `tableFeatures` or pass it directly as a `filterFn` column option, it should have the following signature: @@ -359,7 +363,8 @@ const includesStringIgnoreDiacritics = constructFilterFn({ Register the variant by name in the `filterFns` registry or pass it directly to the `filterFn` column option, just like any other custom filter function. -> **Note:** The table applies `resolveFilterValue` once per filter before any rows are tested. If you ever call a filter function directly (outside of a table), resolve the filter value yourself: `myFilterFn(row, columnId, myFilterFn.resolveFilterValue?.(rawValue) ?? rawValue)`. +> [!NOTE] +> The table applies `resolveFilterValue` once per filter before any rows are tested. If you ever call a filter function directly (outside of a table), resolve the filter value yourself: `myFilterFn(row, columnId, myFilterFn.resolveFilterValue?.(rawValue) ?? rawValue)`. ### Customize Column Filtering diff --git a/docs/framework/angular/guide/column-ordering.md b/docs/framework/angular/guide/column-ordering.md index 6bde834462..dda502d1d1 100644 --- a/docs/framework/angular/guide/column-ordering.md +++ b/docs/framework/angular/guide/column-ordering.md @@ -45,7 +45,8 @@ There are 3 table features that can reorder columns, which happen in the followi 2. Manual **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. -> **Note:** `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning. +> [!NOTE] +> `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning. ### Column Order State @@ -68,7 +69,8 @@ readonly table = injectTable(() => ({ })) ``` -> **Note:** If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both. +> [!NOTE] +> If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both. #### Managing Column Order State diff --git a/docs/framework/angular/guide/column-pinning.md b/docs/framework/angular/guide/column-pinning.md index ee6b0f312a..8f9a6af3e3 100644 --- a/docs/framework/angular/guide/column-pinning.md +++ b/docs/framework/angular/guide/column-pinning.md @@ -131,7 +131,8 @@ readonly table = injectTable(() => ({ ### Useful Column Pinning APIs -> Note: These APIs are available when using `columnPinningFeature`. +> [!NOTE] +> These APIs are available when using `columnPinningFeature`. There are a handful of useful Column API methods to help you implement column pinning features: diff --git a/docs/framework/angular/guide/column-visibility.md b/docs/framework/angular/guide/column-visibility.md index 7ba429f272..508fcdaaf3 100644 --- a/docs/framework/angular/guide/column-visibility.md +++ b/docs/framework/angular/guide/column-visibility.md @@ -100,7 +100,8 @@ readonly table = injectTable(() => ({ Alternatively, if you don't need to manage the column visibility state outside of the table, you can still set the initial default column visibility state using the `initialState` option. -> **Note**: If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other. +> [!NOTE] +> If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other. ```ts const features = tableFeatures({ columnVisibilityFeature }) diff --git a/docs/framework/angular/guide/expanding.md b/docs/framework/angular/guide/expanding.md index f55148805d..68e32d7a46 100644 --- a/docs/framework/angular/guide/expanding.md +++ b/docs/framework/angular/guide/expanding.md @@ -117,7 +117,8 @@ readonly table = injectTable(() => ({ })) ``` -> **Note:** You can have a complicated `getSubRows` function, but keep in mind that it will run for every row and every sub-row. This can be expensive if the function is not optimized. Async functions are not supported. +> [!NOTE] +> You can have a complicated `getSubRows` function, but keep in mind that it will run for every row and every sub-row. This can be expensive if the function is not optimized. Async functions are not supported. ### Custom Expanding UI diff --git a/docs/framework/angular/guide/fuzzy-filtering.md b/docs/framework/angular/guide/fuzzy-filtering.md index 1039ccb653..b1128b5fbe 100644 --- a/docs/framework/angular/guide/fuzzy-filtering.md +++ b/docs/framework/angular/guide/fuzzy-filtering.md @@ -54,7 +54,8 @@ export class App { } ``` -> **Note:** The `filterFns` and `sortFns` registries above list only the custom `fuzzy` functions this guide uses. Spreading the entire built-in registries (`filterFns: { ...filterFns, fuzzy: fuzzyFilter }`) still works, but it puts every built-in function in your bundle. Register just the functions you use, or pass functions directly to the `filterFn` and `sortFn` column options with no registration. +> [!NOTE] +> The `filterFns` and `sortFns` registries above list only the custom `fuzzy` functions this guide uses. Spreading the entire built-in registries (`filterFns: { ...filterFns, fuzzy: fuzzyFilter }`) still works, but it puts every built-in function in your bundle. Register just the functions you use, or pass functions directly to the `filterFn` and `sortFn` column options with no registration. ## Fuzzy Filtering (Angular) Guide @@ -64,7 +65,8 @@ You can implement client-side fuzzy filtering by defining a custom filter functi Fuzzy filtering is mostly used with global filtering, but you can also apply it to individual columns. We will discuss how to implement fuzzy filtering for both cases. -> **Note:** You will need to install the `@tanstack/match-sorter-utils` library to use fuzzy filtering. +> [!NOTE] +> You will need to install the `@tanstack/match-sorter-utils` library to use fuzzy filtering. > TanStack Match Sorter Utils is a fork of [match-sorter](https://github.com/kentcdodds/match-sorter) by Kent C. Dodds. It was forked in order to work better with TanStack Table's row by row filtering approach. Using the match-sorter libraries is optional, but the TanStack Match Sorter Utils library provides a great way to both fuzzy filter and sort by the rank information it returns, so that rows can be sorted by their closest matches to the search query. @@ -216,4 +218,5 @@ You can then pass this sorting function directly to the `sortFn` option of the c } ``` -> **Note:** `fuzzySort` can also be referenced by the string `'fuzzy'` if it is registered in the `sortFns` slot of `tableFeatures` (as shown in the setup snippet above). Passing the function directly to `sortFn` skips the need to register it. +> [!NOTE] +> `fuzzySort` can also be referenced by the string `'fuzzy'` if it is registered in the `sortFns` slot of `tableFeatures` (as shown in the setup snippet above). Passing the function directly to `sortFn` skips the need to register it. diff --git a/docs/framework/angular/guide/global-filtering.md b/docs/framework/angular/guide/global-filtering.md index cc1d5bd3a1..b6fa5c18bd 100644 --- a/docs/framework/angular/guide/global-filtering.md +++ b/docs/framework/angular/guide/global-filtering.md @@ -43,7 +43,8 @@ export class App { } ``` -> **Note:** The `filterFns` registry above lists only the built-in filter function this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `globalFilterFn` option with no registration at all. +> [!NOTE] +> The `filterFns` registry above lists only the built-in filter function this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `globalFilterFn` option with no registration at all. ## Global Filtering (Angular) Guide @@ -205,7 +206,8 @@ TanStack table will not add a global filter input UI to your table. You should m 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). +> [!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). ```ts const customFilterFn = (row, columnId, filterValue) => { @@ -235,7 +237,8 @@ readonly table = injectTable(() => ({ })) ``` -> NOTE: Do not use both `initialState.globalFilter` and a controlled `globalFilter` (via `atoms` or `state`) at the same time, as the controlled value will override `initialState.globalFilter`. +> [!NOTE] +> Do not use both `initialState.globalFilter` and a controlled `globalFilter` (via `atoms` or `state`) at the same time, as the controlled value will override `initialState.globalFilter`. ### Disable Global Filtering diff --git a/docs/framework/angular/guide/grouping.md b/docs/framework/angular/guide/grouping.md index d881e66a13..f6d3fb0686 100644 --- a/docs/framework/angular/guide/grouping.md +++ b/docs/framework/angular/guide/grouping.md @@ -8,7 +8,8 @@ Want to skip to the implementation? Check out these Angular examples: - [Grouping](../examples/grouping) -> **Note:** `columnGroupingFeature` and `rowAggregationFeature` are now separate features. Register either one independently, or register both when grouped rows should also calculate aggregate values. See the [Aggregation Guide](./aggregation) for aggregation setup. +> [!NOTE] +> `columnGroupingFeature` and `rowAggregationFeature` are now separate features. Register either one independently, or register both when grouped rows should also calculate aggregate values. See the [Aggregation Guide](./aggregation) for aggregation setup. ### Grouping Setup @@ -136,7 +137,8 @@ readonly table = injectTable(() => ({ })) ``` -> **Note:** There are not currently many known easy ways to do server-side grouping with TanStack Table. You will need to do lots of custom cell rendering to make this work. +> [!NOTE] +> There are not currently many known easy ways to do server-side grouping with TanStack Table. You will need to do lots of custom cell rendering to make this work. ### Controlled Grouping State diff --git a/docs/framework/angular/guide/migrating.md b/docs/framework/angular/guide/migrating.md index 1e3be0fb9c..1796c19274 100644 --- a/docs/framework/angular/guide/migrating.md +++ b/docs/framework/angular/guide/migrating.md @@ -81,7 +81,8 @@ const v9Table = injectTable(() => ({ })) ``` -> Note: `injectTable` evaluates your initializer whenever any Angular signal read inside of it changes. +> [!NOTE] +> `injectTable` evaluates your initializer whenever any Angular signal read inside of it changes. > Keep expensive/static values (like `columns` and `features`) as stable references outside the initializer. ### New Required `features` Table Option diff --git a/docs/framework/angular/guide/pagination.md b/docs/framework/angular/guide/pagination.md index 97b3aa54c6..2630e71113 100644 --- a/docs/framework/angular/guide/pagination.md +++ b/docs/framework/angular/guide/pagination.md @@ -111,7 +111,8 @@ readonly table = injectTable(() => ({ })) ``` -> **Note**: Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated. +> [!NOTE] +> Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated. #### Using TanStack Query @@ -294,7 +295,8 @@ readonly table = injectTable(() => ({ })) ``` -> **Note**: Do NOT provide the `pagination` slice in more than one of the `atoms`, `state`, and `initialState` options. Controlled values (`atoms` or `state`) will overwrite `initialState`. Only use one of them. +> [!NOTE] +> Do NOT provide the `pagination` slice in more than one of the `atoms`, `state`, and `initialState` options. Controlled values (`atoms` or `state`) will overwrite `initialState`. Only use one of them. ### Pagination Options @@ -341,7 +343,8 @@ There are several pagination table instance APIs that are useful for hooking up - `setPagination`: Useful for setting all of the pagination state at once. - `resetPagination`: Useful for resetting the table state to the original pagination state. -> **Note**: These pagination APIs are available when using `rowPaginationFeature`. +> [!NOTE] +> These pagination APIs are available when using `rowPaginationFeature`. ```html diff --git a/docs/framework/svelte/guide/row-selection.md b/docs/framework/svelte/guide/row-selection.md index 710e77626d..4a90984063 100644 --- a/docs/framework/svelte/guide/row-selection.md +++ b/docs/framework/svelte/guide/row-selection.md @@ -61,7 +61,8 @@ const selectedCount = $derived(Object.keys(rowSelection).length) Outside a tracked context, `table.atoms.rowSelection.get()` is simply the current snapshot. -> Note: If you are using `manualPagination`, be aware that the `getSelectedRowModel` API will only return selected rows on the current page because table row models can only generate rows based on the `data` that is passed in. Row selection state, however, can contain row ids that are not present in the `data` array just fine. +> [!NOTE] +> If you are using `manualPagination`, be aware that the `getSelectedRowModel` API will only return selected rows on the current page because table row models can only generate rows based on the `data` that is passed in. Row selection state, however, can contain row ids that are not present in the `data` array just fine. ### Manage Row Selection State @@ -270,7 +271,8 @@ The `indeterminate` checkbox property cannot be set from markup, so define a sma /> ``` -> **Note:** The `getCanSelectSubRows()` and `getIsAllSubRowsSelected()` clauses on the row checkbox only matter for tables with sub-rows. With flat data, `row.getIsSelected()` alone is enough. See the expanding example for the full pattern, including the `deselectParents` option for pruning stale parent ids when children are deselected. +> [!NOTE] +> The `getCanSelectSubRows()` and `getIsAllSubRowsSelected()` clauses on the row checkbox only matter for tables with sub-rows. With flat data, `row.getIsSelected()` alone is enough. See the expanding example for the full pattern, including the `deselectParents` option for pruning stale parent ids when children are deselected. #### Connect Row Selection APIs to UI diff --git a/docs/framework/svelte/guide/sorting.md b/docs/framework/svelte/guide/sorting.md index 150270430a..7f861dc16c 100644 --- a/docs/framework/svelte/guide/sorting.md +++ b/docs/framework/svelte/guide/sorting.md @@ -45,7 +45,8 @@ const table = createTable({ }) ``` -> **NOTE**: Spreading the entire built-in registry (`sortFns: { ...sortFns }`) still works, but it puts every built-in sorting function in your bundle. Registering just the functions you use, or passing a function directly to the `sortFn` column option, is recommended. The default `sortFn: 'auto'` resolves to `alphanumeric`, `text`, or `datetime` from the registry based on the column's data type, so register the ones your columns rely on. +> [!NOTE] +> Spreading the entire built-in registry (`sortFns: { ...sortFns }`) still works, but it puts every built-in sorting function in your bundle. Registering just the functions you use, or passing a function directly to the `sortFn` column option, is recommended. The default `sortFn: 'auto'` resolves to `alphanumeric`, `text`, or `datetime` from the registry based on the column's data type, so register the ones your columns rely on. ## Sorting (Svelte) Guide @@ -155,7 +156,8 @@ const table = createTable({ }) ``` -> **NOTE**: Do not use both `initialState.sorting` and `state.sorting` at the same time, as the controlled `state.sorting` value will override the `initialState.sorting`. +> [!NOTE] +> Do not use both `initialState.sorting` and `state.sorting` at the same time, as the controlled `state.sorting` value will override the `initialState.sorting`. ### Client-Side vs Server-Side Sorting @@ -194,7 +196,8 @@ const table = createTable({ Hoisting the sorting state into your own scope (with an external atom or the `state.sorting` plus `onSortingChange` pattern) is covered in the [Controlled Sorting State](#controlled-sorting-state) section above. -> **NOTE**: When `manualSorting` is set to `true`, the table will assume that the data that you provide is already sorted, and will not apply any sorting to it. +> [!NOTE] +> When `manualSorting` is set to `true`, the table will assume that the data that you provide is already sorted, and will not apply any sorting to it. ### Client-Side Sorting @@ -260,7 +263,8 @@ const myCustomSortFn: SortFn = ( } ``` -> Note: The comparison function does not need to take whether or not the column is in descending or ascending order into account. The row models will take care of that logic. `sortFn` functions only need to provide a consistent comparison. +> [!NOTE] +> The comparison function does not need to take whether or not the column is in descending or ascending order into account. The row models will take care of that logic. `sortFn` functions only need to provide a consistent comparison. Every sorting function receives 2 rows and a column ID and is expected to compare the two rows using the column ID to return `-1`, `0`, or `1` in ascending order. Here's a cheat sheet: @@ -420,7 +424,8 @@ const table = createTable({ }) ``` -> **NOTE**: You may want to explicitly set the `sortDescFirst` column option on any columns that have nullable values. The table may not be able to properly determine if a column is a number or a string if it contains nullable values. +> [!NOTE] +> You may want to explicitly set the `sortDescFirst` column option on any columns that have nullable values. The table may not be able to properly determine if a column is a number or a string if it contains nullable values. #### Invert Sorting @@ -449,7 +454,8 @@ If not specified, the default value for `sortUndefined` is `1`, and undefined va - `-1` - Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list) - `1` - Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list) -> NOTE: `'first'` and `'last'` options are available in v9. +> [!NOTE] +> `'first'` and `'last'` options are available in v9. ```ts const columns = [ diff --git a/docs/framework/svelte/guide/table-state.md b/docs/framework/svelte/guide/table-state.md index 2cec7d7746..875ad5413d 100644 --- a/docs/framework/svelte/guide/table-state.md +++ b/docs/framework/svelte/guide/table-state.md @@ -192,7 +192,8 @@ const table = createTable({ }) ``` -> **Note:** Do not provide the same state slice in multiple ownership places unless you intentionally want one to win. For a slice like `pagination`, prefer exactly one of `initialState.pagination`, `atoms.pagination`, or `state.pagination` as the source of truth. External atoms take precedence over external `state`; external `state` syncs into the table's internal base atom. +> [!NOTE] +> Do not provide the same state slice in multiple ownership places unless you intentionally want one to win. For a slice like `pagination`, prefer exactly one of `initialState.pagination`, `atoms.pagination`, or `state.pagination` as the source of truth. External atoms take precedence over external `state`; external `state` syncs into the table's internal base atom. #### Resetting to Initial State diff --git a/docs/framework/svelte/quick-start.md b/docs/framework/svelte/quick-start.md index 5f3bb917ee..7113f13c60 100644 --- a/docs/framework/svelte/quick-start.md +++ b/docs/framework/svelte/quick-start.md @@ -4,7 +4,8 @@ title: Quick Start TanStack Table is a headless table library. It manages your table's state and logic (sorting, filtering, pagination, selection, and more) while you keep 100% control over the markup and styles. This page gets you from install to a rendering Svelte table, then shows how to layer on your first feature. -> **IMPORTANT:** This version of `@tanstack/svelte-table` only supports Svelte 5 or newer. For Svelte 3/4 support, use version 8 of `@tanstack/svelte-table`. +> [!IMPORTANT] +> This version of `@tanstack/svelte-table` only supports Svelte 5 or newer. For Svelte 3/4 support, use version 8 of `@tanstack/svelte-table`. ## Installation diff --git a/docs/framework/vanilla/guide/table-state.md b/docs/framework/vanilla/guide/table-state.md index 3b02f6dc1b..12a8a01f60 100644 --- a/docs/framework/vanilla/guide/table-state.md +++ b/docs/framework/vanilla/guide/table-state.md @@ -167,7 +167,8 @@ const table = constructTable({ }) ``` -> **Note:** Do not provide the same state slice in multiple ownership places unless you intentionally want one to win. For a slice like `pagination`, prefer exactly one of `initialState.pagination`, `atoms.pagination`, or `state.pagination` as the source of truth. External atoms take precedence over external `state`; external `state` syncs into the table's internal base atom. +> [!NOTE] +> Do not provide the same state slice in multiple ownership places unless you intentionally want one to win. For a slice like `pagination`, prefer exactly one of `initialState.pagination`, `atoms.pagination`, or `state.pagination` as the source of truth. External atoms take precedence over external `state`; external `state` syncs into the table's internal base atom. #### Resetting to Initial State diff --git a/docs/framework/vue/guide/cell-selection.md b/docs/framework/vue/guide/cell-selection.md index 8081c76264..b29548cac3 100644 --- a/docs/framework/vue/guide/cell-selection.md +++ b/docs/framework/vue/guide/cell-selection.md @@ -119,7 +119,8 @@ const table = useTable({ }) ``` -> Note: a drag emits one change per cell boundary the pointer crosses, so `onCellSelectionChange` fires repeatedly during a drag. If you are syncing selection to a server or a URL, debounce it or commit on `mouseup`. +> [!NOTE] +> a drag emits one change per cell boundary the pointer crosses, so `onCellSelectionChange` fires repeatedly during a drag. If you are syncing selection to a server or a URL, debounce it or commit on `mouseup`. ### Useful Row Ids @@ -236,7 +237,8 @@ function getCellClassName(cell) { } ``` -> Tip: draw the outline with `box-shadow: inset ...` rather than `border`. On a `border-collapse` table a thicker border widens the shared grid line, which makes rows change height as cells become selected. A box-shadow never affects layout. +> [!TIP] +> draw the outline with `box-shadow: inset ...` rather than `border`. On a `border-collapse` table a thicker border widens the shared grid line, which makes rows change height as cells become selected. A box-shadow never affects layout. ### Keyboard Navigation diff --git a/docs/framework/vue/guide/column-filtering.md b/docs/framework/vue/guide/column-filtering.md index f436e962d7..a33f169dbd 100644 --- a/docs/framework/vue/guide/column-filtering.md +++ b/docs/framework/vue/guide/column-filtering.md @@ -44,7 +44,8 @@ const table = useTable({ }) ``` -> **Note:** The `filterFns` registry above lists only the built-in filter functions this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `filterFn` column option with no registration at all. +> [!NOTE] +> The `filterFns` registry above lists only the built-in filter functions this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `filterFn` column option with no registration at all. ## Column Filtering (Vue) Guide @@ -79,7 +80,8 @@ const table = useTable({ }) ``` -> **Note:** When using manual filtering, many of the options that are discussed in the rest of this guide will have no effect. When `manualFiltering` is set to `true`, the table instance will not apply any filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the `data` that you pass to it as-is. +> [!NOTE] +> When using manual filtering, many of the options that are discussed in the rest of this guide will have no effect. When `manualFiltering` is set to `true`, the table instance will not apply any filtering logic to the rows that are passed to it. Instead, it will assume that the rows are already filtered and will use the `data` that you pass to it as-is. ### Client-Side Filtering @@ -214,7 +216,8 @@ const table = useTable({ }) ``` -> **NOTE**: Do not use both `initialState.columnFilters` and `state.columnFilters` at the same time, as the controlled `state.columnFilters` value will override the `initialState.columnFilters`. +> [!NOTE] +> Do not use both `initialState.columnFilters` and `state.columnFilters` at the same time, as the controlled `state.columnFilters` value will override the `initialState.columnFilters`. ### FilterFns @@ -245,7 +248,8 @@ You can also define your own custom filter functions, either inline as the `filt #### Custom Filter Functions -> **Note:** These filter functions only run during client-side filtering. +> [!NOTE] +> These filter functions only run during client-side filtering. Whether you register a custom filter function in the `filterFns` slot on `tableFeatures` or pass it directly as a `filterFn` column option, it should have the following signature: @@ -359,7 +363,8 @@ const includesStringIgnoreDiacritics = constructFilterFn({ Register the variant by name in the `filterFns` registry or pass it directly to the `filterFn` column option, just like any other custom filter function. -> **Note:** The table applies `resolveFilterValue` once per filter before any rows are tested. If you ever call a filter function directly (outside of a table), resolve the filter value yourself: `myFilterFn(row, columnId, myFilterFn.resolveFilterValue?.(rawValue) ?? rawValue)`. +> [!NOTE] +> The table applies `resolveFilterValue` once per filter before any rows are tested. If you ever call a filter function directly (outside of a table), resolve the filter value yourself: `myFilterFn(row, columnId, myFilterFn.resolveFilterValue?.(rawValue) ?? rawValue)`. ### Customize Column Filtering diff --git a/docs/framework/vue/guide/column-ordering.md b/docs/framework/vue/guide/column-ordering.md index d5f73b322e..2d07194d10 100644 --- a/docs/framework/vue/guide/column-ordering.md +++ b/docs/framework/vue/guide/column-ordering.md @@ -42,7 +42,8 @@ There are 3 table features that can reorder columns, which happen in the followi 2. Manual **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. -> **Note:** `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning. +> [!NOTE] +> `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning. ### Column Order State @@ -65,7 +66,8 @@ const table = useTable({ }) ``` -> **Note:** If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both. +> [!NOTE] +> If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both. #### Managing Column Order State diff --git a/docs/framework/vue/guide/column-pinning.md b/docs/framework/vue/guide/column-pinning.md index d619f329ce..8113e557ca 100644 --- a/docs/framework/vue/guide/column-pinning.md +++ b/docs/framework/vue/guide/column-pinning.md @@ -128,7 +128,8 @@ const table = useTable({ ### Useful Column Pinning APIs -> Note: These APIs are available when using `columnPinningFeature`. +> [!NOTE] +> These APIs are available when using `columnPinningFeature`. There are a handful of useful Column API methods to help you implement column pinning features: diff --git a/docs/framework/vue/guide/column-visibility.md b/docs/framework/vue/guide/column-visibility.md index 0bff5ace6e..4824350709 100644 --- a/docs/framework/vue/guide/column-visibility.md +++ b/docs/framework/vue/guide/column-visibility.md @@ -97,7 +97,8 @@ const table = useTable({ Alternatively, if you don't need to manage the column visibility state outside of the table, you can still set the initial default column visibility state using the `initialState` option. -> **Note**: If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other. +> [!NOTE] +> If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other. ```ts const features = tableFeatures({ columnVisibilityFeature }) diff --git a/docs/framework/vue/guide/expanding.md b/docs/framework/vue/guide/expanding.md index b84016f60a..479d5e037c 100644 --- a/docs/framework/vue/guide/expanding.md +++ b/docs/framework/vue/guide/expanding.md @@ -114,7 +114,8 @@ const table = useTable({ }) ``` -> **Note:** You can have a complicated `getSubRows` function, but keep in mind that it will run for every row and every sub-row. This can be expensive if the function is not optimized. Async functions are not supported. +> [!NOTE] +> You can have a complicated `getSubRows` function, but keep in mind that it will run for every row and every sub-row. This can be expensive if the function is not optimized. Async functions are not supported. ### Custom Expanding UI diff --git a/docs/framework/vue/guide/fuzzy-filtering.md b/docs/framework/vue/guide/fuzzy-filtering.md index 9bdaeb4b90..427de2292c 100644 --- a/docs/framework/vue/guide/fuzzy-filtering.md +++ b/docs/framework/vue/guide/fuzzy-filtering.md @@ -51,7 +51,8 @@ const table = useTable({ }) ``` -> **Note:** The `filterFns` and `sortFns` registries above list only the custom `fuzzy` functions this guide uses. Spreading the entire built-in registries (`filterFns: { ...filterFns, fuzzy: fuzzyFilter }`) still works, but it puts every built-in function in your bundle. Register just the functions you use, or pass functions directly to the `filterFn` and `sortFn` column options with no registration. +> [!NOTE] +> The `filterFns` and `sortFns` registries above list only the custom `fuzzy` functions this guide uses. Spreading the entire built-in registries (`filterFns: { ...filterFns, fuzzy: fuzzyFilter }`) still works, but it puts every built-in function in your bundle. Register just the functions you use, or pass functions directly to the `filterFn` and `sortFn` column options with no registration. ## Fuzzy Filtering (Vue) Guide @@ -61,7 +62,8 @@ You can implement client-side fuzzy filtering by defining a custom filter functi Fuzzy filtering is mostly used with global filtering, but you can also apply it to individual columns. We will discuss how to implement fuzzy filtering for both cases. -> **Note:** You will need to install the `@tanstack/match-sorter-utils` library to use fuzzy filtering. +> [!NOTE] +> You will need to install the `@tanstack/match-sorter-utils` library to use fuzzy filtering. > TanStack Match Sorter Utils is a fork of [match-sorter](https://github.com/kentcdodds/match-sorter) by Kent C. Dodds. It was forked in order to work better with TanStack Table's row by row filtering approach. Using the match-sorter libraries is optional, but the TanStack Match Sorter Utils library provides a great way to both fuzzy filter and sort by the rank information it returns, so that rows can be sorted by their closest matches to the search query. @@ -212,4 +214,5 @@ You can then pass this sorting function directly to the `sortFn` option of the c } ``` -> **Note:** Unlike `filterFn: 'fuzzy'` above, `fuzzySort` is passed as a function rather than a string. A string reference like `sortFn: 'fuzzySort'` would only work if you also added `fuzzySort` to the `sortFns` slot in `tableFeatures` (e.g. `sortFns: { fuzzySort }`). Passing the function directly skips that step. +> [!NOTE] +> Unlike `filterFn: 'fuzzy'` above, `fuzzySort` is passed as a function rather than a string. A string reference like `sortFn: 'fuzzySort'` would only work if you also added `fuzzySort` to the `sortFns` slot in `tableFeatures` (e.g. `sortFns: { fuzzySort }`). Passing the function directly skips that step. diff --git a/docs/framework/vue/guide/global-filtering.md b/docs/framework/vue/guide/global-filtering.md index b0ab581928..e2533c5e3a 100644 --- a/docs/framework/vue/guide/global-filtering.md +++ b/docs/framework/vue/guide/global-filtering.md @@ -40,7 +40,8 @@ const table = useTable({ }) ``` -> **Note:** The `filterFns` registry above lists only the built-in filter function this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `globalFilterFn` option with no registration at all. +> [!NOTE] +> The `filterFns` registry above lists only the built-in filter function this table uses. Spreading the entire built-in `filterFns` registry (`filterFns: { ...filterFns }`) still works, but it puts every built-in filter function in your bundle. Register just the functions you use, or pass a function directly to the `globalFilterFn` option with no registration at all. ## Global Filtering (Vue) Guide @@ -204,7 +205,8 @@ TanStack table will not add a global filter input UI to your table. You should m 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). +> [!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). ```ts const customFilterFn = (row, columnId, filterValue) => { @@ -234,7 +236,8 @@ const table = useTable({ }) ``` -> NOTE: Do not use both `initialState.globalFilter` and a controlled `globalFilter` (via `atoms` or `state`) at the same time, as the controlled value will override `initialState.globalFilter`. +> [!NOTE] +> Do not use both `initialState.globalFilter` and a controlled `globalFilter` (via `atoms` or `state`) at the same time, as the controlled value will override `initialState.globalFilter`. ### Disable Global Filtering diff --git a/docs/framework/vue/guide/grouping.md b/docs/framework/vue/guide/grouping.md index 15e0eb68c4..8ac2be21ca 100644 --- a/docs/framework/vue/guide/grouping.md +++ b/docs/framework/vue/guide/grouping.md @@ -8,7 +8,8 @@ Want to skip to the implementation? Check out these Vue examples: - [Grouping](../examples/grouping) -> **Note:** `columnGroupingFeature` and `rowAggregationFeature` are now separate features. Register either one independently, or register both when grouped rows should also calculate aggregate values. See the [Aggregation Guide](./aggregation) for aggregation setup. +> [!NOTE] +> `columnGroupingFeature` and `rowAggregationFeature` are now separate features. Register either one independently, or register both when grouped rows should also calculate aggregate values. See the [Aggregation Guide](./aggregation) for aggregation setup. Vue refs can be passed directly where the adapter expects reactive table options. @@ -133,7 +134,8 @@ const table = useTable({ }) ``` -> **Note:** There are not currently many known easy ways to do server-side grouping with TanStack Table. You will need to do lots of custom cell rendering to make this work. +> [!NOTE] +> There are not currently many known easy ways to do server-side grouping with TanStack Table. You will need to do lots of custom cell rendering to make this work. ### Controlled Grouping State diff --git a/docs/framework/vue/guide/pagination.md b/docs/framework/vue/guide/pagination.md index 74455a0d32..96285f0cb6 100644 --- a/docs/framework/vue/guide/pagination.md +++ b/docs/framework/vue/guide/pagination.md @@ -108,7 +108,8 @@ const table = useTable({ }) ``` -> **Note**: Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated. +> [!NOTE] +> Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated. #### Using TanStack Query @@ -301,7 +302,8 @@ const table = useTable({ }) ``` -> **Note**: Do NOT provide the `pagination` slice in more than one of the `atoms`, `state`, and `initialState` options. Controlled values (`atoms` or `state`) will overwrite `initialState`. Only use one of them. +> [!NOTE] +> Do NOT provide the `pagination` slice in more than one of the `atoms`, `state`, and `initialState` options. Controlled values (`atoms` or `state`) will overwrite `initialState`. Only use one of them. ### Pagination Options @@ -349,7 +351,8 @@ There are several pagination table instance APIs that are useful for hooking up - `setPagination`: Useful for setting all of the pagination state at once. - `resetPagination`: Useful for resetting the table state to the original pagination state. -> **Note**: These pagination APIs are available when using `rowPaginationFeature`. +> [!NOTE] +> These pagination APIs are available when using `rowPaginationFeature`. ```vue