docs(data-table): add "Batch selection" example

docs/src/pages/components/DataTable.svx

@@ -1077,10 +1077,16 @@ In the following example, each row in the sortable data table has an overflow me
 
 <FileSource src="/framed/DataTable/SelectableDataTable" />
 
-### Initial selected rows
+### Batch selection
 
 <FileSource src="/framed/DataTable/DataTableBatchSelection" />
 
+### Batch selection with initial selected rows
+
+Use the `selectedRowIds` prop to specify which rows should be selected.
+
+<FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
+
 ### Selectable with batch actions
 
 <FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />

docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte

@@ -1,29 +1,19 @@
 <script>
   import { DataTable } from "carbon-components-svelte";
-
-  const headers = [
-    { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
-  ];
-
-  const rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
-    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
-    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
-  ];
-
-  let selectedRowIds = [rows[0].id, rows[1].id];
-
-  $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
 <DataTable
   batchSelection
-  bind:selectedRowIds
-  headers="{headers}"
-  rows="{rows}"
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule', value: 'Rule' },
+  ]}"
+  rows="{Array.from({ length: 6 }).map((_, i) => ({
+    id: i,
+    name: 'Load Balancer ' + (i + 1),
+    protocol: 'HTTP',
+    port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
+    rule: i % 3 ? 'Round robin' : 'DNS delegation',
+  }))}"
 />