From 286c5d8c4abd32c63570b140d38be7311ab6055d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 30 Apr 2022 09:50:32 -0700
Subject: [PATCH] docs(data-table): rework selectable examples to include
 selectedRowIds

---
 .../DataTable/DataTableBatchSelection.svelte  |  5 +++
 .../DataTable/SelectableDataTable.svelte      | 32 +++++++++----------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
index e951ae01..cc92ca0b 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
@@ -1,9 +1,14 @@
 <script>
   import { DataTable } from "carbon-components-svelte";
+
+  let selectedRowIds = [];
+
+  $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
 <DataTable
   batchSelection
+  bind:selectedRowIds
   headers="{[
     { key: 'name', value: 'Name' },
     { key: 'port', value: 'Port' },
diff --git a/docs/src/pages/framed/DataTable/SelectableDataTable.svelte b/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
index 18af903a..2d0ee17e 100644
--- a/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
+++ b/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
@@ -1,24 +1,24 @@
 <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 = [];
 
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
 
-<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />
+<DataTable
+  selectable
+  bind:selectedRowIds
+  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',
+  }))}"
+/>