From 52eff3c5a8cd1b198074d597a1f8aac3568e3253 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sat, 30 Apr 2022 09:58:14 -0700
Subject: [PATCH] docs(data-table): add "Expandable and selectable" example
 (#1277)

* docs(data-table): add "Expandable and selectable" example

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

* docs(data-table): rework "Batch selection with initial selected rows" example

* docs(data-table): rework selectable examples to include selectedRowIds

* docs: remove extra space from pre tags
---
 docs/src/pages/components/DataTable.svx       | 32 ++++++++---------
 .../pages/framed/Breakpoint/Breakpoint.svelte |  4 +--
 .../DataTable/DataTableBatchSelection.svelte  | 31 +++++++---------
 .../DataTableBatchSelectionInitial.svelte     | 24 +++++++++++++
 .../DataTableExpandableSelectable.svelte      | 35 +++++++++++++++++++
 .../DataTable/DataTableExpandableZebra.svelte |  4 +--
 .../DataTableNonExpandableRows.svelte         |  4 +--
 .../DataTable/SelectableDataTable.svelte      | 32 ++++++++---------
 .../framed/LocalStorage/LocalStorage.svelte   |  4 +--
 9 files changed, 108 insertions(+), 62 deletions(-)
 create mode 100644 docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
 create mode 100644 docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 3fef0c40..2789d711 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" />
@@ -1150,9 +1156,7 @@ Use `nonSelectableRowIds` to specify the ids for rows that should not be selecta
   ]}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
   </svelte:fragment>
 </DataTable>
 
@@ -1221,9 +1225,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   ]}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
   </svelte:fragment>
 </DataTable>
 
@@ -1282,9 +1284,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   ]}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
   </svelte:fragment>
 </DataTable>
 
@@ -1343,9 +1343,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   ]}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
   </svelte:fragment>
 </DataTable>
 
@@ -1404,12 +1402,14 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   ]}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
   </svelte:fragment>
 </DataTable>
 
+### Expandable and selectable
+
+<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
+
 ### Skeleton
 
 <DataTableSkeleton />
diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
index b1b7e0a1..9f2473f9 100644
--- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
+++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
@@ -12,9 +12,7 @@
 <h1>{size}</h1>
 
 <h6>on:change</h6>
-<pre>
-  {JSON.stringify(events, null, 2)}
-</pre>
+<pre>{JSON.stringify(events, null, 2)}</pre>
 
 <style>
   p,
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
index 8283c592..cc92ca0b 100644
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
@@ -1,22 +1,7 @@
 <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];
+  let selectedRowIds = [];
 
   $: console.log("selectedRowIds", selectedRowIds);
 </script>
@@ -24,6 +9,16 @@
 <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',
+  }))}"
 />
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
new file mode 100644
index 00000000..2a602a55
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  let selectedRowIds = [2, 4];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable
+  batchSelection
+  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',
+  }))}"
+/>
diff --git a/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte b/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
new file mode 100644
index 00000000..ef5834fb
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  let expandedRowIds = [];
+  let selectedRowIds = [];
+
+  $: {
+    console.log("expandedRowIds", expandedRowIds);
+    console.log("selectedRowIds", selectedRowIds);
+  }
+</script>
+
+<DataTable
+  batchExpansion
+  batchSelection
+  bind:expandedRowIds
+  bind:selectedRowIds
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { 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',
+  }))}"
+>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre> {JSON.stringify(row, null, 2)}</pre>
+  </svelte:fragment>
+</DataTable>
diff --git a/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
index ed18370d..49f52442 100644
--- a/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
@@ -58,8 +58,6 @@
   ]}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
   </svelte:fragment>
 </DataTable>
diff --git a/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte b/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
index 6e362b41..51ebf012 100644
--- a/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
@@ -61,8 +61,6 @@
   rows="{rows}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
   </svelte:fragment>
 </DataTable>
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',
+  }))}"
+/>
diff --git a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
index d7aea0de..e1e11e30 100644
--- a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
@@ -22,6 +22,4 @@
 
 <br />
 
-<pre>
-  {JSON.stringify(events, null, 2)}
-</pre>
+<pre>{JSON.stringify(events, null, 2)}</pre>