A select-all checkbox with support for an indeterminate state.
Pass indeterminate when some rows are selected and checked when all rows are selected.
0 of 4 rows selected
| Project | Status | |
|---|---|---|
| Website redesign | In progress | |
| Mobile application | Planning | |
| Analytics dashboard | In progress | |
| Customer portal | Complete |
Installation
Copy the Source Code
Copy and paste the following code into your project:
table/header-checkbox/header-checkbox.svelte
table/header-checkbox/index.ts
Folder Structure
Folder Structure
Column definition
The example selects all filtered rows. For page-only selection, use getIsAllPageRowsSelected and toggleAllPageRowsSelected instead.
columns.ts
Render the header
TanStack Table v9 renders the component configuration with FlexRender.
data-table.svelte
Props
Header checkbox props
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | required | Whether all target rows are selected. |
indeterminate | boolean | false | Shows that some, but not all, target rows are selected. |
onCheckedChange | (checked: boolean) => void | required | Called when the user toggles select all. |
aria-label | string | "Select all rows" | Accessible label for the checkbox. |
class | string | undefined | Classes forwarded to the underlying checkbox. |
...restProps | Checkbox props | undefined | Forwards supported checkbox props such as disabled, name, and value. |