docs: Fix callout formatting

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
 

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
 

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
 

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:
 

docs/framework/alpine/guide/column-resizing.md

@@ -402,6 +402,7 @@ Alpine.data('table', () => {
 </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.

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 })

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
 

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.

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
 

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
 

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()`.
 

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 = [
 </template>
 ```
 
-> **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