mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): allow custom inputName for radio/checkbox (#2087)

Browse source 
Closes #2085
This commit is contained in:
Eric Liu 2025-03-09 13:47:08 -07:00 • committed by GitHub
commit 7481b9a995
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 85 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/components/DataTable.svx
View file

@ -1029,10 +1029,18 @@ In the following example, each row in the sortable data table has an overflow me
Set `selectable` to `true` for rows to be multi-selectable.
Bind to `selectedRowIds` to get the ids of the selected rows.
To customize the `input` name for the checkbox, use the `inputName` prop.
<FileSource src="/framed/DataTable/SelectableDataTable" />
## Batch selection
To enable batch selection, set `batchSelection` to `true`.
This checkbox is used to select all rows. It enters an indeterminate state when some rows are selected.
<FileSource src="/framed/DataTable/DataTableBatchSelection" />
## Batch selection with initial selected rows
@ -1051,7 +1059,7 @@ By default, `ToolbarBatchActions` is activated if one or more rows is selected.
Use the `active` prop to control the toolbar. Note that it will still activate if one or more rows are selected.
You can also prevent the default "Cancel" behavior in the dispatched `on:cancel` event.
You can prevent the default "Cancel" behavior in the dispatched `on:cancel` event.
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbarControlled" />
@ -1059,6 +1067,10 @@ You can also prevent the default "Cancel" behavior in the dispatched `on:cancel`
Set `radio` to `true` for only one row to be selected at a time.
Bind to `selectedRowIds` to get the ids of the selected rows. Because it's radio selection, `selectedRowIds` will only contain one id.
To customize the `input` name for the radio button, use the `inputName` prop.
<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
## Non-selectable rows