Fixing some UI stuff after discussing with Andrew K - making sure auto-columns always appear at end of table.

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -100,6 +100,7 @@
         },
         headerName: value.displayFieldName || key,
         field: key,
+        autocolumn: !!value.autocolumn,
         sortable: true,
         cellRenderer: getRenderer({
           schema: schema[key],
@@ -114,8 +115,8 @@
         minWidth: 200,
       })
     }
-
+    // sort auto-columns to the end if they are present
-    columnDefs = result
+    columnDefs = result.filter(col => !col.autocolumn).concat(result.filter(col => col.autocolumn))
   }
 
   function selectRelationship(row, fieldName) {

packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte

@@ -59,8 +59,13 @@
   on:mouseover={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}>
   <div>
+    <div class="col-icon">
+      {#if field.autocolumn}
+        <i class="auto ri-magic-fill"></i>
+      {/if}
       <span class="column-header-name">{displayName}</span>
-    <i class={`${SORT_ICON_MAP[sortDirection]} sort-icon`} />
+    </div>
+    <i class={`${SORT_ICON_MAP[sortDirection]} sort-icon icon`} />
   </div>
   <Modal bind:this={modal}>
     <ModalContent
@@ -73,11 +78,11 @@
   <section class:show={hovered || filterActive}>
     {#if editable && hovered}
       <span on:click|stopPropagation={showModal}>
-        <i class="ri-pencil-line" />
+        <i class="ri-pencil-line icon" />
       </span>
     {/if}
     <span on:click|stopPropagation={toggleMenu} bind:this={menuButton}>
-      <i class="ri-filter-line" class:active={filterActive} />
+      <i class="ri-filter-line icon" class:active={filterActive} />
     </span>
   </section>
 </header>
@@ -117,18 +122,29 @@
     top: 2px;
   }
 
-  i {
+  .icon {
     transition: 0.2s all;
     font-size: var(--font-size-m);
     font-weight: 500;
   }
 
-  i:hover {
+  .col-icon {
+    display: flex;
+  }
+
+  .auto {
+    font-size: var(--font-size-xs);
+    transition: none;
+    margin-right: 6px;
+    margin-top: 2px;
+  }
+
+  .icon:hover {
     color: var(--blue);
   }
 
-  i.active,
+  .icon.active,
-  i:hover {
+  .icon:hover {
     color: var(--blue);
   }
 </style>

packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte

@@ -14,10 +14,10 @@
 <div bind:this={anchor}>
   <TextButton text small on:click={hideOrUnhide}>
     {#if hideAutocolumns}
-      <i class="ri-magic-fill"></i>
+      <i class="ri-magic-line"></i>
       Show Auto Columns
     {:else}
-      <i class="ri-magic-line"></i>
+      <i class="ri-magic-fill"></i>
       Hide Auto Columns
     {/if}
   </TextButton>