From b6a202f54fe63c6e5849d6a3ec381039f0c6ff0a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 25 Mar 2021 08:02:41 +0000
Subject: [PATCH] Allow table to take children

---
 packages/standard-components/manifest.json       |  7 ++++++-
 .../standard-components/src/table/Table.svelte   | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 65fcec339b..b4914cb284 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1514,6 +1514,7 @@
     "name": "Table",
     "icon": "ri-table-line",
     "styleable": true,
+    "hasChildren": true,
     "settings": [
       {
         "type": "dataProvider",
@@ -1579,6 +1580,10 @@
           }
         ]
       }
-    ]
+    ],
+    "dataContext": {
+      "type": "schema",
+      "dataProviderSetting": "dataProvider"
+    }
   }
 }
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index abd2933c3c..02e3b4e968 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -11,7 +11,7 @@
   export let rowCount
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+  const { styleable, Provider } = getContext("sdk")
 
   let sortColumn
   let sortOrder
@@ -85,6 +85,11 @@
   <table class="spectrum-Table">
     <thead class="spectrum-Table-head">
       <tr>
+        {#if $component.children}
+          <th class="spectrum-Table-headCell">
+            <div class="spectrum-Table-headCell-content" />
+          </th>
+        {/if}
         {#each fields as field}
           <th
             class="spectrum-Table-headCell is-sortable"
@@ -108,6 +113,15 @@
     <tbody class="spectrum-Table-body">
       {#each sortedRows as row}
         <tr class="spectrum-Table-row">
+          {#if $component.children}
+            <td class="spectrum-Table-cell">
+              <div class="spectrum-Table-cell-content">
+                <Provider data={row}>
+                  <slot />
+                </Provider>
+              </div>
+            </td>
+          {/if}
           {#each fields as field}
             <td class="spectrum-Table-cell">
               <div class="spectrum-Table-cell-content">