mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(data-table): allow custom inputName for radio/checkbox (#2087)
Closes #2085
This commit is contained in:
Eric Liu
GitHub
parent
b4ae19e8e7
commit
7481b9a995
6 changed files with 85 additions and 30 deletions
|
|
@ -971,30 +971,31 @@ export interface DataTableCell<Row = DataTableRow> {
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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" | "ascending" | "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 |
|
||||
| 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 |
|
||||
| size | No | <code>let</code> | No | <code>"compact" | "short" | "medium" | "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 |
|
||||
| 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 |
|
||||
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
|
||||
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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" | "ascending" | "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 |
|
||||
| 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 |
|
||||
| size | No | <code>let</code> | No | <code>"compact" | "short" | "medium" | "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 |
|
||||
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
||||
| 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. |
|
||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
|
||||
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -2899,6 +2899,18 @@
|
|||
"constant": 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",
|
||||
"kind": "let",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -12,8 +12,20 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<DataTable radio {headers} {rows} />
|
||||
<DataTable radio {headers} {rows} />
|
||||
<DataTable inputName="radio-select" radio {headers} {rows} />
|
||||
<DataTable inputName="radio-select" radio {headers} {rows} />
|
||||
|
||||
<DataTable batchSelection selectable {headers} {rows} />
|
||||
<DataTable batchSelection selectable {headers} {rows} />
|
||||
<DataTable
|
||||
inputName="checkbox-select"
|
||||
batchSelection
|
||||
selectable
|
||||
{headers}
|
||||
{rows}
|
||||
/>
|
||||
<DataTable
|
||||
inputName="checkbox-select"
|
||||
batchSelection
|
||||
selectable
|
||||
{headers}
|
||||
{rows}
|
||||
/>
|
||||
|
|
|
|||
9
types/DataTable/DataTable.svelte.d.ts
vendored
9
types/DataTable/DataTable.svelte.d.ts
vendored
|
|
@ -77,6 +77,15 @@ type $Props<Row> = {
|
|||
*/
|
||||
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
|
||||
* @default false
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue