diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 941bc44a73..3b5eeeccbf 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -971,30 +971,31 @@ export interface DataTableCell { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected | -| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded | -| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | -| sortDirection | No | let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction | -| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by | -| headers | No | let | No | ReadonlyArray> | [] | Specify the data table headers | -| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table | -| title | No | let | No | string | "" | Specify the title of the data table | -| description | No | let | No | string | "" | Specify the description of the data table | -| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | -| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | -| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion | -| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable | -| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant | -| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection | -| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable | -| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | -| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | -| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page | -| page | No | let | No | number | 0 | Set to `number` to set current page | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected | +| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded | +| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | +| sortDirection | No | let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction | +| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by | +| headers | No | let | No | ReadonlyArray> | [] | Specify the data table headers | +| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table | +| title | No | let | No | string | "" | Specify the title of the data table | +| description | No | let | No | string | "" | Specify the description of the data table | +| inputName | No | let | No | string | "ccs-" + Math.random().toString(36) | 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 sent to the server. | +| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | +| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | +| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion | +| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable | +| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant | +| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection | +| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable | +| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | +| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | +| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page | +| page | No | let | No | number | 0 | Set to `number` to set current page | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index c6ceb31d19..d88f760a87 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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 be\nincluded in the form data sent to the server.", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "zebra", "kind": "let", diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index f9d24ee016..70c758e383 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -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. + ## 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. + ## 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. @@ -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. + ## Non-selectable rows diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index 6292bd7125..87d800d68c 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -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 sent to the server. + */ + export let inputName = "ccs-" + Math.random().toString(36); + /** Set to `true` to use zebra styles */ export let zebra = false; @@ -355,7 +363,9 @@ type="button" class:bx--table-expand__button={true} aria-label={expanded ? "Collapse all rows" : "Expand all rows"} - aria-controls={expandableRowIds.map(id => `expandable-row-${id}`).join(" ")} + aria-controls={expandableRowIds + .map((id) => `expandable-row-${id}`) + .join(" ")} on:click={() => { expanded = !expanded; expandedRowIds = expanded ? expandableRowIds : []; @@ -363,7 +373,10 @@ dispatch("click:header--expand", { expanded }); }} > -