Added nodesFlat property and updated docs

docs/src/pages/components/TreeView.svx

@@ -58,12 +58,21 @@ To render a node with an icon, define an `icon` property with a Carbon Svelte ic
 
 <FileSource src="/framed/TreeView/TreeViewIcons" />
 
+## Flat data structure
+
+Provide a flat data structure through the `nodesFlat` property. Child object needs to have a `pid` property 
+to reference its parent. Optionally the key for the parent can be provided. 
+When no parent id is available the object is assumed to be at the root of the tree. 
+
+<FileSource src="/framed/TreeView/TreeViewFlatArray" />
+
 ## Initial expanded nodes
 
 Expanded nodes can be set using `expandedIds`.
 
 <FileSource src="/framed/TreeView/TreeViewExpanded" />
 
+
 ## Initial multiple selected nodes
 
 Initial multiple selected nodes can be set using `selectedIds`.

docs/src/pages/framed/TreeView/TreeViewFlatArray.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+  import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
+  import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
+  import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
+  import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
+  import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
+
+  let activeId = "";
+  let selectedIds = [];
+  let nodesFlat = [
+    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
+    { id: 1, text: "Analytics", icon: Analytics },
+    { id: 2, text: "IBM Analytics Engine", pid: 1, icon: Analytics },
+    { id: 3, text: "Apache Spark", pid: 2, icon: Analytics },
+    { id: 4, text: "Hadoop", icon: Analytics, pid: 2 },
+    { id: 5, text: "IBM Cloud SQL Query", icon: Analytics, pid: 1 },
+    { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics, pid: 1 },
+    { id: 7, text: "Blockchain", icon: Blockchain },
+    { id: 8, text: "IBM Blockchain Platform", icon: Blockchain, pid: 7 },
+    { id: 9, text: "Databases", icon: DataBase },
+    {
+      id: 10,
+      text: "IBM Cloud Databases for Elasticsearch",
+      icon: DataBase,
+      pid: 9,
+    },
+    {
+      id: 11,
+      text: "IBM Cloud Databases for Enterprise DB",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase, pid: 9 },
+    {
+      id: 13,
+      text: "IBM Cloud Databases for PostgreSQL",
+      icon: DataBase,
+      pid: 9,
+    },
+    { id: 14, text: "Integration", icon: SignalStrength, disabled: true },
+    {
+      id: 15,
+      text: "IBM API Connect",
+      icon: SignalStrength,
+      disabled: true,
+      pid: 14,
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  {nodesFlat}
+  bind:activeId
+  bind:selectedIds
+  on:select={({ detail }) => console.log("select", detail)}
+  on:toggle={({ detail }) => console.log("toggle", detail)}
+  on:focus={({ detail }) => console.log("focus", detail)}
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>