From ae6330d7ddd3ab7c257a4f3771c6ebd5469a3731 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 30 Apr 2022 09:32:11 -0700
Subject: [PATCH] docs(data-table): add "Batch selection" example

---
 docs/src/pages/components/DataTable.svx       |  8 ++++-
 .../DataTable/DataTableBatchSelection.svelte  | 34 +++++++------------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 9f38d71d..a541f573 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/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" />
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
index 8283c592..e951ae01 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
+++ b/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',
+  }))}"
 />