Add field type to backend table headers

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

@@ -301,4 +301,13 @@
     padding-top: var(--spacing-xs);
     padding-bottom: var(--spacing-xs);
   }
+
+  :global(.ag-header) {
+    height: 61px !important;
+    min-height: 61px !important;
+  }
+
+  :global(.ag-header-row) {
+    height: 60px !important;
+  }
 </style>

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

@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import { Modal, ModalContent } from "@budibase/bbui"
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
+  import { FIELDS } from "constants/backend"
 
   const SORT_ICON_MAP = {
     asc: "ri-arrow-down-fill",
@@ -51,6 +52,8 @@
     column.removeEventListener("sortChanged", setSort)
     column.removeEventListener("filterActiveChanged", setFilterActive)
   })
+
+  $: type = FIELDS[field.type.toUpperCase()]?.name
 </script>
 
 <header
@@ -58,12 +61,15 @@
   data-cy="table-header"
   on:mouseover={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}>
-  <div>
-    <div class="col-icon">
-      {#if field.autocolumn}<i class="auto ri-magic-fill" />{/if}
-      <span class="column-header-name">{displayName}</span>
+  <div class="column-header">
+    {#if field.autocolumn}<i class="auto ri-magic-fill" />{/if}
+    <div class="column-header-text">
+      <div class="column-header-name">{displayName}</div>
+      {#if type}
+        <div class="column-header-type">{type}</div>
+      {/if}
     </div>
-    <i class={`${SORT_ICON_MAP[sortDirection]} sort-icon icon`} />
+    <i class={`${SORT_ICON_MAP[sortDirection]} icon`} />
   </div>
   <Modal bind:this={modal}>
     <ModalContent
@@ -106,6 +112,23 @@
     opacity: 1;
   }
 
+  .column-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
+  .column-header-text {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+  }
+
   .column-header-name {
     white-space: normal !important;
     text-overflow: ellipsis;
@@ -115,9 +138,9 @@
     overflow: hidden;
   }
 
-  .sort-icon {
-    position: relative;
-    top: 2px;
+  .column-header-type {
+    font-size: var(--font-size-xs);
+    color: var(--grey-6);
   }
 
   .icon {
@@ -125,11 +148,6 @@
     font-size: var(--font-size-m);
     font-weight: 500;
   }
-
-  .col-icon {
-    display: flex;
-  }
-
   .auto {
     font-size: var(--font-size-xs);
     transition: none;