[ui] table props refactor

ui/src/components/AttributeView.svelte

@@ -85,7 +85,7 @@
       />
     {/each}
   {:else}
-    <Table entity attribute value={false} {attributes} />
+    <Table columns="entity, attribute" {attributes} />
   {/if}
 </section>
 

ui/src/components/widgets/Table.svelte

@@ -6,13 +6,17 @@
   import Marquee from "../Marquee.svelte";
   import Address from "../Address.svelte";
 
-  export let entity = false;
+  export let columns = "attribute, value";
-  export let attribute = true;
+  export let header = true;
-  export let value = true;
 
   export let attributes: OrderedListing;
   export let editable = false;
 
+  // Display
+  $: showEntity = columns.includes("entity");
+  $: showAttribute = columns.includes("attribute");
+  $: showValue = columns.includes("value");
+
   // Pagination
   let currentDisplay = 999;
   const MAX_DISPLAY = 50;
@@ -105,31 +109,33 @@
     {#if editable}
       <col class="attr-action-col" />
     {/if}
-    {#if entity}
+    {#if showEntity}
       <col class="entity-col" />
     {/if}
-    {#if attribute}
+    {#if showAttribute}
       <col class="attr-col" />
     {/if}
-    {#if value}
+    {#if showValue}
       <col class="val-col" />
     {/if}
   </colgroup>
 
-  <tr>
+  {#if header}
-    {#if editable}
+    <tr>
-      <th />
+      {#if editable}
-    {/if}
+        <th />
-    {#if entity}
+      {/if}
-      <th>Entity</th>
+      {#if showEntity}
-    {/if}
+        <th>Entity</th>
-    {#if attribute}
+      {/if}
-      <th>Attribute</th>
+      {#if showAttribute}
-    {/if}
+        <th>Attribute</th>
-    {#if value}
+      {/if}
-      <th>Value</th>
+      {#if showValue}
-    {/if}
+        <th>Value</th>
-  </tr>
+      {/if}
+    </tr>
+  {/if}
 
   {#each sortedAttributes as [id, entry] (id)}
     <tr>
@@ -139,13 +145,13 @@
         </td>
       {/if}
 
-      {#if entity}
+      {#if showEntity}
         <td>
           <Address link address={entry.entity} />
         </td>
       {/if}
 
-      {#if attribute}
+      {#if showAttribute}
         <td class:formatted={Boolean(formatAttribute(entry.attribute))}>
           <Marquee>
             {formatAttribute(entry.attribute) || entry.attribute}
@@ -153,7 +159,7 @@
         </td>
       {/if}
 
-      {#if value}
+      {#if showValue}
         <td class="value">
           <text-input
             {editable}
@@ -204,12 +210,12 @@
       <td class="attr-action">
         <sl-icon-button name="plus-circle" on:click={addEntry()} />
       </td>
-      {#if attribute}
+      {#if showAttribute}
         <td>
           <sl-input v-sl-model:newEntryAttribute size="small" />
         </td>
       {/if}
-      {#if value}
+      {#if showValue}
         <td>
           <sl-input v-sl-model:newEntryValue size="small" />
         </td>