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

Closes #2085

COMPONENT_INDEX.md

@@ -972,7 +972,7 @@ 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                                                                                                                                                                     |
@@ -984,6 +984,7 @@ export interface DataTableCell<Row = DataTableRow> {
 | 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                                                                                                                                                                    |
 | 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                                                                                                                                                                |

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\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",

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.
+
 <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

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 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(

tests/DataTable/DuplicateDataTables.test.svelte

@@ -12,8 +12,20 @@
   ];
 </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}
+/>

types/DataTable/DataTable.svelte.d.ts

@@ -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