Handle internal types frontend

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -72,8 +72,28 @@
     fieldName: $tables.selected.name,
   }
 
+  const typeMapping = {}
+
   if ($admin.isDev) {
-    fieldDefinitions = { ...fieldDefinitions, ...cloneDeep(DEV_FIELDS) }
+    fieldDefinitions = {
+      ...fieldDefinitions,
+      ...Object.entries(DEV_FIELDS).reduce((p, [key, field]) => {
+        if (field.subtype) {
+          const composedType = `${field.type}_${field.subtype}`
+          p[key] = {
+            ...field,
+            type: composedType,
+          }
+          typeMapping[composedType] = {
+            type: field.type,
+            subtype: field.subtype,
+          }
+        } else {
+          p[key] = field
+        }
+        return p
+      }, {}),
+    }
   }
 
   $: if (primaryDisplay) {
@@ -82,6 +102,7 @@
 
   const initialiseField = (field, savingColumn) => {
     isCreating = !field
+
     if (field && !savingColumn) {
       editableColumn = cloneDeep(field)
       originalName = editableColumn.name ? editableColumn.name + "" : null
@@ -89,6 +110,14 @@
       primaryDisplay =
         $tables.selected.primaryDisplay == null ||
         $tables.selected.primaryDisplay === editableColumn.name
+
+      const mapped = Object.entries(typeMapping).find(
+        ([_, v]) => v.type === field.type && v.subtype === field.subtype
+      )
+      if (mapped) {
+        editableColumn.type = mapped[0]
+        delete editableColumn.subtype
+      }
     } else if (!savingColumn) {
       let highestNumber = 0
       Object.keys(table.schema).forEach(columnName => {
@@ -105,6 +134,7 @@
         editableColumn.name = "Column 01"
       }
     }
+
     allowedTypes = getAllowedTypes()
   }
 
@@ -186,6 +216,10 @@
 
     let saveColumn = cloneDeep(editableColumn)
 
+    if (typeMapping[saveColumn.type]) {
+      saveColumn = { ...saveColumn, ...typeMapping[saveColumn.type] }
+    }
+
     if (saveColumn.type === AUTO_TYPE) {
       saveColumn = buildAutoColumn(
         $tables.selected.name,
@@ -426,6 +460,8 @@
   onMount(() => {
     mounted = true
   })
+
+  $: console.log({ type: editableColumn.type, allowedTypes, typeMapping })
 </script>
 
 <Layout noPadding gap="S">

packages/frontend-core/src/components/grid/lib/utils.js

@@ -19,12 +19,21 @@ const TypeIconMap = {
   formula: "Calculator",
   json: "Brackets",
   bigint: "TagBold",
+  internal: {
+    user: "User",
+  },
 }
 
 export const getColumnIcon = column => {
   if (column.schema.autocolumn) {
     return "MagicWand"
   }
-  const type = column.schema.type
-  return TypeIconMap[type] || "Text"
+  const { type, subtype } = column.schema
+
+  const result =
+    typeof TypeIconMap[type] === "object" && subtype
+      ? TypeIconMap[type][subtype]
+      : TypeIconMap[type]
+
+  return result || "Text"
 }