mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01: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

11
src/DataTable/DataTable.svelte
View file

@ -71,6 +71,14 @@
/** Specify the description of the data table */
export let description = "";
/**
* Specify a name attribute for the input elements
* in a selectable data table (radio or checkbox).
* When the table is inside a form, this name will
* be included in the form data on submit.
*/
export let inputName = "ccs-" + Math.random().toString(36);
/** Set to `true` to use zebra styles */
export let zebra = false;
@ -515,12 +523,12 @@
>
{#if !nonSelectableRowIds.includes(row.id)}
{@const inputId = `${id}-${row.id}`}
{@const inputName = `${id}-name`}
{#if radio}
<RadioButton
id={inputId}
name={inputName}
checked={selectedRowIds.includes(row.id)}
value={row.id}
on:change={() => {
selectedRowIds = [row.id];
dispatch("click:row--select", { row, selected: true });
@ -531,6 +539,7 @@
id={inputId}
name={inputName}
checked={selectedRowIds.includes(row.id)}
value={row.id}
on:change={() => {
if (selectedRowIds.includes(row.id)) {
selectedRowIds = selectedRowIds.filter(