breaking(data-table): use data attribute instead of id for table header/row (#1297)

Fixes #1294

src/DataTable/DataTable.svelte

@@ -353,7 +353,7 @@
     <TableBody>
       {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
         <TableRow
-          id="row-{row.id}"
+          data-row="{row.id}"
           data-parent-row="{expandable ? true : undefined}"
           class="{selectedRowIds.includes(row.id)
             ? 'bx--data-table--selected'

src/DataTable/TableHeader.svelte

@@ -30,7 +30,7 @@
   <th
     aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
     scope="{scope}"
-    id="{id}"
+    data-header="{id}"
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -61,7 +61,7 @@
 {:else}
   <th
     scope="{scope}"
-    id="{id}"
+    data-header="{id}"
     {...$$restProps}
     on:click
     on:mouseover