Display chevron

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

@@ -84,7 +84,7 @@
   }
   let relationshipOpts1 = Object.values(PrettyRelationshipDefinitions)
   let relationshipOpts2 = Object.values(PrettyRelationshipDefinitions)
-  let relationshipMap = {
+  const relationshipMap = {
     [RelationshipType.ONE_TO_MANY]: {
       part1: PrettyRelationshipDefinitions.MANY,
       part2: PrettyRelationshipDefinitions.ONE,
@@ -98,7 +98,7 @@
       part2: PrettyRelationshipDefinitions.MANY,
     },
   }
-  let autoColumnInfo = getAutoColumnInformation()
+  const autoColumnInfo = getAutoColumnInformation()
   let optionsValid = true
 
   $: rowGoldenSample = RowUtils.generateGoldenSample($rows)

packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte

@@ -4,11 +4,14 @@
   import { getColumnIcon } from "../lib/utils"
   import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
   import { helpers } from "@budibase/shared-core"
+  import { FieldType } from "@budibase/types"
 
   export let allowViewReadonlyColumns = false
 
   const { columns, datasource, dispatch } = getContext("grid")
 
+  $: allowRelationshipSchemas = true // TODO
+
   const toggleColumn = async (column, permission) => {
     const visible = permission !== PERMISSION_OPTIONS.HIDDEN
     const readonly = permission === PERMISSION_OPTIONS.READONLY
@@ -94,11 +97,16 @@
           {column.label}
         </div>
       </div>
-      <ToggleActionButtonGroup
-        on:click={e => toggleColumn(column, e.detail)}
-        value={columnToPermissionOptions(column)}
-        options={column.options}
-      />
+      <div class="column-options">
+        <ToggleActionButtonGroup
+          on:click={e => toggleColumn(column, e.detail)}
+          value={columnToPermissionOptions(column)}
+          options={column.options}
+        />
+        {#if allowRelationshipSchemas && column.schema.type === FieldType.LINK}
+          <Icon size="S" name="ChevronRight" />
+        {/if}
+      </div>
     {/each}
   </div>
 </div>
@@ -131,4 +139,8 @@
     white-space: nowrap;
     overflow: hidden;
   }
+  .column-options {
+    display: flex;
+    gap: var(--spacing-s);
+  }
 </style>