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

49
COMPONENT_INDEX.md
View file

@ -971,30 +971,31 @@ export interface DataTableCell<Row = DataTableRow> {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- | | :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected | | selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` | | selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded | | expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` | | expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
| sortDirection | No | <code>let</code> | Yes | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction | | sortDirection | No | <code>let</code> | Yes | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction |
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey<Row></code> | <code>null</code> | Specify the header key to sort by | | sortKey | No | <code>let</code> | Yes | <code>DataTableKey<Row></code> | <code>null</code> | Specify the header key to sort by |
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader<Row>></code> | <code>[]</code> | Specify the data table headers | | headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader<Row>></code> | <code>[]</code> | Specify the data table headers |
| rows | No | <code>let</code> | No | <code>ReadonlyArray<Row></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids | | rows | No | <code>let</code> | No | <code>ReadonlyArray<Row></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table | | size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table | | title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table | | description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles | | inputName | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify a name attribute for the input elements<br />in a selectable data table (radio or checkbox).<br />When the table is inside a form, this name will<br />be included in the form data on submit. |
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant | | zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion | | sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable | | batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant | | nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection | | radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable | | batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header | | nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width | | stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page | | useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| page | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page | | pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
| page | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
### Slots ### Slots

12
docs/src/COMPONENT_API.json
View file

@ -2899,6 +2899,18 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "inputName",
"kind": "let",
"description": "Specify a name attribute for the input elements\nin a selectable data table (radio or checkbox).\nWhen the table is inside a form, this name will\nbe included in the form data on submit.",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{ {
"name": "zebra", "name": "zebra",
"kind": "let", "kind": "let",

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. 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" /> <FileSource src="/framed/DataTable/SelectableDataTable" />
## Batch selection ## 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" /> <FileSource src="/framed/DataTable/DataTableBatchSelection" />
## Batch selection with initial selected rows ## 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. 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" /> <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. 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" /> <FileSource src="/framed/DataTable/RadioSelectableDataTable" />
## Non-selectable rows ## Non-selectable rows

11
src/DataTable/DataTable.svelte
View file

@ -71,6 +71,14 @@
/** Specify the description of the data table */ /** Specify the description of the data table */
export let description = ""; 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 */ /** Set to `true` to use zebra styles */
export let zebra = false; export let zebra = false;
@ -515,12 +523,12 @@
> >
{#if !nonSelectableRowIds.includes(row.id)} {#if !nonSelectableRowIds.includes(row.id)}
{@const inputId = `${id}-${row.id}`} {@const inputId = `${id}-${row.id}`}
{@const inputName = `${id}-name`}
{#if radio} {#if radio}
<RadioButton <RadioButton
id={inputId} id={inputId}
name={inputName} name={inputName}
checked={selectedRowIds.includes(row.id)} checked={selectedRowIds.includes(row.id)}
value={row.id}
on:change={() => { on:change={() => {
selectedRowIds = [row.id]; selectedRowIds = [row.id];
dispatch("click:row--select", { row, selected: true }); dispatch("click:row--select", { row, selected: true });
@ -531,6 +539,7 @@
id={inputId} id={inputId}
name={inputName} name={inputName}
checked={selectedRowIds.includes(row.id)} checked={selectedRowIds.includes(row.id)}
value={row.id}
on:change={() => { on:change={() => {
if (selectedRowIds.includes(row.id)) { if (selectedRowIds.includes(row.id)) {
selectedRowIds = selectedRowIds.filter( selectedRowIds = selectedRowIds.filter(

20
tests/DataTable/DuplicateDataTables.test.svelte
View file

@ -12,8 +12,20 @@
]; ];
</script> </script>
<DataTable radio {headers} {rows} /> <DataTable inputName="radio-select" radio {headers} {rows} />
<DataTable radio {headers} {rows} /> <DataTable inputName="radio-select" radio {headers} {rows} />
<DataTable batchSelection selectable {headers} {rows} /> <DataTable
<DataTable batchSelection selectable {headers} {rows} /> inputName="checkbox-select"
batchSelection
selectable
{headers}
{rows}
/>
<DataTable
inputName="checkbox-select"
batchSelection
selectable
{headers}
{rows}
/>

9
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -77,6 +77,15 @@ type $Props<Row> = {
*/ */
description?: string; description?: string;
/**
* 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.
* @default "ccs-" + Math.random().toString(36)
*/
inputName?: string;
/** /**
* Set to `true` to use zebra styles * Set to `true` to use zebra styles
* @default false * @default false