diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 5518285334..1921d76457 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -36,7 +36,7 @@ jobs: with: main-branch-name: main - name: Run Checks - run: pnpm run test:pr --parallel=3 + run: pnpm run test:pr --parallel=4 - name: Stop Nx Agents if: ${{ always() }} run: npx nx-cloud stop-all-agents diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 980dea47d1..594a18a045 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -43,7 +43,7 @@ jobs: - name: Setup Tools uses: tanstack/config/.github/setup@e4b48f16568324f76f467aa4c2aac2f05db632c3 # main - name: Run Tests - run: pnpm run test:ci --parallel=3 + run: pnpm run test:ci --parallel=4 - name: Stop Nx Agents if: ${{ always() }} run: npx nx-cloud stop-all-agents diff --git a/_artifacts/domain_map.yaml b/_artifacts/domain_map.yaml index d15ad1023f..09c32a45ed 100644 --- a/_artifacts/domain_map.yaml +++ b/_artifacts/domain_map.yaml @@ -1,6 +1,6 @@ library: name: '@tanstack/table' - version: '9.0.0-beta.43' + version: '9.0.0-beta.46' repository: 'https://github.com/TanStack/table' homepage: 'https://tanstack.com/table' description: 'Headless, framework-agnostic data-grid state and row-processing primitives with tree-shakeable v9 features and framework adapters.' diff --git a/_artifacts/skill_tree.yaml b/_artifacts/skill_tree.yaml index f22be40a29..0fbfc47a27 100644 --- a/_artifacts/skill_tree.yaml +++ b/_artifacts/skill_tree.yaml @@ -1,6 +1,6 @@ library: name: '@tanstack/table' - version: '9.0.0-beta.43' + version: '9.0.0-beta.46' repository: 'https://github.com/TanStack/table' description: 'Headless data-grid state and row processing with tree-shakeable v9 features and framework adapters.' package_version_overrides: diff --git a/docs/framework/alpine/guide/custom-features.md b/docs/framework/alpine/guide/custom-features.md index 9b506b0497..0a49259022 100644 --- a/docs/framework/alpine/guide/custom-features.md +++ b/docs/framework/alpine/guide/custom-features.md @@ -52,6 +52,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -70,6 +76,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -99,9 +111,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+#### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ #### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/alpine/guide/row-selection.md b/docs/framework/alpine/guide/row-selection.md index 415f16461a..fd02e74436 100644 --- a/docs/framework/alpine/guide/row-selection.md +++ b/docs/framework/alpine/guide/row-selection.md @@ -178,6 +178,37 @@ const table = createTable({ }) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind an Alpine checkbox handler with `@click`, not `@change`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +const table = createTable({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +}) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack Table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -231,7 +262,7 @@ const columns = [ :checked="cell.row.getIsSelected()" :disabled="!cell.row.getCanSelect()" x-effect="$el.indeterminate = !cell.row.getIsSelected() && cell.row.getIsSomeSelected()" - @change="cell.row.getToggleSelectedHandler()($event)" + @click="cell.row.getToggleSelectedHandler()($event)" /> diff --git a/docs/framework/angular/guide/custom-features.md b/docs/framework/angular/guide/custom-features.md index 4db076f045..6d7335aa9f 100644 --- a/docs/framework/angular/guide/custom-features.md +++ b/docs/framework/angular/guide/custom-features.md @@ -58,6 +58,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -76,6 +82,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -105,9 +117,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+##### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ ##### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/angular/guide/migrating.md b/docs/framework/angular/guide/migrating.md index 581ca57ca4..909dc603a0 100644 --- a/docs/framework/angular/guide/migrating.md +++ b/docs/framework/angular/guide/migrating.md @@ -753,6 +753,11 @@ Some row APIs have changed from private to public: ### Row Selection API Changes +> [!WARNING] +> **Minor breaking change:** `row.getToggleSelectedHandler()` now enables inclusive Shift range selection by default when `rowSelectionFeature` is enabled. Existing checkboxes or rows wired through this handler establish an anchor on an ordinary interaction and select or deselect the current display-order range on a Shift interaction. Direct `row.toggleSelected()` calls are unchanged. +> +> Set `enableRowRangeSelection: false` to preserve the previous non-range handler behavior. The handler must receive an event that exposes Shift directly or through `nativeEvent`; see [Shift Range Selection](./row-selection.md#shift-range-selection). + The "some rows selected" checks were simplified to mean "at least one row is selected": | API | v8 | v9 | diff --git a/docs/framework/angular/guide/row-selection.md b/docs/framework/angular/guide/row-selection.md index 5f9b7547cc..fdabf057fe 100644 --- a/docs/framework/angular/guide/row-selection.md +++ b/docs/framework/angular/guide/row-selection.md @@ -177,6 +177,37 @@ readonly table = injectTable(() => ({ })) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind an Angular checkbox handler with `(click)`, not `(change)`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +readonly table = injectTable(() => ({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +})) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -204,7 +235,7 @@ If you need more granular control over these function handlers, you can always j [checked]="row.getIsSelected()" [disabled]="!row.getCanSelect()" [indeterminate]="row.getIsSomeSelected()" - (change)="row.getToggleSelectedHandler()?.($event)" + (click)="row.getToggleSelectedHandler()?.($event)" /> ``` diff --git a/docs/framework/ember/guide/custom-features.md b/docs/framework/ember/guide/custom-features.md index bc7cea7520..5a09124440 100644 --- a/docs/framework/ember/guide/custom-features.md +++ b/docs/framework/ember/guide/custom-features.md @@ -58,6 +58,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -76,6 +82,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -105,9 +117,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+##### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ ##### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/ember/guide/row-selection.md b/docs/framework/ember/guide/row-selection.md index 940d89b4f5..173659d0b2 100644 --- a/docs/framework/ember/guide/row-selection.md +++ b/docs/framework/ember/guide/row-selection.md @@ -169,6 +169,37 @@ const table = useTable(() => ({ })) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind an Ember checkbox handler to `click`, not `change`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +const table = useTable(() => ({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +})) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -235,7 +266,7 @@ class SelectionRowCheckbox extends Component< return this.row.getIsSelected() } - handleChange = (event: Event) => { + handleClick = (event: Event) => { this.row.getToggleSelectedHandler()(event) } @@ -243,7 +274,7 @@ class SelectionRowCheckbox extends Component< } diff --git a/docs/framework/lit/guide/custom-features.md b/docs/framework/lit/guide/custom-features.md index a6044f57a0..9ce634b682 100644 --- a/docs/framework/lit/guide/custom-features.md +++ b/docs/framework/lit/guide/custom-features.md @@ -50,6 +50,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -68,6 +74,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -97,9 +109,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+#### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ #### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/lit/guide/migrating.md b/docs/framework/lit/guide/migrating.md index e32cc9d288..1985e972fa 100644 --- a/docs/framework/lit/guide/migrating.md +++ b/docs/framework/lit/guide/migrating.md @@ -624,6 +624,11 @@ If you were accessing this internal API, you can now use it without the undersco ### Row Selection API Changes +> [!WARNING] +> **Minor breaking change:** `row.getToggleSelectedHandler()` now enables inclusive Shift range selection by default when `rowSelectionFeature` is enabled. Existing checkboxes or rows wired through this handler establish an anchor on an ordinary interaction and select or deselect the current display-order range on a Shift interaction. Direct `row.toggleSelected()` calls are unchanged. +> +> Set `enableRowRangeSelection: false` to preserve the previous non-range handler behavior. The handler must receive an event that exposes Shift directly or through `nativeEvent`; see [Shift Range Selection](./row-selection.md#shift-range-selection). + The "some rows selected" checks were simplified to mean "at least one row is selected": | API | v8 | v9 | diff --git a/docs/framework/lit/guide/row-selection.md b/docs/framework/lit/guide/row-selection.md index eb3f716438..3732ed10b7 100644 --- a/docs/framework/lit/guide/row-selection.md +++ b/docs/framework/lit/guide/row-selection.md @@ -184,6 +184,37 @@ const table = this.tableController.table({ }) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind a Lit checkbox handler with `@click`, not `@change`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +const table = this.tableController.table({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +}) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -212,7 +243,7 @@ html` .checked=${row.getIsSelected()} ?disabled=${!row.getCanSelect()} .indeterminate=${row.getIsSomeSelected()} - @change=${row.getToggleSelectedHandler()} + @click=${row.getToggleSelectedHandler()} /> ` ``` diff --git a/docs/framework/preact/guide/custom-features.md b/docs/framework/preact/guide/custom-features.md index e873c80907..d12982e12d 100644 --- a/docs/framework/preact/guide/custom-features.md +++ b/docs/framework/preact/guide/custom-features.md @@ -58,6 +58,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -76,6 +82,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -105,9 +117,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+##### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ ##### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/preact/guide/migrating.md b/docs/framework/preact/guide/migrating.md index b7ed34804c..ec7e766277 100644 --- a/docs/framework/preact/guide/migrating.md +++ b/docs/framework/preact/guide/migrating.md @@ -608,6 +608,11 @@ If you were accessing this internal API, you can now use it without the undersco ### Row Selection API Changes +> [!WARNING] +> **Minor breaking change:** `row.getToggleSelectedHandler()` now enables inclusive Shift range selection by default when `rowSelectionFeature` is enabled. Existing checkboxes or rows wired through this handler establish an anchor on an ordinary interaction and select or deselect the current display-order range on a Shift interaction. Direct `row.toggleSelected()` calls are unchanged. +> +> Set `enableRowRangeSelection: false` to preserve the previous non-range handler behavior. The handler must receive an event that exposes Shift directly or through `nativeEvent`; see [Shift Range Selection](./row-selection.md#shift-range-selection). + The "some rows selected" checks were simplified to mean "at least one row is selected": | API | v8 | v9 | diff --git a/docs/framework/preact/guide/row-selection.md b/docs/framework/preact/guide/row-selection.md index d693c4a005..28663a488c 100644 --- a/docs/framework/preact/guide/row-selection.md +++ b/docs/framework/preact/guide/row-selection.md @@ -167,6 +167,37 @@ const table = useTable({ }) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind a Preact checkbox handler with `onClick`, not `onChange`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +const table = useTable({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +}) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -196,7 +227,7 @@ const columns = [ ), }, diff --git a/docs/framework/preact/guide/table-state.md b/docs/framework/preact/guide/table-state.md index 17d6795aa3..8d1d9c0a29 100644 --- a/docs/framework/preact/guide/table-state.md +++ b/docs/framework/preact/guide/table-state.md @@ -175,7 +175,7 @@ You can also subscribe directly to a single atom and select one value from it: )} diff --git a/docs/framework/react/guide/column-visibility.md b/docs/framework/react/guide/column-visibility.md index 9addb144b9..b11d4c9d23 100644 --- a/docs/framework/react/guide/column-visibility.md +++ b/docs/framework/react/guide/column-visibility.md @@ -139,6 +139,11 @@ There are several column API methods that are useful for rendering column visibi - `column.getToggleVisibilityHandler` - Shortcut for hooking up the `column.toggleVisibility` method to a UI event handler. ```tsx +const columnLabels: Record = { + firstName: 'First Name', + lastName: 'Last Name', +} + { table.getAllColumns().map((column) => ( )) } ``` +> **Note**: `column.columnDef.header` is a header render template. It can be a +> string, JSX, or a function that needs a header context and should be rendered +> with `flexRender` when you are rendering actual table headers. A column +> visibility menu is usually rendering columns rather than header objects, and a +> hidden column may not have an active header context. For visibility toggles, +> prefer a stable text label such as a custom map of labels keyed by column ID, +> typed `columnDef.meta` (for example `column.columnDef.meta.label`), or +> `column.id`. + ### Column Visibility Aware Table APIs When you render your header, body, and footer cells, there are a lot of API options available. You may see APIs like `table.getAllLeafColumns` and `row.getAllCells`, but if you use these APIs, they will not take column visibility into account. Instead, you need to use the "visible" variants of these APIs, such as `table.getVisibleLeafColumns` and `row.getVisibleCells`. diff --git a/docs/framework/react/guide/custom-features.md b/docs/framework/react/guide/custom-features.md index 9c864cc624..1a7bbac393 100644 --- a/docs/framework/react/guide/custom-features.md +++ b/docs/framework/react/guide/custom-features.md @@ -58,6 +58,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -76,6 +82,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -105,9 +117,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+##### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ ##### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/react/guide/migrating.md b/docs/framework/react/guide/migrating.md index e18d0aaa82..173d25b63f 100644 --- a/docs/framework/react/guide/migrating.md +++ b/docs/framework/react/guide/migrating.md @@ -940,6 +940,11 @@ If you were accessing this internal API, you can now use it without the undersco ### Row Selection API Changes +> [!WARNING] +> **Minor breaking change:** `row.getToggleSelectedHandler()` now enables inclusive Shift range selection by default when `rowSelectionFeature` is enabled. Existing checkboxes or rows wired through this handler establish an anchor on an ordinary interaction and select or deselect the current display-order range on a Shift interaction. Direct `row.toggleSelected()` calls are unchanged. +> +> Set `enableRowRangeSelection: false` to preserve the previous non-range handler behavior. The handler must receive an event that exposes Shift directly or through `nativeEvent`; see [Shift Range Selection](./row-selection.md#shift-range-selection). + The "some rows selected" checks were simplified to mean "at least one row is selected": | API | Table V8 | Table V9 | diff --git a/docs/framework/react/guide/row-selection.md b/docs/framework/react/guide/row-selection.md index ac14d4f8a1..2b2e49d5a5 100644 --- a/docs/framework/react/guide/row-selection.md +++ b/docs/framework/react/guide/row-selection.md @@ -167,6 +167,38 @@ const table = useTable({ }) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +React checkbox `onChange` events expose the underlying click through `nativeEvent`, so the handler receives the Shift modifier in the examples below. + +```ts +const table = useTable({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as React.MouseEvent).metaKey), +}) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```tsx + +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. diff --git a/docs/framework/solid/guide/custom-features.md b/docs/framework/solid/guide/custom-features.md index 0b7d5c2cda..6f04b145f2 100644 --- a/docs/framework/solid/guide/custom-features.md +++ b/docs/framework/solid/guide/custom-features.md @@ -52,6 +52,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -70,6 +76,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -99,9 +111,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+#### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ #### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/solid/guide/migrating.md b/docs/framework/solid/guide/migrating.md index 338a89adf1..f8418299a5 100644 --- a/docs/framework/solid/guide/migrating.md +++ b/docs/framework/solid/guide/migrating.md @@ -579,6 +579,11 @@ If you were accessing this internal API, you can now use it without the undersco ### Row Selection API Changes +> [!WARNING] +> **Minor breaking change:** `row.getToggleSelectedHandler()` now enables inclusive Shift range selection by default when `rowSelectionFeature` is enabled. Existing checkboxes or rows wired through this handler establish an anchor on an ordinary interaction and select or deselect the current display-order range on a Shift interaction. Direct `row.toggleSelected()` calls are unchanged. +> +> Set `enableRowRangeSelection: false` to preserve the previous non-range handler behavior. The handler must receive an event that exposes Shift directly or through `nativeEvent`; see [Shift Range Selection](./row-selection.md#shift-range-selection). + The "some rows selected" checks were simplified to mean "at least one row is selected": | API | v8 | v9 | diff --git a/docs/framework/solid/guide/row-selection.md b/docs/framework/solid/guide/row-selection.md index b7ae61473a..267f94d4ea 100644 --- a/docs/framework/solid/guide/row-selection.md +++ b/docs/framework/solid/guide/row-selection.md @@ -173,6 +173,37 @@ const table = createTable({ }) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind a Solid checkbox handler with `onClick`, not `onChange`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +const table = createTable({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +}) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -202,7 +233,7 @@ const columns = [ ), }, diff --git a/docs/framework/solid/guide/table-state.md b/docs/framework/solid/guide/table-state.md index 05bb1a4188..1711f4d7bb 100644 --- a/docs/framework/solid/guide/table-state.md +++ b/docs/framework/solid/guide/table-state.md @@ -158,7 +158,7 @@ Use `table.Subscribe` when you want a specific part of the Solid tree to create diff --git a/docs/framework/svelte/guide/custom-features.md b/docs/framework/svelte/guide/custom-features.md index 280d13a4c5..8ceae7e174 100644 --- a/docs/framework/svelte/guide/custom-features.md +++ b/docs/framework/svelte/guide/custom-features.md @@ -52,6 +52,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -70,6 +76,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -99,9 +111,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+#### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ #### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/svelte/guide/migrating.md b/docs/framework/svelte/guide/migrating.md index 9a2ce78326..2a43cec883 100644 --- a/docs/framework/svelte/guide/migrating.md +++ b/docs/framework/svelte/guide/migrating.md @@ -657,6 +657,11 @@ If you were accessing this internal API, you can now use it without the undersco ### Row Selection API Changes +> [!WARNING] +> **Minor breaking change:** `row.getToggleSelectedHandler()` now enables inclusive Shift range selection by default when `rowSelectionFeature` is enabled. Existing checkboxes or rows wired through this handler establish an anchor on an ordinary interaction and select or deselect the current display-order range on a Shift interaction. Direct `row.toggleSelected()` calls are unchanged. +> +> Set `enableRowRangeSelection: false` to preserve the previous non-range handler behavior. The handler must receive an event that exposes Shift directly or through `nativeEvent`; see [Shift Range Selection](./row-selection.md#shift-range-selection). + The "some rows selected" checks were simplified to mean "at least one row is selected": | API | v8 | v9 | diff --git a/docs/framework/svelte/guide/row-selection.md b/docs/framework/svelte/guide/row-selection.md index 9401629a1b..8c960280ed 100644 --- a/docs/framework/svelte/guide/row-selection.md +++ b/docs/framework/svelte/guide/row-selection.md @@ -175,6 +175,37 @@ const table = createTable({ }) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind a Svelte checkbox handler with `onclick`, not `onchange`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +const table = createTable({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +}) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -217,7 +248,7 @@ The `indeterminate` checkbox property cannot be set from markup, so define a sma checked={row.getIsSelected()} disabled={!row.getCanSelect()} use:setIndeterminate={!row.getIsSelected() && row.getIsSomeSelected()} - onchange={row.getToggleSelectedHandler()} + onclick={row.getToggleSelectedHandler()} /> ``` diff --git a/docs/framework/vue/guide/custom-features.md b/docs/framework/vue/guide/custom-features.md index 17bc3335ed..3899e7b94c 100644 --- a/docs/framework/vue/guide/custom-features.md +++ b/docs/framework/vue/guide/custom-features.md @@ -52,6 +52,12 @@ export interface TableFeature { constructTableAPIs?: ( table: Table_Internal, ) => void + initTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void getDefaultColumnDef?: < TFeatures extends TableFeatures, TData extends RowData, @@ -70,6 +76,12 @@ export interface TableFeature { >( row: Row, ) => void + resetTableInstanceData?: < + TFeatures extends TableFeatures, + TData extends RowData, + >( + table: Table_Internal, + ) => void } ``` @@ -99,9 +111,19 @@ The `getInitialState` method in a table feature is responsible for setting the d
+#### initTableInstanceData and resetTableInstanceData + +Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook. + +Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`. + +Keep API assignment in `constructTableAPIs`; initialization and reset hooks are for data owned by the feature. + +
+ #### constructTableAPIs -The `constructTableAPIs` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature. +The `constructTableAPIs` method in a table feature is exclusively responsible for adding methods to the `table` instance. It runs after all feature-owned table instance data has been initialized. For example, in the [Row Selection](https://github.com/TanStack/table/blob/beta/packages/table-core/src/features/row-selection/rowSelectionFeature.ts) feature, the `constructTableAPIs` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
diff --git a/docs/framework/vue/guide/migrating.md b/docs/framework/vue/guide/migrating.md index 99b00107a4..f305625497 100644 --- a/docs/framework/vue/guide/migrating.md +++ b/docs/framework/vue/guide/migrating.md @@ -599,6 +599,11 @@ If you were accessing this internal API, you can now use it without the undersco ### Row Selection API Changes +> [!WARNING] +> **Minor breaking change:** `row.getToggleSelectedHandler()` now enables inclusive Shift range selection by default when `rowSelectionFeature` is enabled. Existing checkboxes or rows wired through this handler establish an anchor on an ordinary interaction and select or deselect the current display-order range on a Shift interaction. Direct `row.toggleSelected()` calls are unchanged. +> +> Set `enableRowRangeSelection: false` to preserve the previous non-range handler behavior. The handler must receive an event that exposes Shift directly or through `nativeEvent`; see [Shift Range Selection](./row-selection.md#shift-range-selection). + The "some rows selected" checks were simplified to mean "at least one row is selected": | API | v8 | v9 | diff --git a/docs/framework/vue/guide/row-selection.md b/docs/framework/vue/guide/row-selection.md index 1595afdc20..3ce5569450 100644 --- a/docs/framework/vue/guide/row-selection.md +++ b/docs/framework/vue/guide/row-selection.md @@ -172,6 +172,37 @@ const table = useTable({ }) ``` +### Shift Range Selection + +`row.getToggleSelectedHandler()` supports Shift range selection by default. After an ordinary selectable-row interaction establishes an anchor, Shift-selecting another row selects or deselects the inclusive interval between them. The clicked checkbox's resulting checked value controls the whole range, and the clicked endpoint becomes the anchor for the next Shift interaction. + +The handler recognizes Shift when the event exposes either `event.shiftKey` or `event.nativeEvent.shiftKey`. You can disable range behavior or replace event detection: + +Bind a Vue checkbox handler with `@click`, not `@change`, so the handler receives the click event and its `shiftKey` modifier. + +```ts +const table = useTable({ + // ... + enableRowRangeSelection: false, + + // For example, use the platform modifier instead of Shift: + // isRowRangeSelectionEvent: event => + // Boolean((event as { metaKey?: boolean }).metaKey), +}) +``` + +Range selection follows the table's current logical display order, including filtering, grouping, sorting, and expansion. With client-side pagination, ranges can cross pages because the complete pre-pagination order is used. With manual/server pagination, only rows loaded in the current `data` can participate. + +By default, a parent encountered in a range recursively toggles its selectable descendants when sub-row selection is enabled. Pass `selectChildren: false` when only rows explicitly present in the display-order interval should change: + +```ts +const handler = row.getToggleSelectedHandler({ + selectChildren: false, +}) +``` + +The interaction anchor is preserved across sorting, filtering, grouping, expansion, pagination, and data updates while its row id remains in the display order. If filtering or data replacement removes the anchor, the next Shift interaction falls back to an ordinary row toggle and establishes a new anchor. `resetRowSelection`, either select-all API, and `table.reset()` clear the anchor. Direct calls to `row.toggleSelected()` or `table.setRowSelection()`, and external controlled-state changes, do not establish or move it. + ### Render Row Selection UI TanStack table does not dictate how you should render your row selection UI. You can use checkboxes, radio buttons, or simply hook up click events to the row itself. The table instance provides a few APIs to help you render your row selection UI. @@ -199,7 +230,7 @@ If you need more granular control over these function handlers, you can always j :checked="row.getIsSelected()" :disabled="!row.getCanSelect()" :indeterminate="row.getIsSomeSelected()" - @change="row.getToggleSelectedHandler()?.($event)" + @click="row.getToggleSelectedHandler()?.($event)" /> ``` diff --git a/docs/framework/vue/guide/table-state.md b/docs/framework/vue/guide/table-state.md index b4a07c7042..5ea2b6184f 100644 --- a/docs/framework/vue/guide/table-state.md +++ b/docs/framework/vue/guide/table-state.md @@ -157,7 +157,7 @@ You can also call it as a plain function inside a render function: diff --git a/docs/guide/rows.md b/docs/guide/rows.md index ce1c38d124..f65768f8f6 100644 --- a/docs/guide/rows.md +++ b/docs/guide/rows.md @@ -55,6 +55,25 @@ const table = useTable({ > Note: In some features like grouping and expanding, the `row.id` will have additional string appended to it. +### Row Numbers and Display Indexes + +When displaying a row-number column, use `row.getDisplayIndex()` instead of `row.index`. The display index follows the table's current logical display order, including filtering, grouping, sorting, and expansion. `row.index` is the row's position within its parent array when the row is created, so it does not change to reflect the current display pipeline. + +```js +const rowNumberColumn = columnHelper.display({ + id: 'rowNumber', + header: '#', + cell: ({ row }) => { + const displayIndex = row.getDisplayIndex() + return displayIndex === -1 ? '' : displayIndex + 1 + }, +}) +``` + +`row.getDisplayIndex()` returns a zero-based index before pagination, or `-1` when the row is not present in the current display order. + +> Never read `row._displayIndexCache` directly. It is an internal implementation cache that can be stale until display order is recomputed. `row.getDisplayIndex()` refreshes and validates the cached position before returning it. + ### Access Row Values The recommended way to access data values from a row is to use either the `row.getValue` or `row.renderValue` APIs. Using either of these APIs will cache the results of the accessor functions and keep rendering efficient. The only difference between the two is that `row.renderValue` will return either the value or the `renderFallbackValue` if the value is undefined, whereas `row.getValue` will return the value or `undefined` if the value is undefined. diff --git a/docs/reference/index/index.md b/docs/reference/index/index.md index da3eb551f6..499fa3bd39 100644 --- a/docs/reference/index/index.md +++ b/docs/reference/index/index.md @@ -171,6 +171,7 @@ title: index - [TableState\_RowPinning](interfaces/TableState_RowPinning.md) - [TableState\_RowSelection](interfaces/TableState_RowSelection.md) - [TableState\_RowSorting](interfaces/TableState_RowSorting.md) +- [ToggleSelectedOptions](interfaces/ToggleSelectedOptions.md) ## Type Aliases diff --git a/docs/reference/index/interfaces/Row_Core.md b/docs/reference/index/interfaces/Row_Core.md index b4aebd3b84..9419241222 100644 --- a/docs/reference/index/interfaces/Row_Core.md +++ b/docs/reference/index/interfaces/Row_Core.md @@ -43,7 +43,15 @@ Defined in: [core/rows/coreRowsFeature.types.ts:12](https://github.com/TanStack/ _displayIndexCache: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:16](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L16) +Defined in: [core/rows/coreRowsFeature.types.ts:25](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L25) + +**`Internal`** + +Internal cache used while resolving the current display order. + +This value may be stale until display order is recomputed. Use +`row.getDisplayIndex()` instead; it refreshes and validates the cached +position before returning it. #### Inherited from @@ -57,7 +65,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:16](https://github.com/TanStack/ _uniqueValuesCache: Record; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:17](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L17) +Defined in: [core/rows/coreRowsFeature.types.ts:26](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L26) #### Inherited from @@ -71,7 +79,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:17](https://github.com/TanStack/ _valuesCache: Record; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:18](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L18) +Defined in: [core/rows/coreRowsFeature.types.ts:27](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L27) #### Inherited from @@ -85,7 +93,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:18](https://github.com/TanStack/ depth: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:22](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L22) +Defined in: [core/rows/coreRowsFeature.types.ts:31](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L31) The depth of the row (if nested or grouped) relative to the root row array. @@ -101,7 +109,7 @@ The depth of the row (if nested or grouped) relative to the root row array. getAllCells: () => Cell[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:69](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L69) +Defined in: [core/rows/coreRowsFeature.types.ts:80](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L80) Builds one cell for each leaf column, including cells for hidden columns. @@ -121,7 +129,7 @@ Builds one cell for each leaf column, including cells for hidden columns. getAllCellsByColumnId: () => Record>; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:65](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L65) +Defined in: [core/rows/coreRowsFeature.types.ts:76](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L76) Builds a lookup of this row's cells keyed by leaf column id. @@ -141,10 +149,12 @@ Builds a lookup of this row's cells keyed by leaf column id. getDisplayIndex: () => number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:61](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L61) +Defined in: [core/rows/coreRowsFeature.types.ts:72](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L72) Returns the zero-based index of the row in the current display order -before pagination, or `-1` if the row is not in that model. +before pagination, or `-1` if the row is not in that model. Use this for +display row-number columns instead of `row.index` or the internal +`_displayIndexCache` field. #### Returns @@ -162,7 +172,7 @@ before pagination, or `-1` if the row is not in that model. getLeafRows: () => Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:73](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L73) +Defined in: [core/rows/coreRowsFeature.types.ts:84](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L84) Returns the leaf rows for the row, not including any parent rows. @@ -182,7 +192,7 @@ Returns the leaf rows for the row, not including any parent rows. getParentRow: () => Row | undefined; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:77](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L77) +Defined in: [core/rows/coreRowsFeature.types.ts:88](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L88) Returns the parent row for the row, if it exists. @@ -202,7 +212,7 @@ Returns the parent row for the row, if it exists. getParentRows: () => Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:81](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L81) +Defined in: [core/rows/coreRowsFeature.types.ts:92](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L92) Returns the parent rows for the row, all the way up to a root row. @@ -222,7 +232,7 @@ Returns the parent rows for the row, all the way up to a root row. getUniqueValues: (columnId) => TValue[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:85](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L85) +Defined in: [core/rows/coreRowsFeature.types.ts:96](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L96) Reads the values this row contributes to faceting/grouping for a column. @@ -254,7 +264,7 @@ Reads the values this row contributes to faceting/grouping for a column. getValue: (columnId) => TValue; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:89](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L89) +Defined in: [core/rows/coreRowsFeature.types.ts:100](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L100) Reads this row's accessor value for a column id and caches the result. @@ -286,7 +296,7 @@ Reads this row's accessor value for a column id and caches the result. id: string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:26](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L26) +Defined in: [core/rows/coreRowsFeature.types.ts:35](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L35) The resolved unique identifier for the row resolved via the `options.getRowId` option. Defaults to the row's index (or relative index if it is a subRow). @@ -302,7 +312,7 @@ The resolved unique identifier for the row resolved via the `options.getRowId` o index: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:30](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L30) +Defined in: [core/rows/coreRowsFeature.types.ts:39](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L39) The index of the row within its parent array (or the root data array). @@ -318,7 +328,7 @@ The index of the row within its parent array (or the root data array). original: TData; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:34](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L34) +Defined in: [core/rows/coreRowsFeature.types.ts:43](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L43) The original row object provided to the table. If the row is a grouped row, the original row object will be the first original in the group. @@ -334,7 +344,7 @@ The original row object provided to the table. If the row is a grouped row, the optional originalSubRows: readonly TData[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:38](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L38) +Defined in: [core/rows/coreRowsFeature.types.ts:47](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L47) An array of the original subRows as returned by the `options.getSubRows` option. @@ -350,7 +360,7 @@ An array of the original subRows as returned by the `options.getSubRows` option. optional parentId: string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:42](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L42) +Defined in: [core/rows/coreRowsFeature.types.ts:51](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L51) If nested, this row's parent row id. @@ -366,7 +376,7 @@ If nested, this row's parent row id. renderValue: (columnId) => TValue; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:93](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L93) +Defined in: [core/rows/coreRowsFeature.types.ts:104](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L104) Renders the value for the row in a given columnId the same as `getValue`, but will return the `renderFallbackValue` if no value is found. @@ -398,7 +408,7 @@ Renders the value for the row in a given columnId the same as `getValue`, but wi subRows: Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:46](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L46) +Defined in: [core/rows/coreRowsFeature.types.ts:55](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L55) An array of subRows for the row as returned and created by the `options.getSubRows` option. @@ -414,7 +424,7 @@ An array of subRows for the row as returned and created by the `options.getSubRo table: Table_Internal; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:50](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L50) +Defined in: [core/rows/coreRowsFeature.types.ts:59](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L59) Reference to the parent table instance. diff --git a/docs/reference/index/interfaces/Row_CoreProperties.md b/docs/reference/index/interfaces/Row_CoreProperties.md index 615b0172eb..c89fb5e6ad 100644 --- a/docs/reference/index/interfaces/Row_CoreProperties.md +++ b/docs/reference/index/interfaces/Row_CoreProperties.md @@ -39,7 +39,15 @@ Defined in: [core/rows/coreRowsFeature.types.ts:12](https://github.com/TanStack/ _displayIndexCache: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:16](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L16) +Defined in: [core/rows/coreRowsFeature.types.ts:25](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L25) + +**`Internal`** + +Internal cache used while resolving the current display order. + +This value may be stale until display order is recomputed. Use +`row.getDisplayIndex()` instead; it refreshes and validates the cached +position before returning it. *** @@ -49,7 +57,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:16](https://github.com/TanStack/ _uniqueValuesCache: Record; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:17](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L17) +Defined in: [core/rows/coreRowsFeature.types.ts:26](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L26) *** @@ -59,7 +67,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:17](https://github.com/TanStack/ _valuesCache: Record; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:18](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L18) +Defined in: [core/rows/coreRowsFeature.types.ts:27](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L27) *** @@ -69,7 +77,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:18](https://github.com/TanStack/ depth: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:22](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L22) +Defined in: [core/rows/coreRowsFeature.types.ts:31](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L31) The depth of the row (if nested or grouped) relative to the root row array. @@ -81,7 +89,7 @@ The depth of the row (if nested or grouped) relative to the root row array. id: string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:26](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L26) +Defined in: [core/rows/coreRowsFeature.types.ts:35](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L35) The resolved unique identifier for the row resolved via the `options.getRowId` option. Defaults to the row's index (or relative index if it is a subRow). @@ -93,7 +101,7 @@ The resolved unique identifier for the row resolved via the `options.getRowId` o index: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:30](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L30) +Defined in: [core/rows/coreRowsFeature.types.ts:39](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L39) The index of the row within its parent array (or the root data array). @@ -105,7 +113,7 @@ The index of the row within its parent array (or the root data array). original: TData; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:34](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L34) +Defined in: [core/rows/coreRowsFeature.types.ts:43](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L43) The original row object provided to the table. If the row is a grouped row, the original row object will be the first original in the group. @@ -117,7 +125,7 @@ The original row object provided to the table. If the row is a grouped row, the optional originalSubRows: readonly TData[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:38](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L38) +Defined in: [core/rows/coreRowsFeature.types.ts:47](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L47) An array of the original subRows as returned by the `options.getSubRows` option. @@ -129,7 +137,7 @@ An array of the original subRows as returned by the `options.getSubRows` option. optional parentId: string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:42](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L42) +Defined in: [core/rows/coreRowsFeature.types.ts:51](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L51) If nested, this row's parent row id. @@ -141,7 +149,7 @@ If nested, this row's parent row id. subRows: Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:46](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L46) +Defined in: [core/rows/coreRowsFeature.types.ts:55](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L55) An array of subRows for the row as returned and created by the `options.getSubRows` option. @@ -153,6 +161,6 @@ An array of subRows for the row as returned and created by the `options.getSubRo table: Table_Internal; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:50](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L50) +Defined in: [core/rows/coreRowsFeature.types.ts:59](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L59) Reference to the parent table instance. diff --git a/docs/reference/index/interfaces/Row_Row.md b/docs/reference/index/interfaces/Row_Row.md index 89b3139b6d..3855e2e13a 100644 --- a/docs/reference/index/interfaces/Row_Row.md +++ b/docs/reference/index/interfaces/Row_Row.md @@ -5,7 +5,7 @@ title: Row_Row # Interface: Row\_Row\ -Defined in: [core/rows/coreRowsFeature.types.ts:53](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L53) +Defined in: [core/rows/coreRowsFeature.types.ts:62](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L62) ## Extends @@ -47,7 +47,15 @@ Defined in: [core/rows/coreRowsFeature.types.ts:12](https://github.com/TanStack/ _displayIndexCache: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:16](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L16) +Defined in: [core/rows/coreRowsFeature.types.ts:25](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L25) + +**`Internal`** + +Internal cache used while resolving the current display order. + +This value may be stale until display order is recomputed. Use +`row.getDisplayIndex()` instead; it refreshes and validates the cached +position before returning it. #### Inherited from @@ -61,7 +69,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:16](https://github.com/TanStack/ _uniqueValuesCache: Record; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:17](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L17) +Defined in: [core/rows/coreRowsFeature.types.ts:26](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L26) #### Inherited from @@ -75,7 +83,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:17](https://github.com/TanStack/ _valuesCache: Record; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:18](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L18) +Defined in: [core/rows/coreRowsFeature.types.ts:27](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L27) #### Inherited from @@ -89,7 +97,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:18](https://github.com/TanStack/ depth: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:22](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L22) +Defined in: [core/rows/coreRowsFeature.types.ts:31](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L31) The depth of the row (if nested or grouped) relative to the root row array. @@ -105,7 +113,7 @@ The depth of the row (if nested or grouped) relative to the root row array. getAllCells: () => Cell[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:69](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L69) +Defined in: [core/rows/coreRowsFeature.types.ts:80](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L80) Builds one cell for each leaf column, including cells for hidden columns. @@ -121,7 +129,7 @@ Builds one cell for each leaf column, including cells for hidden columns. getAllCellsByColumnId: () => Record>; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:65](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L65) +Defined in: [core/rows/coreRowsFeature.types.ts:76](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L76) Builds a lookup of this row's cells keyed by leaf column id. @@ -137,10 +145,12 @@ Builds a lookup of this row's cells keyed by leaf column id. getDisplayIndex: () => number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:61](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L61) +Defined in: [core/rows/coreRowsFeature.types.ts:72](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L72) Returns the zero-based index of the row in the current display order -before pagination, or `-1` if the row is not in that model. +before pagination, or `-1` if the row is not in that model. Use this for +display row-number columns instead of `row.index` or the internal +`_displayIndexCache` field. #### Returns @@ -154,7 +164,7 @@ before pagination, or `-1` if the row is not in that model. getLeafRows: () => Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:73](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L73) +Defined in: [core/rows/coreRowsFeature.types.ts:84](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L84) Returns the leaf rows for the row, not including any parent rows. @@ -170,7 +180,7 @@ Returns the leaf rows for the row, not including any parent rows. getParentRow: () => Row | undefined; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:77](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L77) +Defined in: [core/rows/coreRowsFeature.types.ts:88](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L88) Returns the parent row for the row, if it exists. @@ -186,7 +196,7 @@ Returns the parent row for the row, if it exists. getParentRows: () => Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:81](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L81) +Defined in: [core/rows/coreRowsFeature.types.ts:92](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L92) Returns the parent rows for the row, all the way up to a root row. @@ -202,7 +212,7 @@ Returns the parent rows for the row, all the way up to a root row. getUniqueValues: (columnId) => TValue[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:85](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L85) +Defined in: [core/rows/coreRowsFeature.types.ts:96](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L96) Reads the values this row contributes to faceting/grouping for a column. @@ -230,7 +240,7 @@ Reads the values this row contributes to faceting/grouping for a column. getValue: (columnId) => TValue; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:89](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L89) +Defined in: [core/rows/coreRowsFeature.types.ts:100](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L100) Reads this row's accessor value for a column id and caches the result. @@ -258,7 +268,7 @@ Reads this row's accessor value for a column id and caches the result. id: string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:26](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L26) +Defined in: [core/rows/coreRowsFeature.types.ts:35](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L35) The resolved unique identifier for the row resolved via the `options.getRowId` option. Defaults to the row's index (or relative index if it is a subRow). @@ -274,7 +284,7 @@ The resolved unique identifier for the row resolved via the `options.getRowId` o index: number; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:30](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L30) +Defined in: [core/rows/coreRowsFeature.types.ts:39](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L39) The index of the row within its parent array (or the root data array). @@ -290,7 +300,7 @@ The index of the row within its parent array (or the root data array). original: TData; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:34](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L34) +Defined in: [core/rows/coreRowsFeature.types.ts:43](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L43) The original row object provided to the table. If the row is a grouped row, the original row object will be the first original in the group. @@ -306,7 +316,7 @@ The original row object provided to the table. If the row is a grouped row, the optional originalSubRows: readonly TData[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:38](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L38) +Defined in: [core/rows/coreRowsFeature.types.ts:47](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L47) An array of the original subRows as returned by the `options.getSubRows` option. @@ -322,7 +332,7 @@ An array of the original subRows as returned by the `options.getSubRows` option. optional parentId: string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:42](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L42) +Defined in: [core/rows/coreRowsFeature.types.ts:51](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L51) If nested, this row's parent row id. @@ -338,7 +348,7 @@ If nested, this row's parent row id. renderValue: (columnId) => TValue; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:93](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L93) +Defined in: [core/rows/coreRowsFeature.types.ts:104](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L104) Renders the value for the row in a given columnId the same as `getValue`, but will return the `renderFallbackValue` if no value is found. @@ -366,7 +376,7 @@ Renders the value for the row in a given columnId the same as `getValue`, but wi subRows: Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:46](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L46) +Defined in: [core/rows/coreRowsFeature.types.ts:55](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L55) An array of subRows for the row as returned and created by the `options.getSubRows` option. @@ -382,7 +392,7 @@ An array of subRows for the row as returned and created by the `options.getSubRo table: Table_Internal; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:50](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L50) +Defined in: [core/rows/coreRowsFeature.types.ts:59](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L59) Reference to the parent table instance. diff --git a/docs/reference/index/interfaces/Row_RowSelection.md b/docs/reference/index/interfaces/Row_RowSelection.md index eb7225febc..013f581ef9 100644 --- a/docs/reference/index/interfaces/Row_RowSelection.md +++ b/docs/reference/index/interfaces/Row_RowSelection.md @@ -5,7 +5,7 @@ title: Row_RowSelection # Interface: Row\_RowSelection -Defined in: [features/row-selection/rowSelectionFeature.types.ts:54](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L54) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:77](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L77) ## Properties @@ -15,7 +15,7 @@ Defined in: [features/row-selection/rowSelectionFeature.types.ts:54](https://git getCanMultiSelect: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:58](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L58) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:81](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L81) Checks whether this row can be selected alongside other rows. @@ -31,7 +31,7 @@ Checks whether this row can be selected alongside other rows. getCanSelect: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:62](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L62) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:85](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L85) Checks whether this row can currently be selected. @@ -47,7 +47,7 @@ Checks whether this row can currently be selected. getCanSelectSubRows: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:66](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L66) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:89](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L89) Checks whether selecting this row should also select its subRows. @@ -63,7 +63,7 @@ Checks whether selecting this row should also select its subRows. getIsAllSubRowsSelected: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:70](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L70) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:93](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L93) Checks whether all selectable descendants are selected. @@ -79,7 +79,7 @@ Checks whether all selectable descendants are selected. getIsSelected: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:74](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L74) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:97](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L97) Checks whether this row id is selected. @@ -95,7 +95,7 @@ Checks whether this row id is selected. getIsSomeSelected: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:78](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L78) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:101](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L101) Checks whether some selectable descendants are selected. @@ -108,12 +108,21 @@ Checks whether some selectable descendants are selected. ### getToggleSelectedHandler() ```ts -getToggleSelectedHandler: () => (event) => void; +getToggleSelectedHandler: (opts?) => (event) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:82](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L82) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:108](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L108) Creates a checkbox-style handler that toggles this row's selected state. +Pass the original checkbox click event, or a framework event whose +`nativeEvent` is that click, so Shift range selection can detect the +modifier key. + +#### Parameters + +##### opts? + +[`ToggleSelectedOptions`](ToggleSelectedOptions.md) #### Returns @@ -139,7 +148,7 @@ Creates a checkbox-style handler that toggles this row's selected state. toggleSelected: (value?, opts?) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:86](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L86) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:114](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L114) Selects/deselects the row. @@ -151,9 +160,7 @@ Selects/deselects the row. ##### opts? -###### selectChildren? - -`boolean` +[`ToggleSelectedOptions`](ToggleSelectedOptions.md) #### Returns diff --git a/docs/reference/index/interfaces/TableFeature.md b/docs/reference/index/interfaces/TableFeature.md index 4da53a8f70..789458151c 100644 --- a/docs/reference/index/interfaces/TableFeature.md +++ b/docs/reference/index/interfaces/TableFeature.md @@ -186,14 +186,15 @@ mutable data. optional constructTableAPIs: (table) => void; ``` -Defined in: [types/TableFeatures.ts:374](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L374) +Defined in: [types/TableFeatures.ts:375](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L375) Adds feature APIs directly to the table instance. The table is a singleton, unlike rows, columns, headers, and cells, so table APIs are assigned directly instead of through a shared prototype. -This runs while the table is being constructed, after options and initial -state have been resolved. +This hook is exclusively for assigning table methods. It runs after +options, state atoms, and the store have been created and after every +feature's `initTableInstanceData` hook has completed. #### Type Parameters @@ -223,7 +224,7 @@ state have been resolved. optional getDefaultColumnDef: () => ColumnDefBase_All; ``` -Defined in: [types/TableFeatures.ts:384](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L384) +Defined in: [types/TableFeatures.ts:385](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L385) Returns default column definition options contributed by this feature. @@ -257,7 +258,7 @@ resolved, so users can override values supplied here. optional getDefaultTableOptions: (table) => Partial>; ``` -Defined in: [types/TableFeatures.ts:397](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L397) +Defined in: [types/TableFeatures.ts:398](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L398) Returns default table options contributed by this feature. @@ -294,7 +295,7 @@ here. optional getInitialState: (initialState) => TableState_All; ``` -Defined in: [types/TableFeatures.ts:411](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L411) +Defined in: [types/TableFeatures.ts:412](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L412) Returns this feature's initial table state. @@ -321,7 +322,7 @@ override feature defaults. optional initColumnInstanceData: (column) => void; ``` -Defined in: [types/TableFeatures.ts:420](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L420) +Defined in: [types/TableFeatures.ts:437](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L437) Initializes instance-specific data on each column. @@ -362,7 +363,7 @@ methods should be assigned via `assignColumnPrototype` instead. optional initRowInstanceData: (row) => void; ``` -Defined in: [types/TableFeatures.ts:435](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L435) +Defined in: [types/TableFeatures.ts:452](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L452) Initializes instance-specific data on each row. @@ -390,3 +391,78 @@ should be assigned via `assignRowPrototype` instead. #### Returns `void` + +*** + +### initTableInstanceData()? + +```ts +optional initTableInstanceData: (table) => void; +``` + +Defined in: [types/TableFeatures.ts:423](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L423) + +Initializes mutable, non-reactive data owned by this feature on the table +instance. + +This runs once during table construction after options, state atoms, and +the store are available, and before any feature's `constructTableAPIs` +hook runs. Use `constructTableAPIs` exclusively for assigning table +methods. Table resets do not rerun this hook; use +`resetTableInstanceData` to clear transient instance data instead. + +#### Type Parameters + +##### TFeatures + +`TFeatures` *extends* [`TableFeatures`](TableFeatures.md) + +##### TData + +`TData` *extends* [`RowData`](../type-aliases/RowData.md) + +#### Parameters + +##### table + +[`Table_Internal`](Table_Internal.md)\<`TFeatures`, `TData`\> + +#### Returns + +`void` + +*** + +### resetTableInstanceData()? + +```ts +optional resetTableInstanceData: (table) => void; +``` + +Defined in: [types/TableFeatures.ts:465](https://github.com/TanStack/table/blob/main/packages/table-core/src/types/TableFeatures.ts#L465) + +Resets mutable, non-reactive table-instance data owned by this feature. + +This runs after internally owned state atoms have been restored to +`table.initialState` by `table.reset()`. It is intended for transient +feature data, not table state slices or externally controlled state. + +#### Type Parameters + +##### TFeatures + +`TFeatures` *extends* [`TableFeatures`](TableFeatures.md) + +##### TData + +`TData` *extends* [`RowData`](../type-aliases/RowData.md) + +#### Parameters + +##### table + +[`Table_Internal`](Table_Internal.md)\<`TFeatures`, `TData`\> + +#### Returns + +`void` diff --git a/docs/reference/index/interfaces/TableOptions_Core.md b/docs/reference/index/interfaces/TableOptions_Core.md index 8852a160d6..dba585b96f 100644 --- a/docs/reference/index/interfaces/TableOptions_Core.md +++ b/docs/reference/index/interfaces/TableOptions_Core.md @@ -138,7 +138,7 @@ slots (`tableMeta`, `columnMeta`). optional getRowId: (originalRow, index, parent?) => string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:104](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L104) +Defined in: [core/rows/coreRowsFeature.types.ts:115](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L115) This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc. @@ -178,7 +178,7 @@ getRowId: row => row.userId optional getSubRows: (originalRow, index) => readonly TData[] | undefined; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:113](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L113) +Defined in: [core/rows/coreRowsFeature.types.ts:124](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L124) This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row. diff --git a/docs/reference/index/interfaces/TableOptions_RowSelection.md b/docs/reference/index/interfaces/TableOptions_RowSelection.md index d9da7211c6..6ceb05f3bb 100644 --- a/docs/reference/index/interfaces/TableOptions_RowSelection.md +++ b/docs/reference/index/interfaces/TableOptions_RowSelection.md @@ -5,7 +5,7 @@ title: TableOptions_RowSelection # Interface: TableOptions\_RowSelection\ -Defined in: [features/row-selection/rowSelectionFeature.types.ts:12](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L12) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:23](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L23) ## Type Parameters @@ -25,7 +25,7 @@ Defined in: [features/row-selection/rowSelectionFeature.types.ts:12](https://git optional enableMultiRowSelection: boolean | (row) => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:21](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L21) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:37](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L37) Allows rows to be selected alongside other rows. @@ -33,13 +33,26 @@ Provide a predicate to decide per row. Defaults to `true`. *** +### enableRowRangeSelection? + +```ts +optional enableRowRangeSelection: boolean; +``` + +Defined in: [features/row-selection/rowSelectionFeature.types.ts:31](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L31) + +Enables inclusive row range selection through +`row.getToggleSelectedHandler()`. Defaults to `true`. + +*** + ### enableRowSelection? ```ts optional enableRowSelection: boolean | (row) => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:27](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L27) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:43](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L43) Allows rows to be selected. @@ -53,7 +66,7 @@ Provide a predicate to decide per row. Defaults to `true`. optional enableSubRowSelection: boolean | (row) => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:34](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L34) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:50](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L50) Controls whether selecting a parent row also selects its subRows. @@ -62,13 +75,39 @@ grouping features and defaults to `true`. *** +### isRowRangeSelectionEvent()? + +```ts +optional isRowRangeSelectionEvent: (event) => boolean; +``` + +Defined in: [features/row-selection/rowSelectionFeature.types.ts:58](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L58) + +Determines whether a row-selection handler event should select or +deselect the inclusive range from the most recent handler interaction. + +By default, events with `shiftKey` directly on the event or on +`event.nativeEvent` are treated as range-selection events. + +#### Parameters + +##### event + +`unknown` + +#### Returns + +`boolean` + +*** + ### onRowSelectionChange? ```ts optional onRowSelectionChange: OnChangeFn; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:40](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L40) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:64](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L64) Called with an updater when row selection state changes. Pair this with `state.rowSelection` when using external state; external atoms can own the diff --git a/docs/reference/index/interfaces/TableOptions_Rows.md b/docs/reference/index/interfaces/TableOptions_Rows.md index 80701b9d8a..c26b792f9e 100644 --- a/docs/reference/index/interfaces/TableOptions_Rows.md +++ b/docs/reference/index/interfaces/TableOptions_Rows.md @@ -5,7 +5,7 @@ title: TableOptions_Rows # Interface: TableOptions\_Rows\ -Defined in: [core/rows/coreRowsFeature.types.ts:96](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L96) +Defined in: [core/rows/coreRowsFeature.types.ts:107](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L107) ## Extended by @@ -29,7 +29,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:96](https://github.com/TanStack/ optional getRowId: (originalRow, index, parent?) => string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:104](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L104) +Defined in: [core/rows/coreRowsFeature.types.ts:115](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L115) This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc. @@ -65,7 +65,7 @@ getRowId: row => row.userId optional getSubRows: (originalRow, index) => readonly TData[] | undefined; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:113](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L113) +Defined in: [core/rows/coreRowsFeature.types.ts:124](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L124) This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row. diff --git a/docs/reference/index/interfaces/TableState_All.md b/docs/reference/index/interfaces/TableState_All.md index 4e25fe4c00..c2701aa8de 100644 --- a/docs/reference/index/interfaces/TableState_All.md +++ b/docs/reference/index/interfaces/TableState_All.md @@ -178,7 +178,7 @@ Defined in: [features/row-pinning/rowPinningFeature.types.ts:13](https://github. optional rowSelection: RowSelectionState; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:9](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L9) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:20](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L20) #### Inherited from diff --git a/docs/reference/index/interfaces/TableState_RowSelection.md b/docs/reference/index/interfaces/TableState_RowSelection.md index eb3ea16b29..12e78f7550 100644 --- a/docs/reference/index/interfaces/TableState_RowSelection.md +++ b/docs/reference/index/interfaces/TableState_RowSelection.md @@ -5,7 +5,7 @@ title: TableState_RowSelection # Interface: TableState\_RowSelection -Defined in: [features/row-selection/rowSelectionFeature.types.ts:8](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L8) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:19](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L19) ## Properties @@ -15,4 +15,4 @@ Defined in: [features/row-selection/rowSelectionFeature.types.ts:8](https://gith rowSelection: RowSelectionState; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:9](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L9) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:20](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L20) diff --git a/docs/reference/index/interfaces/Table_Core.md b/docs/reference/index/interfaces/Table_Core.md index 720d3a6866..54bd19a957 100644 --- a/docs/reference/index/interfaces/Table_Core.md +++ b/docs/reference/index/interfaces/Table_Core.md @@ -718,7 +718,7 @@ Table_RowModels.getPreSortedRowModel getRow: (id, searchAll?) => Row; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:134](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L134) +Defined in: [core/rows/coreRowsFeature.types.ts:145](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L145) Returns the row with the given ID. @@ -748,7 +748,7 @@ Returns the row with the given ID. getRowId: (_, index, parent?) => string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:130](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L130) +Defined in: [core/rows/coreRowsFeature.types.ts:141](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L141) #### Parameters @@ -802,7 +802,7 @@ Table_RowModels.getRowModel getRowsInDisplayOrder: () => Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:129](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L129) +Defined in: [core/rows/coreRowsFeature.types.ts:140](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L140) Returns the rows in the current display order and assigns their display indexes. When expanded rows bypass pagination, expanded descendants are @@ -897,13 +897,14 @@ options as plain resolved data instead of backing them with an atom. reset: () => void; ``` -Defined in: [core/table/coreTablesFeature.types.ts:234](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L234) +Defined in: [core/table/coreTablesFeature.types.ts:235](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L235) Resets the table's internal base atoms to `table.initialState`. Prefer feature-specific reset APIs, such as `resetPagination`, when a state slice may be owned by an external atom or needs that feature's blank/default -reset behavior. +reset behavior. After resetting internal atoms, this also invokes feature +reset hooks for mutable, transient table-instance data. #### Returns @@ -921,7 +922,7 @@ reset behavior. setOptions: (newOptions) => void; ``` -Defined in: [core/table/coreTablesFeature.types.ts:239](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L239) +Defined in: [core/table/coreTablesFeature.types.ts:240](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L240) Updates the table options by applying a value or updater to the current resolved options and then merging them through `options.mergeOptions`. diff --git a/docs/reference/index/interfaces/Table_Internal.md b/docs/reference/index/interfaces/Table_Internal.md index 8e04ed6e20..e29a2dd037 100644 --- a/docs/reference/index/interfaces/Table_Internal.md +++ b/docs/reference/index/interfaces/Table_Internal.md @@ -711,7 +711,7 @@ Table_RowModels.getPreSortedRowModel getRow: (id, searchAll?) => Row; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:134](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L134) +Defined in: [core/rows/coreRowsFeature.types.ts:145](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L145) Returns the row with the given ID. @@ -741,7 +741,7 @@ Returns the row with the given ID. getRowId: (_, index, parent?) => string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:130](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L130) +Defined in: [core/rows/coreRowsFeature.types.ts:141](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L141) #### Parameters @@ -795,7 +795,7 @@ Table_RowModels.getRowModel getRowsInDisplayOrder: () => Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:129](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L129) +Defined in: [core/rows/coreRowsFeature.types.ts:140](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L140) Returns the rows in the current display order and assigns their display indexes. When expanded rows bypass pagination, expanded descendants are @@ -958,13 +958,14 @@ Omit.optionsStore reset: () => void; ``` -Defined in: [core/table/coreTablesFeature.types.ts:234](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L234) +Defined in: [core/table/coreTablesFeature.types.ts:235](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L235) Resets the table's internal base atoms to `table.initialState`. Prefer feature-specific reset APIs, such as `resetPagination`, when a state slice may be owned by an external atom or needs that feature's blank/default -reset behavior. +reset behavior. After resetting internal atoms, this also invokes feature +reset hooks for mutable, transient table-instance data. #### Returns @@ -984,7 +985,7 @@ Omit.reset setOptions: (newOptions) => void; ``` -Defined in: [core/table/coreTablesFeature.types.ts:239](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L239) +Defined in: [core/table/coreTablesFeature.types.ts:240](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L240) Updates the table options by applying a value or updater to the current resolved options and then merging them through `options.mergeOptions`. diff --git a/docs/reference/index/interfaces/Table_RowSelection.md b/docs/reference/index/interfaces/Table_RowSelection.md index 934a348b3e..4735a3deaf 100644 --- a/docs/reference/index/interfaces/Table_RowSelection.md +++ b/docs/reference/index/interfaces/Table_RowSelection.md @@ -5,7 +5,7 @@ title: Table_RowSelection # Interface: Table\_RowSelection\ -Defined in: [features/row-selection/rowSelectionFeature.types.ts:89](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L89) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:117](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L117) ## Type Parameters @@ -19,13 +19,27 @@ Defined in: [features/row-selection/rowSelectionFeature.types.ts:89](https://git ## Properties +### \_lastSelectedRowId + +```ts +_lastSelectedRowId: string | null; +``` + +Defined in: [features/row-selection/rowSelectionFeature.types.ts:126](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L126) + +**`Internal`** + +The most recent row interacted with through the row selection handler. + +*** + ### getFilteredSelectedRowModel() ```ts getFilteredSelectedRowModel: () => RowModel; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:96](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L96) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:130](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L130) Builds a selected-row model from rows after filtering. @@ -41,7 +55,7 @@ Builds a selected-row model from rows after filtering. getGroupedSelectedRowModel: () => RowModel; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:100](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L100) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:134](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L134) Builds a selected-row model from rows after grouping. @@ -57,7 +71,7 @@ Builds a selected-row model from rows after grouping. getIsAllPageRowsSelected: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:108](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L108) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:142](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L142) Checks whether every selectable row on the current page is selected. @@ -73,7 +87,7 @@ Checks whether every selectable row on the current page is selected. getIsAllRowsSelected: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:112](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L112) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:146](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L146) Checks whether every selectable filtered row is selected. @@ -89,7 +103,7 @@ Checks whether every selectable filtered row is selected. getIsSomePageRowsSelected: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:116](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L116) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:150](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L150) Checks whether the current page has a partial row selection. @@ -105,7 +119,7 @@ Checks whether the current page has a partial row selection. getIsSomeRowsSelected: () => boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:120](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L120) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:154](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L154) Checks whether filtered rows have a partial row selection. @@ -121,7 +135,7 @@ Checks whether filtered rows have a partial row selection. getPreSelectedRowModel: () => RowModel; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:124](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L124) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:158](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L158) Returns the core row model of all rows before row selection has been applied. @@ -137,7 +151,7 @@ Returns the core row model of all rows before row selection has been applied. getSelectedRowIds: () => string[]; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:104](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L104) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:138](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L138) Returns the ids of all selected rows. @@ -153,7 +167,7 @@ Returns the ids of all selected rows. getSelectedRowModel: () => RowModel; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:128](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L128) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:162](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L162) Builds a selected-row model from the core row model. @@ -169,7 +183,7 @@ Builds a selected-row model from the core row model. getToggleAllPageRowsSelectedHandler: () => (event) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:132](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L132) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:166](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L166) Creates a checkbox-style handler that toggles all current-page rows. @@ -197,7 +211,7 @@ Creates a checkbox-style handler that toggles all current-page rows. getToggleAllRowsSelectedHandler: () => (event) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:136](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L136) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:170](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L170) Creates a checkbox-style handler that toggles all selectable rows. @@ -225,7 +239,7 @@ Creates a checkbox-style handler that toggles all selectable rows. resetRowSelection: (defaultState?) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:142](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L142) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:176](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L176) Resets `rowSelection` to `initialState.rowSelection`. @@ -249,7 +263,7 @@ Pass `true` to ignore initial state and reset to `{}`. setRowSelection: (updater) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:146](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L146) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:180](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L180) Updates row selection state with a next map or updater function. @@ -271,7 +285,7 @@ Updates row selection state with a next map or updater function. toggleAllPageRowsSelected: (value?, opts?) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:150](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L150) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:184](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L184) Selects/deselects all rows on the current page. @@ -299,7 +313,7 @@ Selects/deselects all rows on the current page. toggleAllRowsSelected: (value?, opts?) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.types.ts:157](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L157) +Defined in: [features/row-selection/rowSelectionFeature.types.ts:191](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L191) Selects/deselects all rows in the table. diff --git a/docs/reference/index/interfaces/Table_Rows.md b/docs/reference/index/interfaces/Table_Rows.md index f888f514fd..a2b117bba4 100644 --- a/docs/reference/index/interfaces/Table_Rows.md +++ b/docs/reference/index/interfaces/Table_Rows.md @@ -5,7 +5,7 @@ title: Table_Rows # Interface: Table\_Rows\ -Defined in: [core/rows/coreRowsFeature.types.ts:119](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L119) +Defined in: [core/rows/coreRowsFeature.types.ts:130](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L130) ## Extended by @@ -30,7 +30,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:119](https://github.com/TanStack getRow: (id, searchAll?) => Row; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:134](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L134) +Defined in: [core/rows/coreRowsFeature.types.ts:145](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L145) Returns the row with the given ID. @@ -56,7 +56,7 @@ Returns the row with the given ID. getRowId: (_, index, parent?) => string; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:130](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L130) +Defined in: [core/rows/coreRowsFeature.types.ts:141](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L141) #### Parameters @@ -84,7 +84,7 @@ Defined in: [core/rows/coreRowsFeature.types.ts:130](https://github.com/TanStack getRowsInDisplayOrder: () => Row[]; ``` -Defined in: [core/rows/coreRowsFeature.types.ts:129](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L129) +Defined in: [core/rows/coreRowsFeature.types.ts:140](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/rows/coreRowsFeature.types.ts#L140) Returns the rows in the current display order and assigns their display indexes. When expanded rows bypass pagination, expanded descendants are diff --git a/docs/reference/index/interfaces/Table_Table.md b/docs/reference/index/interfaces/Table_Table.md index 1d0eb1af6d..438262fb77 100644 --- a/docs/reference/index/interfaces/Table_Table.md +++ b/docs/reference/index/interfaces/Table_Table.md @@ -246,13 +246,14 @@ options as plain resolved data instead of backing them with an atom. reset: () => void; ``` -Defined in: [core/table/coreTablesFeature.types.ts:234](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L234) +Defined in: [core/table/coreTablesFeature.types.ts:235](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L235) Resets the table's internal base atoms to `table.initialState`. Prefer feature-specific reset APIs, such as `resetPagination`, when a state slice may be owned by an external atom or needs that feature's blank/default -reset behavior. +reset behavior. After resetting internal atoms, this also invokes feature +reset hooks for mutable, transient table-instance data. #### Returns @@ -266,7 +267,7 @@ reset behavior. setOptions: (newOptions) => void; ``` -Defined in: [core/table/coreTablesFeature.types.ts:239](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L239) +Defined in: [core/table/coreTablesFeature.types.ts:240](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.types.ts#L240) Updates the table options by applying a value or updater to the current resolved options and then merging them through `options.mergeOptions`. diff --git a/docs/reference/index/interfaces/ToggleSelectedOptions.md b/docs/reference/index/interfaces/ToggleSelectedOptions.md new file mode 100644 index 0000000000..f489006d7f --- /dev/null +++ b/docs/reference/index/interfaces/ToggleSelectedOptions.md @@ -0,0 +1,23 @@ +--- +id: ToggleSelectedOptions +title: ToggleSelectedOptions +--- + +# Interface: ToggleSelectedOptions + +Defined in: [features/row-selection/rowSelectionFeature.types.ts:11](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L11) + +Controls how toggling a row affects its descendants. + +## Properties + +### selectChildren? + +```ts +optional selectChildren: boolean; +``` + +Defined in: [features/row-selection/rowSelectionFeature.types.ts:16](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.types.ts#L16) + +Whether selectable child rows should be toggled recursively. Defaults to +`true`. diff --git a/docs/reference/static-functions/functions/getDefaultRowSelectionState.md b/docs/reference/static-functions/functions/getDefaultRowSelectionState.md index 7a710711cb..6c48067ffe 100644 --- a/docs/reference/static-functions/functions/getDefaultRowSelectionState.md +++ b/docs/reference/static-functions/functions/getDefaultRowSelectionState.md @@ -9,7 +9,7 @@ title: getDefaultRowSelectionState function getDefaultRowSelectionState(): RowSelectionState; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:28](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L28) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:31](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L31) Creates the default row selection state. diff --git a/docs/reference/static-functions/functions/isRowSelected.md b/docs/reference/static-functions/functions/isRowSelected.md index 67384d7a02..8c02ea47e0 100644 --- a/docs/reference/static-functions/functions/isRowSelected.md +++ b/docs/reference/static-functions/functions/isRowSelected.md @@ -9,7 +9,7 @@ title: isRowSelected function isRowSelected(row, rowSelection): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:768](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L768) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:868](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L868) Returns whether a row id is selected in the current row selection state. diff --git a/docs/reference/static-functions/functions/isSubRowSelected.md b/docs/reference/static-functions/functions/isSubRowSelected.md index 842a4212d2..91a6d0ec3e 100644 --- a/docs/reference/static-functions/functions/isSubRowSelected.md +++ b/docs/reference/static-functions/functions/isSubRowSelected.md @@ -9,7 +9,7 @@ title: isSubRowSelected function isSubRowSelected(row): boolean | "some" | "all"; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:785](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L785) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:885](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L885) Returns whether all, some, or none of a row's selectable descendants are selected. diff --git a/docs/reference/static-functions/functions/row_getCanMultiSelect.md b/docs/reference/static-functions/functions/row_getCanMultiSelect.md index c57daedc3e..882c89ee0c 100644 --- a/docs/reference/static-functions/functions/row_getCanMultiSelect.md +++ b/docs/reference/static-functions/functions/row_getCanMultiSelect.md @@ -9,7 +9,7 @@ title: row_getCanMultiSelect function row_getCanMultiSelect(row): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:630](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L630) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:633](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L633) Checks whether this row can be selected alongside other rows. diff --git a/docs/reference/static-functions/functions/row_getCanSelect.md b/docs/reference/static-functions/functions/row_getCanSelect.md index 42b75b7231..8fdedba827 100644 --- a/docs/reference/static-functions/functions/row_getCanSelect.md +++ b/docs/reference/static-functions/functions/row_getCanSelect.md @@ -9,7 +9,7 @@ title: row_getCanSelect function row_getCanSelect(row): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:584](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L584) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:587](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L587) Checks whether this row can be selected. diff --git a/docs/reference/static-functions/functions/row_getCanSelectSubRows.md b/docs/reference/static-functions/functions/row_getCanSelectSubRows.md index 1771c26c27..f7f6c43b08 100644 --- a/docs/reference/static-functions/functions/row_getCanSelectSubRows.md +++ b/docs/reference/static-functions/functions/row_getCanSelectSubRows.md @@ -9,7 +9,7 @@ title: row_getCanSelectSubRows function row_getCanSelectSubRows(row): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:607](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L607) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:610](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L610) Checks whether selecting this row should also select its subRows. diff --git a/docs/reference/static-functions/functions/row_getIsAllSubRowsSelected.md b/docs/reference/static-functions/functions/row_getIsAllSubRowsSelected.md index ce8b485564..f2ca7bb73e 100644 --- a/docs/reference/static-functions/functions/row_getIsAllSubRowsSelected.md +++ b/docs/reference/static-functions/functions/row_getIsAllSubRowsSelected.md @@ -9,7 +9,7 @@ title: row_getIsAllSubRowsSelected function row_getIsAllSubRowsSelected(row): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:566](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L566) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:569](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L569) Checks whether all selectable descendants are selected. diff --git a/docs/reference/static-functions/functions/row_getIsSelected.md b/docs/reference/static-functions/functions/row_getIsSelected.md index c6abb98421..6fc16bc9fa 100644 --- a/docs/reference/static-functions/functions/row_getIsSelected.md +++ b/docs/reference/static-functions/functions/row_getIsSelected.md @@ -9,7 +9,7 @@ title: row_getIsSelected function row_getIsSelected(row): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:531](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L531) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:534](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L534) Checks whether this row id is selected in `state.rowSelection`. diff --git a/docs/reference/static-functions/functions/row_getIsSomeSelected.md b/docs/reference/static-functions/functions/row_getIsSomeSelected.md index c2782b4959..7a55c6da32 100644 --- a/docs/reference/static-functions/functions/row_getIsSomeSelected.md +++ b/docs/reference/static-functions/functions/row_getIsSomeSelected.md @@ -9,7 +9,7 @@ title: row_getIsSomeSelected function row_getIsSomeSelected(row): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:549](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L549) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:552](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L552) Checks whether some, but not all, selectable descendants are selected. diff --git a/docs/reference/static-functions/functions/row_getToggleSelectedHandler.md b/docs/reference/static-functions/functions/row_getToggleSelectedHandler.md index 4bc88bf0b3..3edbafe674 100644 --- a/docs/reference/static-functions/functions/row_getToggleSelectedHandler.md +++ b/docs/reference/static-functions/functions/row_getToggleSelectedHandler.md @@ -6,15 +6,19 @@ title: row_getToggleSelectedHandler # Function: row\_getToggleSelectedHandler() ```ts -function row_getToggleSelectedHandler(row): (e) => void; +function row_getToggleSelectedHandler(row, opts?): (e) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:653](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L653) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:660](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L660) Creates a checkbox-style handler that selects or deselects this row. The handler is a no-op when the row cannot be selected and reads -`event.target.checked`. +`event.target.checked`. Shift events select or deselect the inclusive range +from the most recent selectable row handled by this table. The event's +optional `persist()` method is called before it is read. Pass +`selectChildren: false` to limit changes to rows explicitly present in the +display-order interval. ## Type Parameters @@ -32,6 +36,10 @@ The handler is a no-op when the row cannot be selected and reads [`Row`](../../index/type-aliases/Row.md)\<`TFeatures`, `TData`\> +### opts? + +[`ToggleSelectedOptions`](../../index/interfaces/ToggleSelectedOptions.md) + ## Returns ```ts diff --git a/docs/reference/static-functions/functions/row_toggleSelected.md b/docs/reference/static-functions/functions/row_toggleSelected.md index 3bfe54d246..a507b6d89f 100644 --- a/docs/reference/static-functions/functions/row_toggleSelected.md +++ b/docs/reference/static-functions/functions/row_toggleSelected.md @@ -12,7 +12,7 @@ function row_toggleSelected( opts?): void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:492](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L492) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:501](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L501) Selects or deselects this row. @@ -41,9 +41,7 @@ Omitting `value` toggles the row. Child rows are selected recursively unless ### opts? -#### selectChildren? - -`boolean` +[`ToggleSelectedOptions`](../../index/interfaces/ToggleSelectedOptions.md) ## Returns diff --git a/docs/reference/static-functions/functions/selectRowsFn.md b/docs/reference/static-functions/functions/selectRowsFn.md index a7b7c79c9d..37f5847434 100644 --- a/docs/reference/static-functions/functions/selectRowsFn.md +++ b/docs/reference/static-functions/functions/selectRowsFn.md @@ -9,7 +9,7 @@ title: selectRowsFn function selectRowsFn(rowModel, table): RowModel; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:709](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L709) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:809](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L809) Builds a row model containing rows selected by the current row selection state. diff --git a/docs/reference/static-functions/functions/table_getFilteredSelectedRowModel.md b/docs/reference/static-functions/functions/table_getFilteredSelectedRowModel.md index 331ee91d90..d6b450620d 100644 --- a/docs/reference/static-functions/functions/table_getFilteredSelectedRowModel.md +++ b/docs/reference/static-functions/functions/table_getFilteredSelectedRowModel.md @@ -15,7 +15,7 @@ function table_getFilteredSelectedRowModel(table): }; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:247](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L247) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:256](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L256) Builds a row model containing selected rows from the filtered row model. diff --git a/docs/reference/static-functions/functions/table_getGroupedSelectedRowModel.md b/docs/reference/static-functions/functions/table_getGroupedSelectedRowModel.md index faca490ac3..4f92225830 100644 --- a/docs/reference/static-functions/functions/table_getGroupedSelectedRowModel.md +++ b/docs/reference/static-functions/functions/table_getGroupedSelectedRowModel.md @@ -15,7 +15,7 @@ function table_getGroupedSelectedRowModel(table): }; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:281](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L281) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:290](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L290) Builds a row model containing selected rows from the grouped row model. diff --git a/docs/reference/static-functions/functions/table_getIsAllPageRowsSelected.md b/docs/reference/static-functions/functions/table_getIsAllPageRowsSelected.md index 54286f19a6..14f61bac64 100644 --- a/docs/reference/static-functions/functions/table_getIsAllPageRowsSelected.md +++ b/docs/reference/static-functions/functions/table_getIsAllPageRowsSelected.md @@ -9,7 +9,7 @@ title: table_getIsAllPageRowsSelected function table_getIsAllPageRowsSelected(table): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:366](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L366) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:375](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L375) Checks whether every selectable row on the current page is selected. diff --git a/docs/reference/static-functions/functions/table_getIsAllRowsSelected.md b/docs/reference/static-functions/functions/table_getIsAllRowsSelected.md index d8ebbeb74f..94407980a9 100644 --- a/docs/reference/static-functions/functions/table_getIsAllRowsSelected.md +++ b/docs/reference/static-functions/functions/table_getIsAllRowsSelected.md @@ -9,7 +9,7 @@ title: table_getIsAllRowsSelected function table_getIsAllRowsSelected(table): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:332](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L332) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:341](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L341) Checks whether every selectable filtered row is selected. diff --git a/docs/reference/static-functions/functions/table_getIsSomePageRowsSelected.md b/docs/reference/static-functions/functions/table_getIsSomePageRowsSelected.md index 5eed3a87c8..11b4674ed6 100644 --- a/docs/reference/static-functions/functions/table_getIsSomePageRowsSelected.md +++ b/docs/reference/static-functions/functions/table_getIsSomePageRowsSelected.md @@ -9,7 +9,7 @@ title: table_getIsSomePageRowsSelected function table_getIsSomePageRowsSelected(table): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:415](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L415) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:424](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L424) Checks whether the current page has a partial selection. diff --git a/docs/reference/static-functions/functions/table_getIsSomeRowsSelected.md b/docs/reference/static-functions/functions/table_getIsSomeRowsSelected.md index be23b9adaa..a1a03bad8e 100644 --- a/docs/reference/static-functions/functions/table_getIsSomeRowsSelected.md +++ b/docs/reference/static-functions/functions/table_getIsSomeRowsSelected.md @@ -9,7 +9,7 @@ title: table_getIsSomeRowsSelected function table_getIsSomeRowsSelected(table): boolean; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:397](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L397) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:406](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L406) Checks whether selection is partially applied across filtered rows. diff --git a/docs/reference/static-functions/functions/table_getPreSelectedRowModel.md b/docs/reference/static-functions/functions/table_getPreSelectedRowModel.md index 0dc68af7d7..1c607f7e44 100644 --- a/docs/reference/static-functions/functions/table_getPreSelectedRowModel.md +++ b/docs/reference/static-functions/functions/table_getPreSelectedRowModel.md @@ -9,7 +9,7 @@ title: table_getPreSelectedRowModel function table_getPreSelectedRowModel(table): RowModel; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:195](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L195) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:204](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L204) Reads the row model before row selection is projected into selected rows. diff --git a/docs/reference/static-functions/functions/table_getSelectedRowIds.md b/docs/reference/static-functions/functions/table_getSelectedRowIds.md index de580ed43c..be1e8f0a50 100644 --- a/docs/reference/static-functions/functions/table_getSelectedRowIds.md +++ b/docs/reference/static-functions/functions/table_getSelectedRowIds.md @@ -9,7 +9,7 @@ title: table_getSelectedRowIds function table_getSelectedRowIds(table): string[]; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:314](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L314) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:323](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L323) Returns the ids of all selected rows. diff --git a/docs/reference/static-functions/functions/table_getSelectedRowModel.md b/docs/reference/static-functions/functions/table_getSelectedRowModel.md index 7c918ab8ec..6032ad5231 100644 --- a/docs/reference/static-functions/functions/table_getSelectedRowModel.md +++ b/docs/reference/static-functions/functions/table_getSelectedRowModel.md @@ -15,7 +15,7 @@ function table_getSelectedRowModel(table): }; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:213](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L213) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:222](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L222) Builds a row model containing selected rows from the core row model. diff --git a/docs/reference/static-functions/functions/table_getToggleAllPageRowsSelectedHandler.md b/docs/reference/static-functions/functions/table_getToggleAllPageRowsSelectedHandler.md index e0358b789b..b5b2fe8fec 100644 --- a/docs/reference/static-functions/functions/table_getToggleAllPageRowsSelectedHandler.md +++ b/docs/reference/static-functions/functions/table_getToggleAllPageRowsSelectedHandler.md @@ -9,7 +9,7 @@ title: table_getToggleAllPageRowsSelectedHandler function table_getToggleAllPageRowsSelectedHandler(table): (e) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:463](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L463) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:472](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L472) Creates a checkbox-style handler that selects or deselects current page rows. diff --git a/docs/reference/static-functions/functions/table_getToggleAllRowsSelectedHandler.md b/docs/reference/static-functions/functions/table_getToggleAllRowsSelectedHandler.md index 929fbe4e51..5278e63fa1 100644 --- a/docs/reference/static-functions/functions/table_getToggleAllRowsSelectedHandler.md +++ b/docs/reference/static-functions/functions/table_getToggleAllRowsSelectedHandler.md @@ -9,7 +9,7 @@ title: table_getToggleAllRowsSelectedHandler function table_getToggleAllRowsSelectedHandler(table): (e) => void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:440](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L440) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:449](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L449) Creates a checkbox-style handler that selects or deselects all rows. diff --git a/docs/reference/static-functions/functions/table_mergeOptions.md b/docs/reference/static-functions/functions/table_mergeOptions.md index 24521f4287..d5bec237d7 100644 --- a/docs/reference/static-functions/functions/table_mergeOptions.md +++ b/docs/reference/static-functions/functions/table_mergeOptions.md @@ -9,7 +9,7 @@ title: table_mergeOptions function table_mergeOptions(table, newOptions): TableOptions; ``` -Defined in: [core/table/coreTablesFeature.utils.ts:80](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.utils.ts#L80) +Defined in: [core/table/coreTablesFeature.utils.ts:86](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.utils.ts#L86) Merges new table options with the current resolved options. diff --git a/docs/reference/static-functions/functions/table_reset.md b/docs/reference/static-functions/functions/table_reset.md index 5708dbcb1f..ec07464dc7 100644 --- a/docs/reference/static-functions/functions/table_reset.md +++ b/docs/reference/static-functions/functions/table_reset.md @@ -9,9 +9,10 @@ title: table_reset function table_reset(table): void; ``` -Defined in: [core/table/coreTablesFeature.utils.ts:53](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.utils.ts#L53) +Defined in: [core/table/coreTablesFeature.utils.ts:54](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.utils.ts#L54) -Resets all internal table base atoms to `table.initialState`. +Resets all internal table base atoms to `table.initialState`, then clears +transient instance data through registered feature reset hooks. This resets internally owned state slices in a single reactivity batch. Use feature-specific reset APIs when a slice may be externally owned. diff --git a/docs/reference/static-functions/functions/table_resetRowSelection.md b/docs/reference/static-functions/functions/table_resetRowSelection.md index a2696f6805..51e0b9ced9 100644 --- a/docs/reference/static-functions/functions/table_resetRowSelection.md +++ b/docs/reference/static-functions/functions/table_resetRowSelection.md @@ -9,7 +9,7 @@ title: table_resetRowSelection function table_resetRowSelection(table, defaultState?): void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:65](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L65) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:68](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L68) Resets `rowSelection` to the configured initial state or feature default. diff --git a/docs/reference/static-functions/functions/table_setOptions.md b/docs/reference/static-functions/functions/table_setOptions.md index 13f4cd9680..4ca8ba7278 100644 --- a/docs/reference/static-functions/functions/table_setOptions.md +++ b/docs/reference/static-functions/functions/table_setOptions.md @@ -9,7 +9,7 @@ title: table_setOptions function table_setOptions(table, updater): void; ``` -Defined in: [core/table/coreTablesFeature.utils.ts:146](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.utils.ts#L146) +Defined in: [core/table/coreTablesFeature.utils.ts:152](https://github.com/TanStack/table/blob/main/packages/table-core/src/core/table/coreTablesFeature.utils.ts#L152) Updates the table options object. diff --git a/docs/reference/static-functions/functions/table_setRowSelection.md b/docs/reference/static-functions/functions/table_setRowSelection.md index 264df3e951..3a95259cbf 100644 --- a/docs/reference/static-functions/functions/table_setRowSelection.md +++ b/docs/reference/static-functions/functions/table_setRowSelection.md @@ -9,7 +9,7 @@ title: table_setRowSelection function table_setRowSelection(table, updater): void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:43](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L43) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:46](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L46) Routes a row selection updater through the table's selection change handler. diff --git a/docs/reference/static-functions/functions/table_toggleAllPageRowsSelected.md b/docs/reference/static-functions/functions/table_toggleAllPageRowsSelected.md index 8b79489acd..d746770b17 100644 --- a/docs/reference/static-functions/functions/table_toggleAllPageRowsSelected.md +++ b/docs/reference/static-functions/functions/table_toggleAllPageRowsSelected.md @@ -12,7 +12,7 @@ function table_toggleAllPageRowsSelected( opts?): void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:148](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L148) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:155](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L155) Selects or deselects every selectable row on the current page. diff --git a/docs/reference/static-functions/functions/table_toggleAllRowsSelected.md b/docs/reference/static-functions/functions/table_toggleAllRowsSelected.md index a934592126..975c733b69 100644 --- a/docs/reference/static-functions/functions/table_toggleAllRowsSelected.md +++ b/docs/reference/static-functions/functions/table_toggleAllRowsSelected.md @@ -12,7 +12,7 @@ function table_toggleAllRowsSelected( opts?): void; ``` -Defined in: [features/row-selection/rowSelectionFeature.utils.ts:93](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L93) +Defined in: [features/row-selection/rowSelectionFeature.utils.ts:98](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts#L98) Selects or deselects every selectable row before grouping. diff --git a/examples/alpine/basic-app-table/package.json b/examples/alpine/basic-app-table/package.json index 4d3e5ab223..e283911a08 100644 --- a/examples/alpine/basic-app-table/package.json +++ b/examples/alpine/basic-app-table/package.json @@ -11,7 +11,7 @@ "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts" }, "dependencies": { - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/basic-create-table/package.json b/examples/alpine/basic-create-table/package.json index ccb3a2ba09..ea27af80a0 100644 --- a/examples/alpine/basic-create-table/package.json +++ b/examples/alpine/basic-create-table/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/basic-dynamic-columns/package.json b/examples/alpine/basic-dynamic-columns/package.json index 28e193c5b1..ff8f623540 100644 --- a/examples/alpine/basic-dynamic-columns/package.json +++ b/examples/alpine/basic-dynamic-columns/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/basic-external-atoms/package.json b/examples/alpine/basic-external-atoms/package.json index 8557ed419f..f742b7da39 100644 --- a/examples/alpine/basic-external-atoms/package.json +++ b/examples/alpine/basic-external-atoms/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "@tanstack/store": "^0.11.0", "alpinejs": "^3.15.12" }, diff --git a/examples/alpine/basic-external-state/package.json b/examples/alpine/basic-external-state/package.json index 8198f2053f..ee3ef13c0c 100644 --- a/examples/alpine/basic-external-state/package.json +++ b/examples/alpine/basic-external-state/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-groups/package.json b/examples/alpine/column-groups/package.json index 48ef2003bf..ad86d2589b 100644 --- a/examples/alpine/column-groups/package.json +++ b/examples/alpine/column-groups/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-ordering/package.json b/examples/alpine/column-ordering/package.json index c2a90cada7..4222828258 100644 --- a/examples/alpine/column-ordering/package.json +++ b/examples/alpine/column-ordering/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-ordering/src/main.ts b/examples/alpine/column-ordering/src/main.ts index 19e469baa2..d1760d4835 100644 --- a/examples/alpine/column-ordering/src/main.ts +++ b/examples/alpine/column-ordering/src/main.ts @@ -78,6 +78,10 @@ Alpine.data('table', () => { get data() { return local.data }, + // initialState: { columnOrder: ['lastName', 'firstName'] }, // set column order on first render + // atoms: { columnOrder: columnOrderAtom }, // preferred: own ordering state with an external atom + // state: { columnOrder }, // classic controlled state; pair with onColumnOrderChange + // onColumnOrderChange: setColumnOrder, debugTable: true, }) diff --git a/examples/alpine/column-pinning-split/package.json b/examples/alpine/column-pinning-split/package.json index 3641a3faa0..2344874b44 100644 --- a/examples/alpine/column-pinning-split/package.json +++ b/examples/alpine/column-pinning-split/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-pinning-split/src/main.ts b/examples/alpine/column-pinning-split/src/main.ts index 6adb277f48..bb5848f5bd 100644 --- a/examples/alpine/column-pinning-split/src/main.ts +++ b/examples/alpine/column-pinning-split/src/main.ts @@ -80,6 +80,11 @@ Alpine.data('table', () => { get data() { return local.data }, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/alpine/column-pinning-sticky/package.json b/examples/alpine/column-pinning-sticky/package.json index aaa6d7a65b..3f80196b26 100644 --- a/examples/alpine/column-pinning-sticky/package.json +++ b/examples/alpine/column-pinning-sticky/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-pinning-sticky/src/main.ts b/examples/alpine/column-pinning-sticky/src/main.ts index c62fb661e1..55bb2245db 100644 --- a/examples/alpine/column-pinning-sticky/src/main.ts +++ b/examples/alpine/column-pinning-sticky/src/main.ts @@ -108,6 +108,11 @@ Alpine.data('table', () => { return local.data }, columnResizeMode: 'onChange', + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/alpine/column-pinning/package.json b/examples/alpine/column-pinning/package.json index 619ce72d1c..1cd53825be 100644 --- a/examples/alpine/column-pinning/package.json +++ b/examples/alpine/column-pinning/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-pinning/src/main.ts b/examples/alpine/column-pinning/src/main.ts index 6adb277f48..bb5848f5bd 100644 --- a/examples/alpine/column-pinning/src/main.ts +++ b/examples/alpine/column-pinning/src/main.ts @@ -80,6 +80,11 @@ Alpine.data('table', () => { get data() { return local.data }, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/alpine/column-resizing-performant/package.json b/examples/alpine/column-resizing-performant/package.json index 93ca0d5c62..dfecbc2a7c 100644 --- a/examples/alpine/column-resizing-performant/package.json +++ b/examples/alpine/column-resizing-performant/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-resizing-performant/src/main.ts b/examples/alpine/column-resizing-performant/src/main.ts index d1bddc8eb7..525140765d 100644 --- a/examples/alpine/column-resizing-performant/src/main.ts +++ b/examples/alpine/column-resizing-performant/src/main.ts @@ -75,6 +75,12 @@ Alpine.data('table', () => { }, defaultColumn: { minSize: 60, maxSize: 800 }, columnResizeMode: 'onChange', + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // columnResizeDirection: 'rtl', // calculate resize offsets right-to-left; default 'ltr' + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/alpine/column-resizing/package.json b/examples/alpine/column-resizing/package.json index 665dad957c..5542f00694 100644 --- a/examples/alpine/column-resizing/package.json +++ b/examples/alpine/column-resizing/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-resizing/src/main.ts b/examples/alpine/column-resizing/src/main.ts index fe8d953bbe..24b1f23814 100644 --- a/examples/alpine/column-resizing/src/main.ts +++ b/examples/alpine/column-resizing/src/main.ts @@ -95,6 +95,11 @@ Alpine.data('table', () => { get columnResizeDirection() { return local.columnResizeDirection }, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/alpine/column-sizing/package.json b/examples/alpine/column-sizing/package.json index 6d3641f92c..96b48a840a 100644 --- a/examples/alpine/column-sizing/package.json +++ b/examples/alpine/column-sizing/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-sizing/src/main.ts b/examples/alpine/column-sizing/src/main.ts index 61f13e3ebe..fdbedda9f2 100644 --- a/examples/alpine/column-sizing/src/main.ts +++ b/examples/alpine/column-sizing/src/main.ts @@ -64,6 +64,10 @@ Alpine.data('table', () => { }, columnResizeMode: 'onChange', columnResizeDirection: 'ltr', + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnSizing: columnSizingAtom }, // preferred: own sizing state with an external atom + // state: { columnSizing }, // classic controlled state; pair with onColumnSizingChange + // onColumnSizingChange: setColumnSizing, debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/alpine/column-visibility/package.json b/examples/alpine/column-visibility/package.json index 43b69f9aea..1ad6772f5a 100644 --- a/examples/alpine/column-visibility/package.json +++ b/examples/alpine/column-visibility/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/column-visibility/src/main.ts b/examples/alpine/column-visibility/src/main.ts index 25ea4a7a13..1e97abeed2 100644 --- a/examples/alpine/column-visibility/src/main.ts +++ b/examples/alpine/column-visibility/src/main.ts @@ -75,6 +75,11 @@ Alpine.data('table', () => { get data() { return local.data }, + // initialState: { columnVisibility: { visits: false } }, // hide columns on first render + // atoms: { columnVisibility: columnVisibilityAtom }, // preferred: own visibility state with an external atom + // state: { columnVisibility }, // classic controlled state; pair with onColumnVisibilityChange + // onColumnVisibilityChange: setColumnVisibility, + // enableHiding: false, // prevent every column from being hidden; default true debugTable: true, }) diff --git a/examples/alpine/custom-plugin/package.json b/examples/alpine/custom-plugin/package.json index 82578bf9c0..55f0cdbd3d 100644 --- a/examples/alpine/custom-plugin/package.json +++ b/examples/alpine/custom-plugin/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/alpine-table": "^9.0.0-beta.43", + "@tanstack/alpine-table": "^9.0.0-beta.46", "alpinejs": "^3.15.12" }, "devDependencies": { diff --git a/examples/alpine/expanding/index.html b/examples/alpine/expanding/index.html index 5ba78f4f55..2e54f3d6fd 100644 --- a/examples/alpine/expanding/index.html +++ b/examples/alpine/expanding/index.html @@ -99,7 +99,7 @@ style="cursor: pointer" :checked="cell.row.getIsSelected() || (cell.row.getCanSelectSubRows() && cell.row.getIsAllSubRowsSelected())" x-effect="$el.indeterminate = !cell.row.getIsSelected() && cell.row.getIsSomeSelected()" - @change="cell.row.getToggleSelectedHandler()($event)" + @click="cell.row.getToggleSelectedHandler()($event)" /> @@ -19,7 +21,14 @@ style="align-items: center; display: flex; height: 34px" [style.width.px]="header.getSize()" > - @if (!header.isPlaceholder) { + @if (header.column.id === 'select') { + + } @else if (!header.isPlaceholder) {
@for (cell of row.getAllCells(); track cell.id) { - - {{ renderCell }} - + @if (cell.column.id === 'select') { + + } @else { + + {{ renderCell }} + + } } @@ -56,4 +75,3 @@
-
{{ stringifiedState() }}
diff --git a/examples/angular/virtualized-rows/src/app/app.ts b/examples/angular/virtualized-rows/src/app/app.ts index 16939cd22e..1ac567baa7 100644 --- a/examples/angular/virtualized-rows/src/app/app.ts +++ b/examples/angular/virtualized-rows/src/app/app.ts @@ -11,6 +11,7 @@ import { createColumnHelper, createSortedRowModel, injectTable, + rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, @@ -19,9 +20,11 @@ import { injectVirtualizer } from '@tanstack/angular-virtual' import { makeData } from './makeData' import type { ElementRef } from '@angular/core' import type { Person } from './makeData' +import type { Row } from '@tanstack/angular-table' const features = tableFeatures({ columnSizingFeature, + rowSelectionFeature, rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns, @@ -29,6 +32,12 @@ const features = tableFeatures({ const columnHelper = createColumnHelper() const columns = columnHelper.columns([ + columnHelper.display({ + id: 'select', + header: '', + cell: '', + size: 40, + }), columnHelper.accessor('id', { header: 'ID', size: 60, @@ -83,6 +92,7 @@ export class App { features, columns, data: this.data(), + getRowId: (row) => String(row.id), debugTable: true, })) @@ -106,14 +116,16 @@ export class App { readonly virtualRows = computed(() => this.rowVirtualizer.getVirtualItems()) readonly totalSize = computed(() => this.rowVirtualizer.getTotalSize()) - stringifiedState() { - return JSON.stringify(this.table.store.get(), null, 2) - } - refreshData = () => this.data.set(makeData(200_000)) stressTest = () => this.data.set(makeData(1_000_000)) sortIndicator(sortDirection: false | 'asc' | 'desc') { return sortDirection ? sortIndicators[sortDirection] : null } + + toggleSelected(row: Row, event: Event) { + row.getToggleSelectedHandler({ + // selectChildren: false + })(event) + } } diff --git a/examples/angular/with-tanstack-form/package.json b/examples/angular/with-tanstack-form/package.json index d795d5d952..ccb7623d95 100644 --- a/examples/angular/with-tanstack-form/package.json +++ b/examples/angular/with-tanstack-form/package.json @@ -7,7 +7,7 @@ "build": "ng build", "watch": "ng build --watch --configuration development", "lint": "eslint ./src", - "test:types": "ng build", + "test:types": "tsc -p tsconfig.app.json --noEmit", "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts" }, "private": true, @@ -22,8 +22,8 @@ "@faker-js/faker": "^10.5.0", "@tanstack/angular-devtools": "^0.0.7", "@tanstack/angular-form": "^1.33.1", - "@tanstack/angular-table": "^9.0.0-beta.43", - "@tanstack/angular-table-devtools": "^9.0.0-beta.43", + "@tanstack/angular-table": "^9.0.0-beta.46", + "@tanstack/angular-table-devtools": "^9.0.0-beta.46", "rxjs": "~7.8.2", "tslib": "^2.8.1", "zod": "^4.4.3" diff --git a/examples/angular/with-tanstack-query/package.json b/examples/angular/with-tanstack-query/package.json index db123bd57a..da43b09f7f 100644 --- a/examples/angular/with-tanstack-query/package.json +++ b/examples/angular/with-tanstack-query/package.json @@ -7,7 +7,7 @@ "build": "ng build", "watch": "ng build --watch --configuration development", "lint": "eslint ./src", - "test:types": "ng build", + "test:types": "tsc -p tsconfig.app.json --noEmit", "test:e2e": "PLAYWRIGHT_TEST_DIR=$PWD/tests/e2e playwright test --config ../../../playwright.config.ts" }, "private": true, @@ -21,7 +21,7 @@ "@angular/router": "^22.0.2", "@faker-js/faker": "^10.5.0", "@tanstack/angular-query-experimental": "^5.101.2", - "@tanstack/angular-table": "^9.0.0-beta.43", + "@tanstack/angular-table": "^9.0.0-beta.46", "rxjs": "~7.8.2", "tslib": "^2.8.1" }, diff --git a/examples/ember/basic-app-table/package.json b/examples/ember/basic-app-table/package.json index b0cca14285..b6872150d9 100644 --- a/examples/ember/basic-app-table/package.json +++ b/examples/ember/basic-app-table/package.json @@ -43,7 +43,7 @@ "@glint/tsserver-plugin": "2.5.17", "@nullvoxpopuli/ember-vite": "1.0.3", "@rollup/plugin-babel": "7.1.0", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "babel-plugin-ember-template-compilation": "4.0.0", "typescript": "6.0.3", "vite": "^8.1.0" diff --git a/examples/ember/basic-external-atoms/package.json b/examples/ember/basic-external-atoms/package.json index 690d96fc18..8683462d1e 100644 --- a/examples/ember/basic-external-atoms/package.json +++ b/examples/ember/basic-external-atoms/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/basic-external-state/package.json b/examples/ember/basic-external-state/package.json index 21c1cc2542..cf197b03de 100644 --- a/examples/ember/basic-external-state/package.json +++ b/examples/ember/basic-external-state/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/basic-table/package.json b/examples/ember/basic-table/package.json index 688cc0ab49..771d80583a 100644 --- a/examples/ember/basic-table/package.json +++ b/examples/ember/basic-table/package.json @@ -43,7 +43,7 @@ "@glint/tsserver-plugin": "2.5.17", "@nullvoxpopuli/ember-vite": "1.0.3", "@rollup/plugin-babel": "7.1.0", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "babel-plugin-ember-template-compilation": "4.0.0", "typescript": "6.0.3", "vite": "^8.1.0" diff --git a/examples/ember/column-groups/package.json b/examples/ember/column-groups/package.json index c7705cf205..fca9e21fed 100644 --- a/examples/ember/column-groups/package.json +++ b/examples/ember/column-groups/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-ordering/app/templates/application.gts b/examples/ember/column-ordering/app/templates/application.gts index 36d7590cd4..431964e2e3 100644 --- a/examples/ember/column-ordering/app/templates/application.gts +++ b/examples/ember/column-ordering/app/templates/application.gts @@ -105,6 +105,10 @@ export default class ColumnOrderingTable extends Component { features, columns, data: this.data, + // initialState: { columnOrder: ['lastName', 'firstName'] }, // set column order on first render + // atoms: { columnOrder: columnOrderAtom }, // preferred: own ordering state with an external atom + // state: { columnOrder }, // classic controlled state; pair with onColumnOrderChange + // onColumnOrderChange: setColumnOrder, })) get headerGroups() { diff --git a/examples/ember/column-ordering/package.json b/examples/ember/column-ordering/package.json index 390e8a860f..92e5ebdc5e 100644 --- a/examples/ember/column-ordering/package.json +++ b/examples/ember/column-ordering/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-pinning-split/app/templates/application.gts b/examples/ember/column-pinning-split/app/templates/application.gts index 0fb1e43aab..ccebf859bd 100644 --- a/examples/ember/column-pinning-split/app/templates/application.gts +++ b/examples/ember/column-pinning-split/app/templates/application.gts @@ -154,6 +154,10 @@ export default class ColumnPinningSplitTable extends Component { end: ['progress'], }, }, + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true })) get leftHeaderGroups() { diff --git a/examples/ember/column-pinning-split/package.json b/examples/ember/column-pinning-split/package.json index ba5afafda5..3c83dd9216 100644 --- a/examples/ember/column-pinning-split/package.json +++ b/examples/ember/column-pinning-split/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-pinning-sticky/app/templates/application.gts b/examples/ember/column-pinning-sticky/app/templates/application.gts index e815bd01e8..57d2a45740 100644 --- a/examples/ember/column-pinning-sticky/app/templates/application.gts +++ b/examples/ember/column-pinning-sticky/app/templates/application.gts @@ -163,6 +163,10 @@ export default class ColumnPinningStickyTable extends Component { end: ['progress'], }, }, + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true })) get headerGroups() { diff --git a/examples/ember/column-pinning-sticky/package.json b/examples/ember/column-pinning-sticky/package.json index 4b3cbe8c12..160977b472 100644 --- a/examples/ember/column-pinning-sticky/package.json +++ b/examples/ember/column-pinning-sticky/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-pinning/app/templates/application.gts b/examples/ember/column-pinning/app/templates/application.gts index 0152e0a20d..5cdcbeb2b8 100644 --- a/examples/ember/column-pinning/app/templates/application.gts +++ b/examples/ember/column-pinning/app/templates/application.gts @@ -113,6 +113,10 @@ export default class ColumnPinningTable extends Component { end: ['progress'], }, }, + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true })) get headerGroups() { diff --git a/examples/ember/column-pinning/package.json b/examples/ember/column-pinning/package.json index f18997636e..0ecc11927e 100644 --- a/examples/ember/column-pinning/package.json +++ b/examples/ember/column-pinning/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-resizing-performant/app/templates/application.gts b/examples/ember/column-resizing-performant/app/templates/application.gts index 310577c671..5a33044c8f 100644 --- a/examples/ember/column-resizing-performant/app/templates/application.gts +++ b/examples/ember/column-resizing-performant/app/templates/application.gts @@ -98,6 +98,12 @@ export default class ColumnResizingPerformantTable extends Component { minSize: 60, maxSize: 800, }, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // columnResizeDirection: 'rtl', // calculate resize offsets right-to-left; default 'ltr' + // enableColumnResizing: false, // disable resizing for every column; default true })) get headerGroups() { diff --git a/examples/ember/column-resizing-performant/package.json b/examples/ember/column-resizing-performant/package.json index c14a69a38f..beeefe2f14 100644 --- a/examples/ember/column-resizing-performant/package.json +++ b/examples/ember/column-resizing-performant/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-resizing/app/templates/application.gts b/examples/ember/column-resizing/app/templates/application.gts index e555219261..98b45a4e3b 100644 --- a/examples/ember/column-resizing/app/templates/application.gts +++ b/examples/ember/column-resizing/app/templates/application.gts @@ -97,6 +97,12 @@ export default class ColumnResizingTable extends Component { columns, data: this.data, columnResizeMode: this.resizeMode, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // columnResizeDirection: 'rtl', // calculate resize offsets right-to-left; default 'ltr' + // enableColumnResizing: false, // disable resizing for every column; default true })) get headerGroups() { diff --git a/examples/ember/column-resizing/package.json b/examples/ember/column-resizing/package.json index 36d05de430..f1ab71cae5 100644 --- a/examples/ember/column-resizing/package.json +++ b/examples/ember/column-resizing/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-sizing/app/templates/application.gts b/examples/ember/column-sizing/app/templates/application.gts index ebc65a5797..e4093b06d0 100644 --- a/examples/ember/column-sizing/app/templates/application.gts +++ b/examples/ember/column-sizing/app/templates/application.gts @@ -82,6 +82,10 @@ export default class ColumnSizingTable extends Component { features, columns, data: this.data, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnSizing: columnSizingAtom }, // preferred: own sizing state with an external atom + // state: { columnSizing }, // classic controlled state; pair with onColumnSizingChange + // onColumnSizingChange: setColumnSizing, })) get headerGroups() { diff --git a/examples/ember/column-sizing/package.json b/examples/ember/column-sizing/package.json index 231c63e991..c886b44d37 100644 --- a/examples/ember/column-sizing/package.json +++ b/examples/ember/column-sizing/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/column-visibility/app/templates/application.gts b/examples/ember/column-visibility/app/templates/application.gts index 1b51a5ddac..fc8efb91a8 100644 --- a/examples/ember/column-visibility/app/templates/application.gts +++ b/examples/ember/column-visibility/app/templates/application.gts @@ -94,6 +94,11 @@ export default class ColumnVisibilityTable extends Component { features, columns, data: this.data, + // initialState: { columnVisibility: { visits: false } }, // hide columns on first render + // atoms: { columnVisibility: columnVisibilityAtom }, // preferred: own visibility state with an external atom + // state: { columnVisibility }, // classic controlled state; pair with onColumnVisibilityChange + // onColumnVisibilityChange: setColumnVisibility, + // enableHiding: false, // prevent every column from being hidden; default true })) get headerGroups() { diff --git a/examples/ember/column-visibility/package.json b/examples/ember/column-visibility/package.json index c1a63df0b9..366cdfb385 100644 --- a/examples/ember/column-visibility/package.json +++ b/examples/ember/column-visibility/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/custom-plugin/package.json b/examples/ember/custom-plugin/package.json index a08666ca42..1aee9eb461 100644 --- a/examples/ember/custom-plugin/package.json +++ b/examples/ember/custom-plugin/package.json @@ -28,8 +28,8 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", - "@tanstack/table-core": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", + "@tanstack/table-core": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/editable/package.json b/examples/ember/editable/package.json index b8086e1a1a..54e05f567c 100644 --- a/examples/ember/editable/package.json +++ b/examples/ember/editable/package.json @@ -28,7 +28,7 @@ "@embroider/router": "3.0.6", "@faker-js/faker": "^10.5.0", "@glimmer/component": "2.1.1", - "@tanstack/ember-table": "^9.0.0-beta.43", + "@tanstack/ember-table": "^9.0.0-beta.46", "decorator-transforms": "2.4.0", "ember-source": "7.0.0", "ember-strict-application-resolver": "0.1.1" diff --git a/examples/ember/expanding/app/templates/application.gts b/examples/ember/expanding/app/templates/application.gts index 1eec79c852..28c57d7ffc 100644 --- a/examples/ember/expanding/app/templates/application.gts +++ b/examples/ember/expanding/app/templates/application.gts @@ -95,7 +95,9 @@ const getCanFilter = (column: Column): boolean => const toggleExpanded = (row: Row) => () => row.toggleExpanded() const toggleSelected = (row: Row) => (event: Event) => - row.getToggleSelectedHandler()(event) + row.getToggleSelectedHandler({ + // selectChildren: false + })(event) const toggleSort = (column: Column) => (event: Event) => column.getToggleSortingHandler()?.(event) @@ -221,6 +223,18 @@ export default class ExpandingTable extends Component { data: this.data, getSubRows: (row: Person) => row.subRows, getRowCanExpand: () => true, + // initialState: { expanded: { '0': true } }, // expand rows on first render + // atoms: { expanded: expandedAtom }, // preferred: own expanded state with an external atom + // state: { expanded }, // classic controlled state; pair with onExpandedChange + // onExpandedChange: setExpanded, + // enableExpanding: false, // disable expanding for every row; default true + // getIsRowExpanded: row => row.id === '0', // override whether a row is expanded + // manualExpanding: true, // pass data that is already expanded, for example from a server + // paginateExpandedRows: false, // keep expanded children on their parent page; default true + // autoResetExpanded: false, // keep expanded rows after page-altering changes; default true + // autoResetAll: false, // turn off every feature's automatic reset, including expansion + // filterFromLeafRows: true, // with filtering, keep parents whose descendants match + // maxLeafRowFilterDepth: 0, // with filtering, only filter root rows })) get headerGroups() { @@ -362,7 +376,7 @@ export default class ExpandingTable extends Component { type='checkbox' checked={{getIsSelected row}} indeterminate={{getIsSomeSelected row}} - {{on 'change' (toggleSelected row)}} + {{on 'click' (toggleSelected row)}} /> {{#if (getCanExpand row)}} (${this._data.length.toLocaleString()} rows) +

Hold Shift while selecting rows to select or deselect a range.

+

+ ${table.getSelectedRowIds().length.toLocaleString()} rows selected +

)} diff --git a/examples/preact/basic-use-app-table/package.json b/examples/preact/basic-use-app-table/package.json index ca6288543c..161d53a034 100644 --- a/examples/preact/basic-use-app-table/package.json +++ b/examples/preact/basic-use-app-table/package.json @@ -13,8 +13,8 @@ }, "dependencies": { "@tanstack/preact-devtools": "^0.10.8", - "@tanstack/preact-table": "^9.0.0-beta.43", - "@tanstack/preact-table-devtools": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", + "@tanstack/preact-table-devtools": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/basic-use-table/package.json b/examples/preact/basic-use-table/package.json index a51c08ad4d..b27605eac5 100644 --- a/examples/preact/basic-use-table/package.json +++ b/examples/preact/basic-use-table/package.json @@ -13,8 +13,8 @@ }, "dependencies": { "@tanstack/preact-devtools": "^0.10.8", - "@tanstack/preact-table": "^9.0.0-beta.43", - "@tanstack/preact-table-devtools": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", + "@tanstack/preact-table-devtools": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-groups/package.json b/examples/preact/column-groups/package.json index 1288434ba2..461ae07288 100644 --- a/examples/preact/column-groups/package.json +++ b/examples/preact/column-groups/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-ordering/package.json b/examples/preact/column-ordering/package.json index ac00890270..45e7fa8ada 100644 --- a/examples/preact/column-ordering/package.json +++ b/examples/preact/column-ordering/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-ordering/src/main.tsx b/examples/preact/column-ordering/src/main.tsx index ac1ec5274c..0392fef9d8 100644 --- a/examples/preact/column-ordering/src/main.tsx +++ b/examples/preact/column-ordering/src/main.tsx @@ -77,6 +77,10 @@ function App() { features, columns, data, + // initialState: { columnOrder: ['lastName', 'firstName'] }, // set column order on first render + // atoms: { columnOrder: columnOrderAtom }, // preferred: own ordering state with an external atom + // state: { columnOrder }, // classic controlled state; pair with onColumnOrderChange + // onColumnOrderChange: setColumnOrder, debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/preact/column-pinning-split/package.json b/examples/preact/column-pinning-split/package.json index 55121e5dbf..89b373eb75 100644 --- a/examples/preact/column-pinning-split/package.json +++ b/examples/preact/column-pinning-split/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-pinning-split/src/main.tsx b/examples/preact/column-pinning-split/src/main.tsx index c94d57926e..21914c8343 100644 --- a/examples/preact/column-pinning-split/src/main.tsx +++ b/examples/preact/column-pinning-split/src/main.tsx @@ -78,6 +78,11 @@ function App() { features, columns, data, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/preact/column-pinning-sticky/package.json b/examples/preact/column-pinning-sticky/package.json index 7f55cabb4e..4aac397b59 100644 --- a/examples/preact/column-pinning-sticky/package.json +++ b/examples/preact/column-pinning-sticky/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-pinning-sticky/src/main.tsx b/examples/preact/column-pinning-sticky/src/main.tsx index 397a01f426..9e4085fa88 100644 --- a/examples/preact/column-pinning-sticky/src/main.tsx +++ b/examples/preact/column-pinning-sticky/src/main.tsx @@ -108,10 +108,15 @@ function App() { features, columns, data, + columnResizeMode: 'onChange', + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, - columnResizeMode: 'onChange', }, (state) => state, // default selector ) diff --git a/examples/preact/column-pinning/package.json b/examples/preact/column-pinning/package.json index beb2fd535d..6f9143fd33 100644 --- a/examples/preact/column-pinning/package.json +++ b/examples/preact/column-pinning/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-pinning/src/main.tsx b/examples/preact/column-pinning/src/main.tsx index 21d0b4648e..5e41d188aa 100644 --- a/examples/preact/column-pinning/src/main.tsx +++ b/examples/preact/column-pinning/src/main.tsx @@ -81,9 +81,14 @@ function App() { const table = useAppTable( { - debugTable: true, columns, data, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true + debugTable: true, }, (state) => state, // default selector ) diff --git a/examples/preact/column-resizing-performant/package.json b/examples/preact/column-resizing-performant/package.json index 02e0920837..56d64e0ee4 100644 --- a/examples/preact/column-resizing-performant/package.json +++ b/examples/preact/column-resizing-performant/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-resizing-performant/src/main.tsx b/examples/preact/column-resizing-performant/src/main.tsx index d7df0609e8..9f70558ed3 100644 --- a/examples/preact/column-resizing-performant/src/main.tsx +++ b/examples/preact/column-resizing-performant/src/main.tsx @@ -77,6 +77,12 @@ function App() { maxSize: 800, }, columnResizeMode: 'onChange', + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // columnResizeDirection: 'rtl', // calculate resize offsets right-to-left; default 'ltr' + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/preact/column-resizing/package.json b/examples/preact/column-resizing/package.json index 82b4e93beb..fa2aba8bf4 100644 --- a/examples/preact/column-resizing/package.json +++ b/examples/preact/column-resizing/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-resizing/src/main.tsx b/examples/preact/column-resizing/src/main.tsx index 85c276c018..7f70cdd35d 100644 --- a/examples/preact/column-resizing/src/main.tsx +++ b/examples/preact/column-resizing/src/main.tsx @@ -83,6 +83,11 @@ function App() { data, columnResizeMode, columnResizeDirection, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/preact/column-sizing/package.json b/examples/preact/column-sizing/package.json index 58c0318835..ab2fa2b11a 100644 --- a/examples/preact/column-sizing/package.json +++ b/examples/preact/column-sizing/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-sizing/src/main.tsx b/examples/preact/column-sizing/src/main.tsx index 2723fade32..cd2372fef0 100644 --- a/examples/preact/column-sizing/src/main.tsx +++ b/examples/preact/column-sizing/src/main.tsx @@ -64,6 +64,10 @@ function App() { features, columns, data, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnSizing: columnSizingAtom }, // preferred: own sizing state with an external atom + // state: { columnSizing }, // classic controlled state; pair with onColumnSizingChange + // onColumnSizingChange: setColumnSizing, debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/preact/column-visibility/package.json b/examples/preact/column-visibility/package.json index 9f7cc52336..7821bbc831 100644 --- a/examples/preact/column-visibility/package.json +++ b/examples/preact/column-visibility/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/column-visibility/src/main.tsx b/examples/preact/column-visibility/src/main.tsx index da33740ddb..f207c529e0 100644 --- a/examples/preact/column-visibility/src/main.tsx +++ b/examples/preact/column-visibility/src/main.tsx @@ -70,6 +70,11 @@ function App() { features, columns, data, + // initialState: { columnVisibility: { visits: false } }, // hide columns on first render + // atoms: { columnVisibility: columnVisibilityAtom }, // preferred: own visibility state with an external atom + // state: { columnVisibility }, // classic controlled state; pair with onColumnVisibilityChange + // onColumnVisibilityChange: setColumnVisibility, + // enableHiding: false, // prevent every column from being hidden; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/preact/composable-tables/package.json b/examples/preact/composable-tables/package.json index f5d2678ab0..56a6853211 100644 --- a/examples/preact/composable-tables/package.json +++ b/examples/preact/composable-tables/package.json @@ -15,8 +15,8 @@ "@faker-js/faker": "^10.5.0", "@tanstack/preact-devtools": "^0.10.8", "@tanstack/preact-store": "^0.13.1", - "@tanstack/preact-table": "^9.0.0-beta.43", - "@tanstack/preact-table-devtools": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", + "@tanstack/preact-table-devtools": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/composable-tables/src/components/cell-components.tsx b/examples/preact/composable-tables/src/components/cell-components.tsx index ebd1d03de0..2982459717 100644 --- a/examples/preact/composable-tables/src/components/cell-components.tsx +++ b/examples/preact/composable-tables/src/components/cell-components.tsx @@ -24,7 +24,7 @@ export function SelectCell() { checked={row.getIsSelected()} disabled={!row.getCanSelect()} indeterminate={row.getIsSomeSelected()} - onChange={row.getToggleSelectedHandler()} + onClick={row.getToggleSelectedHandler()} /> ) } diff --git a/examples/preact/custom-plugin/package.json b/examples/preact/custom-plugin/package.json index b026f0b4e6..29e409c57f 100644 --- a/examples/preact/custom-plugin/package.json +++ b/examples/preact/custom-plugin/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/expanding/package.json b/examples/preact/expanding/package.json index 1a3255c4fc..054b97aab6 100644 --- a/examples/preact/expanding/package.json +++ b/examples/preact/expanding/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/preact-table": "^9.0.0-beta.43", + "@tanstack/preact-table": "^9.0.0-beta.46", "preact": "^10.29.2" }, "devDependencies": { diff --git a/examples/preact/expanding/src/main.tsx b/examples/preact/expanding/src/main.tsx index 3662b122cf..dcc80e64cd 100644 --- a/examples/preact/expanding/src/main.tsx +++ b/examples/preact/expanding/src/main.tsx @@ -78,7 +78,9 @@ function App() { (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) } indeterminate={row.getIsSomeSelected()} - onChange={row.getToggleSelectedHandler()} + onClick={row.getToggleSelectedHandler({ + // selectChildren: false + })} />{' '} {row.getCanExpand() ? ( ({data().length.toLocaleString()} rows) +

Hold Shift while selecting rows to select or deselect a range.

+

{table.getSelectedRowIds().length.toLocaleString()} rows selected

- 
{JSON.stringify(table.store.get(), null, 2)}
) } @@ -236,4 +259,33 @@ function TableBodyRow(props: { ) } +function IndeterminateCheckbox(props: { + indeterminate?: boolean + class?: string + checked?: boolean + disabled?: boolean + onChange?: (event: Event) => void + onClick?: (event: MouseEvent) => void +}) { + let ref: HTMLInputElement | undefined + + createEffect(() => { + if (typeof props.indeterminate === 'boolean' && ref) { + ref.indeterminate = !props.checked && props.indeterminate + } + }) + + return ( + + ) +} + export default App diff --git a/examples/solid/with-tanstack-form/package.json b/examples/solid/with-tanstack-form/package.json index a623de0baa..194fd05b27 100644 --- a/examples/solid/with-tanstack-form/package.json +++ b/examples/solid/with-tanstack-form/package.json @@ -21,8 +21,8 @@ "@tanstack/solid-devtools": "^0.8.8", "@tanstack/solid-form": "^1.33.1", "@tanstack/solid-form-devtools": "^0.2.30", - "@tanstack/solid-table": "^9.0.0-beta.43", - "@tanstack/solid-table-devtools": "^9.0.0-beta.43", + "@tanstack/solid-table": "^9.0.0-beta.46", + "@tanstack/solid-table-devtools": "^9.0.0-beta.46", "solid-js": "^1.9.13", "zod": "^4.4.3" } diff --git a/examples/solid/with-tanstack-query/package.json b/examples/solid/with-tanstack-query/package.json index 73fe1441a5..2cb53f3b45 100644 --- a/examples/solid/with-tanstack-query/package.json +++ b/examples/solid/with-tanstack-query/package.json @@ -20,7 +20,7 @@ "dependencies": { "@tanstack/solid-query": "^5.101.2", "@tanstack/solid-store": "^0.11.0", - "@tanstack/solid-table": "^9.0.0-beta.43", + "@tanstack/solid-table": "^9.0.0-beta.46", "solid-js": "^1.9.13" } } diff --git a/examples/solid/with-tanstack-router/package.json b/examples/solid/with-tanstack-router/package.json index 69c201a884..a4dec4541e 100644 --- a/examples/solid/with-tanstack-router/package.json +++ b/examples/solid/with-tanstack-router/package.json @@ -22,7 +22,7 @@ "@tanstack/solid-pacer": "^0.21.1", "@tanstack/solid-query": "^5.101.2", "@tanstack/solid-router": "^1.170.17", - "@tanstack/solid-table": "^9.0.0-beta.43", + "@tanstack/solid-table": "^9.0.0-beta.46", "solid-js": "^1.9.13" } } diff --git a/examples/svelte/basic-app-table/package.json b/examples/svelte/basic-app-table/package.json index 717e6a8685..76b1f1de87 100644 --- a/examples/svelte/basic-app-table/package.json +++ b/examples/svelte/basic-app-table/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/basic-create-table/package.json b/examples/svelte/basic-create-table/package.json index 389881b3e8..ec88f043f0 100644 --- a/examples/svelte/basic-create-table/package.json +++ b/examples/svelte/basic-create-table/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/basic-dynamic-columns/package.json b/examples/svelte/basic-dynamic-columns/package.json index 1c5bd33f60..b5a5daf911 100644 --- a/examples/svelte/basic-dynamic-columns/package.json +++ b/examples/svelte/basic-dynamic-columns/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/basic-external-atoms/package.json b/examples/svelte/basic-external-atoms/package.json index e3da74e6b0..8de148fad9 100644 --- a/examples/svelte/basic-external-atoms/package.json +++ b/examples/svelte/basic-external-atoms/package.json @@ -17,7 +17,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/basic-external-state/package.json b/examples/svelte/basic-external-state/package.json index 49c5ed2712..42d07d1fe5 100644 --- a/examples/svelte/basic-external-state/package.json +++ b/examples/svelte/basic-external-state/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/basic-snippets/package.json b/examples/svelte/basic-snippets/package.json index 885c726de6..5b5f808626 100644 --- a/examples/svelte/basic-snippets/package.json +++ b/examples/svelte/basic-snippets/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-groups/package.json b/examples/svelte/column-groups/package.json index fbc8be544f..5498bf08b1 100644 --- a/examples/svelte/column-groups/package.json +++ b/examples/svelte/column-groups/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-ordering/package.json b/examples/svelte/column-ordering/package.json index 013564abaa..8d64b9cdc6 100644 --- a/examples/svelte/column-ordering/package.json +++ b/examples/svelte/column-ordering/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-ordering/src/App.svelte b/examples/svelte/column-ordering/src/App.svelte index 85a8d845c9..ad79e4ffbe 100644 --- a/examples/svelte/column-ordering/src/App.svelte +++ b/examples/svelte/column-ordering/src/App.svelte @@ -103,6 +103,8 @@ }, onColumnOrderChange: setColumnOrder, onColumnVisibilityChange: setColumnVisibility, + // initialState: { columnOrder: ['lastName', 'firstName'] }, // set column order on first render + // atoms: { columnOrder: columnOrderAtom }, // preferred: own ordering state with an external atom debugTable: true, }) diff --git a/examples/svelte/column-pinning-split/package.json b/examples/svelte/column-pinning-split/package.json index 62011134e4..3175d3d421 100644 --- a/examples/svelte/column-pinning-split/package.json +++ b/examples/svelte/column-pinning-split/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-pinning-split/src/App.svelte b/examples/svelte/column-pinning-split/src/App.svelte index 82232d19b8..61d7c3d2b2 100644 --- a/examples/svelte/column-pinning-split/src/App.svelte +++ b/examples/svelte/column-pinning-split/src/App.svelte @@ -84,6 +84,11 @@ get data() { return data }, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/svelte/column-pinning-sticky/package.json b/examples/svelte/column-pinning-sticky/package.json index 426e230780..b6d4dc0271 100644 --- a/examples/svelte/column-pinning-sticky/package.json +++ b/examples/svelte/column-pinning-sticky/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-pinning-sticky/src/App.svelte b/examples/svelte/column-pinning-sticky/src/App.svelte index d689712d25..23643b9081 100644 --- a/examples/svelte/column-pinning-sticky/src/App.svelte +++ b/examples/svelte/column-pinning-sticky/src/App.svelte @@ -115,10 +115,15 @@ get data() { return data }, + columnResizeMode: 'onChange', + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, - columnResizeMode: 'onChange', }, (state) => state, ) diff --git a/examples/svelte/column-pinning/package.json b/examples/svelte/column-pinning/package.json index 7b14dcc89c..45fa7b30c1 100644 --- a/examples/svelte/column-pinning/package.json +++ b/examples/svelte/column-pinning/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-pinning/src/App.svelte b/examples/svelte/column-pinning/src/App.svelte index d8aae73977..51b6069e63 100644 --- a/examples/svelte/column-pinning/src/App.svelte +++ b/examples/svelte/column-pinning/src/App.svelte @@ -121,6 +121,9 @@ onColumnOrderChange: setColumnOrder, onColumnPinningChange: setColumnPinning, onColumnVisibilityChange: setColumnVisibility, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, }) diff --git a/examples/svelte/column-resizing-performant/package.json b/examples/svelte/column-resizing-performant/package.json index 4e4362135e..25f4a21248 100644 --- a/examples/svelte/column-resizing-performant/package.json +++ b/examples/svelte/column-resizing-performant/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-resizing-performant/src/App.svelte b/examples/svelte/column-resizing-performant/src/App.svelte index 42d7c880ef..02111c12b6 100644 --- a/examples/svelte/column-resizing-performant/src/App.svelte +++ b/examples/svelte/column-resizing-performant/src/App.svelte @@ -81,6 +81,12 @@ }, defaultColumn: { minSize: 60, maxSize: 800 }, columnResizeMode: 'onChange', + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // columnResizeDirection: 'rtl', // calculate resize offsets right-to-left; default 'ltr' + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/svelte/column-resizing/package.json b/examples/svelte/column-resizing/package.json index 888f386f69..75169a760a 100644 --- a/examples/svelte/column-resizing/package.json +++ b/examples/svelte/column-resizing/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-resizing/src/App.svelte b/examples/svelte/column-resizing/src/App.svelte index c2dc10cc45..eb874d637a 100644 --- a/examples/svelte/column-resizing/src/App.svelte +++ b/examples/svelte/column-resizing/src/App.svelte @@ -87,6 +87,11 @@ get columnResizeDirection() { return columnResizeDirection }, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/svelte/column-sizing/package.json b/examples/svelte/column-sizing/package.json index e6c2d265b9..ca605c7303 100644 --- a/examples/svelte/column-sizing/package.json +++ b/examples/svelte/column-sizing/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-sizing/src/App.svelte b/examples/svelte/column-sizing/src/App.svelte index f0bfa3d1d1..597644d705 100644 --- a/examples/svelte/column-sizing/src/App.svelte +++ b/examples/svelte/column-sizing/src/App.svelte @@ -59,6 +59,10 @@ get data() { return data }, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnSizing: columnSizingAtom }, // preferred: own sizing state with an external atom + // state: { columnSizing }, // classic controlled state; pair with onColumnSizingChange + // onColumnSizingChange: setColumnSizing, debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/svelte/column-visibility/package.json b/examples/svelte/column-visibility/package.json index a0832b9ac5..aaa3ffaa8f 100644 --- a/examples/svelte/column-visibility/package.json +++ b/examples/svelte/column-visibility/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/column-visibility/src/App.svelte b/examples/svelte/column-visibility/src/App.svelte index 09e535fba7..16e79aeeec 100644 --- a/examples/svelte/column-visibility/src/App.svelte +++ b/examples/svelte/column-visibility/src/App.svelte @@ -92,6 +92,9 @@ }, }, onColumnVisibilityChange: setColumnVisibility, + // initialState: { columnVisibility: { visits: false } }, // hide columns on first render + // atoms: { columnVisibility: columnVisibilityAtom }, // preferred: own visibility state with an external atom + // enableHiding: false, // prevent every column from being hidden; default true debugTable: true, }) diff --git a/examples/svelte/composable-tables/package.json b/examples/svelte/composable-tables/package.json index a34b1fceaa..d392d177a9 100644 --- a/examples/svelte/composable-tables/package.json +++ b/examples/svelte/composable-tables/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/composable-tables/src/components/SelectCell.svelte b/examples/svelte/composable-tables/src/components/SelectCell.svelte index 6b144f1a07..a290ec95d4 100644 --- a/examples/svelte/composable-tables/src/components/SelectCell.svelte +++ b/examples/svelte/composable-tables/src/components/SelectCell.svelte @@ -27,5 +27,5 @@ checked={row.getIsSelected()} disabled={!row.getCanSelect()} use:setIndeterminate={!row.getIsSelected() && row.getIsSomeSelected()} - onchange={row.getToggleSelectedHandler()} + onclick={row.getToggleSelectedHandler()} /> diff --git a/examples/svelte/expanding/package.json b/examples/svelte/expanding/package.json index c6fde3a756..42126a7cab 100644 --- a/examples/svelte/expanding/package.json +++ b/examples/svelte/expanding/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/expanding/src/App.svelte b/examples/svelte/expanding/src/App.svelte index c0b42f792f..084e405344 100644 --- a/examples/svelte/expanding/src/App.svelte +++ b/examples/svelte/expanding/src/App.svelte @@ -95,6 +95,19 @@ return data }, getSubRows: (row) => row.subRows, + // initialState: { expanded: { '0': true } }, // expand rows on first render + // atoms: { expanded: expandedAtom }, // preferred: own expanded state with an external atom + // state: { expanded }, // classic controlled state; pair with onExpandedChange + // onExpandedChange: setExpanded, + // enableExpanding: false, // disable expanding for every row; default true + // getRowCanExpand: row => row.original.subRows?.length > 0, // override which rows can expand + // getIsRowExpanded: row => row.id === '0', // override whether a row is expanded + // manualExpanding: true, // pass data that is already expanded, for example from a server + // paginateExpandedRows: false, // keep expanded children on their parent page; default true + // autoResetExpanded: false, // keep expanded rows after page-altering changes; default true + // autoResetAll: false, // turn off every feature's automatic reset, including expansion + // filterFromLeafRows: true, // with filtering, keep parents whose descendants match + // maxLeafRowFilterDepth: 0, // with filtering, only filter root rows debugTable: true, }, (state) => ({ @@ -165,7 +178,9 @@ (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())} use:setIndeterminate={!row.getIsSelected() && row.getIsSomeSelected()} - onchange={row.getToggleSelectedHandler()} + onclick={row.getToggleSelectedHandler({ + // selectChildren: false + })} class="sortable-header" /> {' '} diff --git a/examples/svelte/filtering/package.json b/examples/svelte/filtering/package.json index 47b77bae21..d89ab5ed2e 100644 --- a/examples/svelte/filtering/package.json +++ b/examples/svelte/filtering/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/filters-faceted/package.json b/examples/svelte/filters-faceted/package.json index d039ea5482..f5119ac858 100644 --- a/examples/svelte/filters-faceted/package.json +++ b/examples/svelte/filters-faceted/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/filters-faceted/src/App.svelte b/examples/svelte/filters-faceted/src/App.svelte index 1c6866b5b9..271bbfaba8 100644 --- a/examples/svelte/filters-faceted/src/App.svelte +++ b/examples/svelte/filters-faceted/src/App.svelte @@ -74,6 +74,16 @@ }, columns, globalFilterFn: 'includesString', + // Column faceting has no table-level options; configure its row-model factories in `features`. + // initialState: { columnFilters: [{ id: 'firstName', value: 'Jane' }] }, // set filters once + // atoms: { columnFilters: columnFiltersAtom }, // preferred: own column filters with an external atom + // state: { columnFilters }, // classic controlled state; pair with onColumnFiltersChange + // onColumnFiltersChange: setColumnFilters, + // enableFilters: false, // disable all column and global filtering; default true + // enableColumnFilters: false, // disable per-column filters; default true + // filterFromLeafRows: true, // keep parents whose descendants match; default filters from parents down + // maxLeafRowFilterDepth: 1, // only filter through this nested-row depth; default 100 + // manualFiltering: true, // pass data that is already filtered, for example from a server debugTable: true, debugHeaders: true, debugColumns: false, diff --git a/examples/svelte/filters-fuzzy/package.json b/examples/svelte/filters-fuzzy/package.json index 6215fccbe4..b9dffa2771 100644 --- a/examples/svelte/filters-fuzzy/package.json +++ b/examples/svelte/filters-fuzzy/package.json @@ -15,7 +15,7 @@ "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", "@tanstack/match-sorter-utils": "^9.0.0-beta.41", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/filters-fuzzy/src/App.svelte b/examples/svelte/filters-fuzzy/src/App.svelte index da6e61bf1c..6b6f3cb7eb 100644 --- a/examples/svelte/filters-fuzzy/src/App.svelte +++ b/examples/svelte/filters-fuzzy/src/App.svelte @@ -47,6 +47,18 @@ return data }, globalFilterFn: 'fuzzy', + // initialState: { columnFilters: [{ id: 'firstName', value: 'Jane' }], globalFilter: 'Jane' }, // set filters once + // atoms: { columnFilters: columnFiltersAtom, globalFilter: globalFilterAtom }, // preferred external ownership + // state: { columnFilters, globalFilter }, // classic controlled state; pair with the callbacks below + // onColumnFiltersChange: setColumnFilters, + // onGlobalFilterChange: setGlobalFilter, + // enableFilters: false, // disable all column and global filtering; default true + // enableColumnFilters: false, // disable per-column filters; default true + // filterFromLeafRows: true, // keep parents whose descendants match; default filters from parents down + // maxLeafRowFilterDepth: 1, // only filter through this nested-row depth; default 100 + // manualFiltering: true, // pass data that is already filtered, for example from a server + // enableGlobalFilter: false, // disable the global filter input; default true + // getColumnCanGlobalFilter: column => column.id !== 'status', // opt a column out of global filtering debugTable: true, debugHeaders: true, debugColumns: false, diff --git a/examples/svelte/grouping/package.json b/examples/svelte/grouping/package.json index e59ca4d94a..6e70c94373 100644 --- a/examples/svelte/grouping/package.json +++ b/examples/svelte/grouping/package.json @@ -14,7 +14,7 @@ "@faker-js/faker": "^10.5.0", "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/grouping/src/App.svelte b/examples/svelte/grouping/src/App.svelte index 27c676d489..401fc40f92 100644 --- a/examples/svelte/grouping/src/App.svelte +++ b/examples/svelte/grouping/src/App.svelte @@ -88,6 +88,13 @@ get data() { return data }, + // initialState: { grouping: ['status'] }, // group by a column on first render + // atoms: { grouping: groupingAtom }, // preferred: own grouping state with an external atom + // state: { grouping }, // classic controlled state; pair with onGroupingChange + // onGroupingChange: setGrouping, + // enableGrouping: false, // disable grouping for every column; default true + // groupedColumnMode: 'remove', // remove grouped columns instead of moving them to the start; default 'reorder' + // manualGrouping: true, // pass rows that are already grouped and aggregated, for example from a server debugTable: true, }, (state) => state, diff --git a/examples/svelte/kitchen-sink/package.json b/examples/svelte/kitchen-sink/package.json index 65e30954c5..a690e38282 100644 --- a/examples/svelte/kitchen-sink/package.json +++ b/examples/svelte/kitchen-sink/package.json @@ -15,7 +15,7 @@ "@rollup/plugin-replace": "^6.0.3", "@sveltejs/vite-plugin-svelte": "^7.1.2", "@tanstack/match-sorter-utils": "^9.0.0-beta.41", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "@tsconfig/svelte": "^5.0.8", "svelte": "^5.56.2", "svelte-check": "^4.6.0", diff --git a/examples/svelte/kitchen-sink/src/App.svelte b/examples/svelte/kitchen-sink/src/App.svelte index 009a4ac998..a02a6cd46e 100644 --- a/examples/svelte/kitchen-sink/src/App.svelte +++ b/examples/svelte/kitchen-sink/src/App.svelte @@ -523,7 +523,7 @@ checked={cell.row.getIsSelected()} disabled={!cell.row.getCanSelect()} indeterminate={cell.row.getIsSomeSelected()} - onchange={cell.row.getToggleSelectedHandler()} + onclick={cell.row.getToggleSelectedHandler()} />{' '} ({data.length.toLocaleString()} rows) +

Hold Shift while selecting rows to select or deselect a range.

+

{table.getSelectedRowIds().length.toLocaleString()} rows selected

{#each headerGroup.headers as header (header.id)} -
{ - if (e.key === 'Enter' || e.key === ' ') { - header.column.getToggleSortingHandler()?.(e) - } - }} - > - - {#if header.column.getIsSorted() === 'asc'} - {' '}🔼 - {:else if header.column.getIsSorted() === 'desc'} - {' '}🔽 - {/if} -
+ {#if header.column.id === 'select'} + + {:else} +
{ + if (e.key === 'Enter' || e.key === ' ') { + header.column.getToggleSortingHandler()?.(e) + } + }} + > + + {#if header.column.getIsSorted() === 'asc'} + {' '}🔼 + {:else if header.column.getIsSorted() === 'desc'} + {' '}🔽 + {/if} +
+ {/if} {/each} @@ -177,7 +207,19 @@ > {#each row.getAllCells() as cell (cell.id)} - + {#if cell.column.id === 'select'} + + {:else} + + {/if} {/each} diff --git a/examples/svelte/with-tanstack-form/package.json b/examples/svelte/with-tanstack-form/package.json index 2c96a2fef7..5ff91fa44c 100644 --- a/examples/svelte/with-tanstack-form/package.json +++ b/examples/svelte/with-tanstack-form/package.json @@ -23,7 +23,7 @@ "dependencies": { "@tanstack/form-core": "^1.33.1", "@tanstack/svelte-form": "^1.33.1", - "@tanstack/svelte-table": "^9.0.0-beta.43", + "@tanstack/svelte-table": "^9.0.0-beta.46", "zod": "^4.4.3" } } diff --git a/examples/svelte/with-tanstack-query/package.json b/examples/svelte/with-tanstack-query/package.json index d325b1231a..958ada4526 100644 --- a/examples/svelte/with-tanstack-query/package.json +++ b/examples/svelte/with-tanstack-query/package.json @@ -22,6 +22,6 @@ }, "dependencies": { "@tanstack/svelte-query": "^6.1.36", - "@tanstack/svelte-table": "^9.0.0-beta.43" + "@tanstack/svelte-table": "^9.0.0-beta.46" } } diff --git a/examples/vanilla/basic/package.json b/examples/vanilla/basic/package.json index fc5564ec94..fd2876706e 100644 --- a/examples/vanilla/basic/package.json +++ b/examples/vanilla/basic/package.json @@ -17,6 +17,6 @@ "vite": "^8.1.0" }, "dependencies": { - "@tanstack/table-core": "^9.0.0-beta.43" + "@tanstack/table-core": "^9.0.0-beta.46" } } diff --git a/examples/vanilla/pagination/package.json b/examples/vanilla/pagination/package.json index 5b757e0560..27722136ab 100644 --- a/examples/vanilla/pagination/package.json +++ b/examples/vanilla/pagination/package.json @@ -17,6 +17,6 @@ "vite": "^8.1.0" }, "dependencies": { - "@tanstack/table-core": "^9.0.0-beta.43" + "@tanstack/table-core": "^9.0.0-beta.46" } } diff --git a/examples/vanilla/pagination/src/main.ts b/examples/vanilla/pagination/src/main.ts index 0514d15f3a..4489cb6937 100644 --- a/examples/vanilla/pagination/src/main.ts +++ b/examples/vanilla/pagination/src/main.ts @@ -241,6 +241,14 @@ const table = constructTable({ pageSize: 10, }, }, + // atoms: { pagination: paginationAtom }, // preferred: own pagination state with an external atom + // state: { pagination }, // classic controlled state; pair with onPaginationChange + // onPaginationChange: setPagination, + // autoResetPageIndex: false, // keep the current page after page-altering changes; default true + // autoResetAll: false, // turn off every feature's automatic reset, including page index + // manualPagination: true, // pass data that is already paginated, for example from a server + // pageCount: 10, // total pages for manual pagination; use -1 when unknown + // rowCount: 1_000, // total rows for manual pagination; pageCount is calculated from this and pageSize debugTable: true, }) diff --git a/examples/vanilla/sorting/package.json b/examples/vanilla/sorting/package.json index 81ba907374..43131162fd 100644 --- a/examples/vanilla/sorting/package.json +++ b/examples/vanilla/sorting/package.json @@ -17,6 +17,6 @@ "vite": "^8.1.0" }, "dependencies": { - "@tanstack/table-core": "^9.0.0-beta.43" + "@tanstack/table-core": "^9.0.0-beta.46" } } diff --git a/examples/vanilla/sorting/src/main.ts b/examples/vanilla/sorting/src/main.ts index abacd18640..9535211b20 100644 --- a/examples/vanilla/sorting/src/main.ts +++ b/examples/vanilla/sorting/src/main.ts @@ -181,6 +181,19 @@ const table = constructTable({ features, data, columns, + // initialState: { sorting: [{ id: 'firstName', desc: false }] }, // set the initial sort once + // atoms: { sorting: sortingAtom }, // preferred: own sorting state with an external atom + // state: { sorting }, // classic controlled state; pair with onSortingChange + // onSortingChange: setSorting, + // enableSorting: false, // disable sorting for every column; default true + // sortDescFirst: true, // start every sort cycle with descending order; inferred by column data by default + // enableSortingRemoval: false, // keep a sorted column sorted when toggling; default true + // enableMultiSort: false, // disable Shift-click multi-sorting; default true + // enableMultiRemove: false, // prevent a multi-sort toggle from removing a sorted column; default true + // isMultiSortEvent: () => true, // make every sort interaction a multi-sort; default requires Shift + // maxMultiSortColCount: 3, // limit multi-sorting to three columns; default Infinity + // manualSorting: true, // pass data that is already sorted, for example from a server + // autoResetPageIndex: false, // with pagination, keep the current page when sorting changes; default true debugTable: true, }) diff --git a/examples/vue/basic-dynamic-columns/package.json b/examples/vue/basic-dynamic-columns/package.json index 7ef9f2843f..caa6f4eb71 100644 --- a/examples/vue/basic-dynamic-columns/package.json +++ b/examples/vue/basic-dynamic-columns/package.json @@ -12,8 +12,8 @@ "dependencies": { "@faker-js/faker": "^10.5.0", "@tanstack/vue-devtools": "^0.2.22", - "@tanstack/vue-table": "^9.0.0-beta.43", - "@tanstack/vue-table-devtools": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", + "@tanstack/vue-table-devtools": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/basic-external-atoms/package.json b/examples/vue/basic-external-atoms/package.json index 64f95d4621..b7da04e194 100644 --- a/examples/vue/basic-external-atoms/package.json +++ b/examples/vue/basic-external-atoms/package.json @@ -13,8 +13,8 @@ "@faker-js/faker": "^10.5.0", "@tanstack/vue-devtools": "^0.2.22", "@tanstack/vue-store": "^0.11.0", - "@tanstack/vue-table": "^9.0.0-beta.43", - "@tanstack/vue-table-devtools": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", + "@tanstack/vue-table-devtools": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/basic-external-state/package.json b/examples/vue/basic-external-state/package.json index 3a647d3e37..86b8733c52 100644 --- a/examples/vue/basic-external-state/package.json +++ b/examples/vue/basic-external-state/package.json @@ -12,8 +12,8 @@ "dependencies": { "@faker-js/faker": "^10.5.0", "@tanstack/vue-devtools": "^0.2.22", - "@tanstack/vue-table": "^9.0.0-beta.43", - "@tanstack/vue-table-devtools": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", + "@tanstack/vue-table-devtools": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/basic-use-app-table/package.json b/examples/vue/basic-use-app-table/package.json index 8029a9bc17..cdf5d2819c 100644 --- a/examples/vue/basic-use-app-table/package.json +++ b/examples/vue/basic-use-app-table/package.json @@ -11,8 +11,8 @@ }, "dependencies": { "@tanstack/vue-devtools": "^0.2.22", - "@tanstack/vue-table": "^9.0.0-beta.43", - "@tanstack/vue-table-devtools": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", + "@tanstack/vue-table-devtools": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/basic-use-table/package.json b/examples/vue/basic-use-table/package.json index 8e3bad7542..fcf2e133c2 100644 --- a/examples/vue/basic-use-table/package.json +++ b/examples/vue/basic-use-table/package.json @@ -11,8 +11,8 @@ }, "dependencies": { "@tanstack/vue-devtools": "^0.2.22", - "@tanstack/vue-table": "^9.0.0-beta.43", - "@tanstack/vue-table-devtools": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", + "@tanstack/vue-table-devtools": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-groups/package.json b/examples/vue/column-groups/package.json index f5eb76b75f..5d1bbb61d8 100644 --- a/examples/vue/column-groups/package.json +++ b/examples/vue/column-groups/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-ordering/package.json b/examples/vue/column-ordering/package.json index 2b44fb453f..203bcd52a2 100644 --- a/examples/vue/column-ordering/package.json +++ b/examples/vue/column-ordering/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue index 9841ae45cd..3e63ff22a3 100644 --- a/examples/vue/column-ordering/src/App.vue +++ b/examples/vue/column-ordering/src/App.vue @@ -84,6 +84,10 @@ const table = useTable({ get columns() { return columns.value }, + // initialState: { columnOrder: ['lastName', 'firstName'] }, // set column order on first render + // atoms: { columnOrder: columnOrderAtom }, // preferred: own ordering state with an external atom + // state: { columnOrder }, // classic controlled state; pair with onColumnOrderChange + // onColumnOrderChange: setColumnOrder, debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/vue/column-pinning-split/package.json b/examples/vue/column-pinning-split/package.json index 40d1875c51..457c4ac5f8 100644 --- a/examples/vue/column-pinning-split/package.json +++ b/examples/vue/column-pinning-split/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue index 7450cd0b66..fb53696358 100644 --- a/examples/vue/column-pinning-split/src/App.vue +++ b/examples/vue/column-pinning-split/src/App.vue @@ -78,6 +78,11 @@ const table = useTable({ get columns() { return columns.value }, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/vue/column-pinning-sticky/package.json b/examples/vue/column-pinning-sticky/package.json index c4a700b926..020a3b151b 100644 --- a/examples/vue/column-pinning-sticky/package.json +++ b/examples/vue/column-pinning-sticky/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-pinning-sticky/src/App.vue b/examples/vue/column-pinning-sticky/src/App.vue index f6fc8be4d3..310d50402c 100644 --- a/examples/vue/column-pinning-sticky/src/App.vue +++ b/examples/vue/column-pinning-sticky/src/App.vue @@ -79,6 +79,11 @@ const table = useTable({ return columns.value }, columnResizeMode: 'onChange', + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugColumnVisibilityFeature: true, debugColumnPinningFeature: true, debugColumnSizingFeature: true, diff --git a/examples/vue/column-pinning/package.json b/examples/vue/column-pinning/package.json index eff66714d5..6211df234b 100644 --- a/examples/vue/column-pinning/package.json +++ b/examples/vue/column-pinning/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue index fd0ce2fbf3..5492fcd4e4 100644 --- a/examples/vue/column-pinning/src/App.vue +++ b/examples/vue/column-pinning/src/App.vue @@ -88,6 +88,11 @@ const table = useTable({ get columns() { return columns.value }, + // initialState: { columnPinning: { start: ['firstName'], end: [] } }, // `start`/`end` follow layout direction + // atoms: { columnPinning: columnPinningAtom }, // preferred: own pinning state with an external atom + // state: { columnPinning }, // classic controlled state; pair with onColumnPinningChange + // onColumnPinningChange: setColumnPinning, + // enableColumnPinning: false, // disable pinning for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/vue/column-resizing-performant/package.json b/examples/vue/column-resizing-performant/package.json index 52fbb8d501..f4448ec4fb 100644 --- a/examples/vue/column-resizing-performant/package.json +++ b/examples/vue/column-resizing-performant/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-resizing-performant/src/App.vue b/examples/vue/column-resizing-performant/src/App.vue index 0a0719f544..00db0ba96a 100644 --- a/examples/vue/column-resizing-performant/src/App.vue +++ b/examples/vue/column-resizing-performant/src/App.vue @@ -82,6 +82,12 @@ const table = useTable({ maxSize: 800, }, columnResizeMode: 'onChange', + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // columnResizeDirection: 'rtl', // calculate resize offsets right-to-left; default 'ltr' + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/vue/column-resizing/package.json b/examples/vue/column-resizing/package.json index 7ab8fc83bf..92cf46cf18 100644 --- a/examples/vue/column-resizing/package.json +++ b/examples/vue/column-resizing/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-resizing/src/App.vue b/examples/vue/column-resizing/src/App.vue index edcda1771d..adbd777a63 100644 --- a/examples/vue/column-resizing/src/App.vue +++ b/examples/vue/column-resizing/src/App.vue @@ -91,6 +91,11 @@ const table = useTable({ get columnResizeDirection() { return columnResizeDirection.value }, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnResizing: columnResizingAtom }, // preferred: own transient resize state with an external atom + // state: { columnResizing }, // classic controlled state; pair with onColumnResizingChange + // onColumnResizingChange: setColumnResizing, + // enableColumnResizing: false, // disable resizing for every column; default true debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/vue/column-sizing/package.json b/examples/vue/column-sizing/package.json index 2190669aa0..38d6a75ee7 100644 --- a/examples/vue/column-sizing/package.json +++ b/examples/vue/column-sizing/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-sizing/src/App.vue b/examples/vue/column-sizing/src/App.vue index b010596dd4..e0021f32b4 100644 --- a/examples/vue/column-sizing/src/App.vue +++ b/examples/vue/column-sizing/src/App.vue @@ -61,6 +61,10 @@ const table = useTable({ get columns() { return columns.value }, + // initialState: { columnSizing: { firstName: 200 } }, // set column sizes on first render + // atoms: { columnSizing: columnSizingAtom }, // preferred: own sizing state with an external atom + // state: { columnSizing }, // classic controlled state; pair with onColumnSizingChange + // onColumnSizingChange: setColumnSizing, debugTable: true, debugHeaders: true, debugColumns: true, diff --git a/examples/vue/column-visibility/package.json b/examples/vue/column-visibility/package.json index a2320a2b6e..09893e22f4 100644 --- a/examples/vue/column-visibility/package.json +++ b/examples/vue/column-visibility/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/column-visibility/src/App.tsx b/examples/vue/column-visibility/src/App.tsx index 259cc01e7f..db1360a434 100644 --- a/examples/vue/column-visibility/src/App.tsx +++ b/examples/vue/column-visibility/src/App.tsx @@ -84,12 +84,17 @@ export default defineComponent({ } const table = useTable({ - debugTable: true, features, columns, get data() { return data.value }, + // initialState: { columnVisibility: { visits: false } }, // hide columns on first render + // atoms: { columnVisibility: columnVisibilityAtom }, // preferred: own visibility state with an external atom + // state: { columnVisibility }, // classic controlled state; pair with onColumnVisibilityChange + // onColumnVisibilityChange: setColumnVisibility, + // enableHiding: false, // prevent every column from being hidden; default true + debugTable: true, }) return () => ( diff --git a/examples/vue/composable-tables/package.json b/examples/vue/composable-tables/package.json index c3605d865c..f2183dd2cb 100644 --- a/examples/vue/composable-tables/package.json +++ b/examples/vue/composable-tables/package.json @@ -12,8 +12,8 @@ "dependencies": { "@tanstack/vue-devtools": "^0.2.22", "@tanstack/vue-store": "^0.11.0", - "@tanstack/vue-table": "^9.0.0-beta.43", - "@tanstack/vue-table-devtools": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", + "@tanstack/vue-table-devtools": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/composable-tables/src/components/IndeterminateCheckbox.vue b/examples/vue/composable-tables/src/components/IndeterminateCheckbox.vue index 7ea24e9f0d..ad2744ac23 100644 --- a/examples/vue/composable-tables/src/components/IndeterminateCheckbox.vue +++ b/examples/vue/composable-tables/src/components/IndeterminateCheckbox.vue @@ -6,6 +6,7 @@ const props = defineProps<{ disabled?: boolean indeterminate?: boolean onChange?: (event: Event) => void + onClick?: (event: MouseEvent) => void }>() const inputRef = ref(null) @@ -24,5 +25,6 @@ watchEffect(() => { :checked="props.checked" :disabled="props.disabled" @change="props.onChange" + @click="props.onClick" /> diff --git a/examples/vue/composable-tables/src/components/cell-components.ts b/examples/vue/composable-tables/src/components/cell-components.ts index b39e149cbb..96daad76e7 100644 --- a/examples/vue/composable-tables/src/components/cell-components.ts +++ b/examples/vue/composable-tables/src/components/cell-components.ts @@ -16,7 +16,7 @@ export const SelectCell = defineComponent({ checked: row.getIsSelected(), disabled: !row.getCanSelect(), indeterminate: row.getIsSomeSelected(), - onChange: row.getToggleSelectedHandler(), + onClick: row.getToggleSelectedHandler(), }), ]) } diff --git a/examples/vue/expanding/package.json b/examples/vue/expanding/package.json index 648f44b0bb..d9f2df951e 100644 --- a/examples/vue/expanding/package.json +++ b/examples/vue/expanding/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/expanding/src/App.tsx b/examples/vue/expanding/src/App.tsx index a962eec680..5175b62b03 100644 --- a/examples/vue/expanding/src/App.tsx +++ b/examples/vue/expanding/src/App.tsx @@ -49,6 +49,7 @@ const IndeterminateCheckbox = defineComponent({ checked: Boolean, indeterminate: Boolean, onChange: Function, + onClick: Function, className: String, }, setup(props) { @@ -67,6 +68,7 @@ const IndeterminateCheckbox = defineComponent({ class={`${props.className ?? ''} sortable-header`} checked={props.checked} onChange={props.onChange as any} + onClick={props.onClick as any} /> ) }, @@ -166,7 +168,9 @@ export default defineComponent({ (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) } indeterminate={row.getIsSomeSelected()} - onChange={row.getToggleSelectedHandler()} + onClick={row.getToggleSelectedHandler({ + // selectChildren: false + })} />{' '} {row.getCanExpand() ? (
@@ -109,12 +111,19 @@ const table = useTable({ features, data, columns, - debugTable: true, // enable row selection for all rows get enableRowSelection() { return enableRowSelection.value }, - // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row + // initialState: { rowSelection: { '0': true } }, // select rows on first render + // atoms: { rowSelection: rowSelectionAtom }, // preferred: own selection state with an external atom + // state: { rowSelection }, // classic controlled state; pair with onRowSelectionChange + // onRowSelectionChange: setRowSelection, + // enableMultiRowSelection: false, // allow only one selected row at a time; default true + // enableRowRangeSelection: false, // disable Shift-click range selection; default true + // enableSubRowSelection: false, // do not select a parent's subrows with it; default true + // isRowRangeSelectionEvent: event => Boolean(event.metaKey), // use Meta instead of Shift + debugTable: true, }) useTanStackTableDevtools(table) diff --git a/examples/vue/row-selection/src/IndeterminateCheckbox.vue b/examples/vue/row-selection/src/IndeterminateCheckbox.vue index 24dfe9d2c9..bc612645ec 100644 --- a/examples/vue/row-selection/src/IndeterminateCheckbox.vue +++ b/examples/vue/row-selection/src/IndeterminateCheckbox.vue @@ -7,6 +7,7 @@ const props = defineProps<{ indeterminate: boolean className?: string onChange?: (event: Event) => void + onClick?: (event: MouseEvent) => void }>() const inputRef = ref(null) @@ -26,6 +27,7 @@ watchEffect(() => { :checked="props.checked" :disabled="props.disabled" @change="props.onChange" + @click="props.onClick" v-bind="$attrs" /> diff --git a/examples/vue/sorting/package.json b/examples/vue/sorting/package.json index 3a515c8485..60699e3ab4 100644 --- a/examples/vue/sorting/package.json +++ b/examples/vue/sorting/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue index ebf64c15ef..06bc025578 100644 --- a/examples/vue/sorting/src/App.vue +++ b/examples/vue/sorting/src/App.vue @@ -73,6 +73,19 @@ const table = useTable({ features, data, columns, + // initialState: { sorting: [{ id: 'firstName', desc: false }] }, // set the initial sort once + // atoms: { sorting: sortingAtom }, // preferred: own sorting state with an external atom + // state: { sorting }, // classic controlled state; pair with onSortingChange + // onSortingChange: setSorting, + // enableSorting: false, // disable sorting for every column; default true + // sortDescFirst: true, // start every sort cycle with descending order; inferred by column data by default + // enableSortingRemoval: false, // keep a sorted column sorted when toggling; default true + // enableMultiSort: false, // disable Shift-click multi-sorting; default true + // enableMultiRemove: false, // prevent a multi-sort toggle from removing a sorted column; default true + // isMultiSortEvent: () => true, // make every sort interaction a multi-sort; default requires Shift + // maxMultiSortColCount: 3, // limit multi-sorting to three columns; default Infinity + // manualSorting: true, // pass data that is already sorted, for example from a server + // autoResetPageIndex: false, // with pagination, keep the current page when sorting changes; default true debugTable: true, }) diff --git a/examples/vue/sub-components/package.json b/examples/vue/sub-components/package.json index b858cdc485..09b809f282 100644 --- a/examples/vue/sub-components/package.json +++ b/examples/vue/sub-components/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "vue": "^3.5.38" }, "devDependencies": { diff --git a/examples/vue/virtualized-columns/package.json b/examples/vue/virtualized-columns/package.json index cd056b5af5..c68ebfe186 100644 --- a/examples/vue/virtualized-columns/package.json +++ b/examples/vue/virtualized-columns/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "@tanstack/vue-virtual": "^3.13.31", "vue": "^3.5.38" }, diff --git a/examples/vue/virtualized-infinite-scrolling/package.json b/examples/vue/virtualized-infinite-scrolling/package.json index 80a9ff47a1..7a61669872 100644 --- a/examples/vue/virtualized-infinite-scrolling/package.json +++ b/examples/vue/virtualized-infinite-scrolling/package.json @@ -14,7 +14,7 @@ "@tanstack/match-sorter-utils": "^9.0.0-beta.41", "@tanstack/vue-query": "^5.101.2", "@tanstack/vue-store": "^0.11.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "@tanstack/vue-virtual": "^3.13.31", "vue": "^3.5.38" }, diff --git a/examples/vue/virtualized-rows/package.json b/examples/vue/virtualized-rows/package.json index ebd1665727..4e99ae391f 100644 --- a/examples/vue/virtualized-rows/package.json +++ b/examples/vue/virtualized-rows/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@faker-js/faker": "^10.5.0", - "@tanstack/vue-table": "^9.0.0-beta.43", + "@tanstack/vue-table": "^9.0.0-beta.46", "@tanstack/vue-virtual": "^3.13.31", "vue": "^3.5.38" }, diff --git a/examples/vue/virtualized-rows/src/App.vue b/examples/vue/virtualized-rows/src/App.vue index d5140e05d2..319b75641e 100644 --- a/examples/vue/virtualized-rows/src/App.vue +++ b/examples/vue/virtualized-rows/src/App.vue @@ -5,19 +5,22 @@ import { FlexRender, columnSizingFeature, createSortedRowModel, + rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from '@tanstack/vue-table' import { useVirtualizer } from '@tanstack/vue-virtual' +import IndeterminateCheckbox from './IndeterminateCheckbox.vue' import { makeData } from './makeData' -import type { ColumnDef } from '@tanstack/vue-table' +import type { ColumnDef, Row } from '@tanstack/vue-table' import type { ComponentPublicInstance } from 'vue' import type { Person } from './makeData' const features = tableFeatures({ columnSizingFeature, + rowSelectionFeature, rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns, @@ -64,6 +67,12 @@ function handleDebounceSearch(ev: Event) { } const columns = computed>>(() => [ + { + id: 'select', + header: '', + cell: '', + size: 40, + }, { accessorKey: 'id', header: 'ID', @@ -107,9 +116,16 @@ const table = useTable({ return filteredData.value }, columns: columns.value, + getRowId: (row: Person) => String(row.id), debugTable: false, }) +function toggleSelected(row: Row, event: Event) { + row.getToggleSelectedHandler({ + // selectChildren: false + })(event) +} + const rows = computed(() => table.getRowModel().rows) // The virtualizer needs to know the scrollable container element @@ -146,6 +162,8 @@ function measureElement(el: Element | ComponentPublicInstance | null) { the translateY pixel count different and base it off the the index.

Virtualized Rows

+

Hold Shift while selecting rows to select or deselect a range.

+

{{ table.getSelectedRowIds().length.toLocaleString() }} rows selected