fix(data-table): prefix internal ID for radio button, checkbox (#2082)

Fixes #2081

src/DataTable/DataTable.svelte

@@ -170,6 +170,10 @@
   const batchSelectedIds = writable(false);
   const tableRows = writable(rows);
 
+  // Internal ID prefix for radio buttons, checkboxes, etc.
+  // since there may be multiple `DataTable` instances that have overlapping row ids.
+  const id = "ccs-" + Math.random().toString(36);
+
   // Store a copy of the original rows for filter restoration.
   $: originalRows = [...rows];
 
@@ -370,6 +374,8 @@
             <InlineCheckbox
               bind:ref={refSelectAll}
               aria-label="Select all rows"
+              name="{id}-select-all"
+              value="all"
               checked={selectAll}
               {indeterminate}
               on:change={(e) => {
@@ -497,9 +503,12 @@
               class:bx--table-column-radio={radio}
             >
               {#if !nonSelectableRowIds.includes(row.id)}
+                {@const inputId = `${id}-${row.id}`}
+                {@const inputName = `${id}-name`}
                 {#if radio}
                   <RadioButton
-                    name="select-row-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       selectedRowIds = [row.id];
@@ -508,7 +517,8 @@
                   />
                 {:else}
                   <InlineCheckbox
-                    name="select-row-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       if (selectedRowIds.includes(row.id)) {