A controlled checkbox for selecting an individual table row.
Connect checked and onCheckedChange to the row selection API.
0 of 4 rows selected
| Select | Project | Owner |
|---|---|---|
| Website redesign | Maya Chen | |
| Mobile application | Noah Williams | |
| Analytics dashboard | Aarav Patel | |
| Customer portal | Sofia Garcia |
Installation
Copy the Source Code
Copy and paste the following code into your project:
table/row-checkbox/row-checkbox.svelte
table/row-checkbox/index.ts
Folder Structure
Folder Structure
Column definition
Use renderComponent inside the cell definition. Keep getRowId stable when rows can reorder.
columns.ts
Render the cell
TanStack Table v9 renders the component configuration with FlexRender.
data-table.svelte
Props
Row checkbox props
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | required | Whether the row is selected. |
onCheckedChange | (checked: boolean) => void | required | Called when the user changes the checkbox. |
aria-label | string | "Select row" | 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. |