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

@@ -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>
+    <pre>{JSON.stringify(row, null, 2)}</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>
+    <pre>{JSON.stringify(row, null, 2)}</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>
+    <pre>{JSON.stringify(row, null, 2)}</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>
+    <pre>{JSON.stringify(row, null, 2)}</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>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
   </svelte:fragment>
 </DataTable>
 
+### Expandable and selectable
+
+<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
+
 ### Skeleton
 
 <DataTableSkeleton />

docs/src/pages/framed/Breakpoint/Breakpoint.svelte

@@ -12,9 +12,7 @@
 <h1>{size}</h1>
 
 <h6>on:change</h6>
-<pre>
+<pre>{JSON.stringify(events, null, 2)}</pre>
-  {JSON.stringify(events, null, 2)}
-</pre>
 
 <style>
   p,

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

@@ -1,22 +1,7 @@
 <script>
   import { DataTable } from "carbon-components-svelte";
 
-  const headers = [
+  let selectedRowIds = [];
-    { 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>
@@ -24,6 +9,16 @@
 <DataTable
   batchSelection
   bind:selectedRowIds
-  headers="{headers}"
+  headers="{[
-  rows="{rows}"
+    { 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',
+  }))}"
 />

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',
+  }))}"
+/>

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>

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

@@ -58,8 +58,6 @@
   ]}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
   </svelte:fragment>
 </DataTable>

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

@@ -61,8 +61,6 @@
   rows="{rows}"
 >
   <svelte:fragment slot="expanded-row" let:row>
-    <pre>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
-      {JSON.stringify(row, null, 2)}
-    </pre>
   </svelte:fragment>
 </DataTable>

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',
+  }))}"
+/>

docs/src/pages/framed/LocalStorage/LocalStorage.svelte

@@ -22,6 +22,4 @@
 
 <br />
 
-<pre>
+<pre>{JSON.stringify(events, null, 2)}</pre>
-  {JSON.stringify(events, null, 2)}
-</pre>