Don't allow related columns as display or sorting

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

@@ -19,7 +19,6 @@
     helpers,
     PROTECTED_INTERNAL_COLUMNS,
     PROTECTED_EXTERNAL_COLUMNS,
-    canBeDisplayColumn,
     canHaveDefaultColumn,
   } from "@budibase/shared-core"
   import { createEventDispatcher, getContext, onMount } from "svelte"
@@ -43,7 +42,7 @@
     SourceName,
   } from "@budibase/types"
   import RelationshipSelector from "components/common/RelationshipSelector.svelte"
-  import { RowUtils } from "@budibase/frontend-core"
+  import { RowUtils, canBeDisplayColumn } from "@budibase/frontend-core"
   import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import OptionsEditor from "./OptionsEditor.svelte"
   import { isEnabled } from "helpers/featureFlags"
@@ -166,7 +165,7 @@
     : availableAutoColumns
   // used to select what different options can be displayed for column type
   $: canBeDisplay =
-    canBeDisplayColumn(editableColumn.type) && !editableColumn.autocolumn
+    canBeDisplayColumn(editableColumn) && !editableColumn.autocolumn
   $: canHaveDefault =
     isEnabled("DEFAULT_VALUES") && canHaveDefaultColumn(editableColumn.type)
   $: canBeRequired =

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -1,7 +1,8 @@
 <script>
   import { Select, Icon } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import { canBeDisplayColumn, utils } from "@budibase/shared-core"
+  import { utils } from "@budibase/shared-core"
+  import { canBeDisplayColumn } from "@budibase/frontend-core"
   import { API } from "api"
   import { parseFile } from "./utils"
 
@@ -100,10 +101,10 @@
   let rawRows = []
 
   $: displayColumnOptions = Object.keys(schema || {}).filter(column => {
-    return validation[column] && canBeDisplayColumn(schema[column].type)
+    return validation[column] && canBeDisplayColumn(schema[column])
   })
 
-  $: if (displayColumn && !canBeDisplayColumn(schema[displayColumn].type)) {
+  $: if (displayColumn && !canBeDisplayColumn(schema[displayColumn])) {
     displayColumn = null
   }
 

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getContext, onMount, tick } from "svelte"
-  import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
+  import { canBeSortColumn } from "@budibase/shared-core"
+  import { canBeDisplayColumn } from "@budibase/frontend-core"
   import { Icon, Menu, MenuItem, Modal } from "@budibase/bbui"
   import GridCell from "./GridCell.svelte"
   import { getColumnIcon } from "../lib/utils"
@@ -347,8 +348,7 @@
         <MenuItem
           icon="Label"
           on:click={makeDisplayColumn}
-          disabled={column.primaryDisplay ||
+          disabled={column.primaryDisplay || !canBeDisplayColumn(column.schema)}
-            !canBeDisplayColumn(column.schema.type)}
         >
           Use as display column
         </MenuItem>

packages/frontend-core/src/utils/index.js

@@ -11,3 +11,4 @@ export * from "./download"
 export * from "./theme"
 export * from "./settings"
 export * from "./relatedColumns"
+export * from "./table"

packages/frontend-core/src/utils/table.js

@@ -0,0 +1,14 @@
+import * as sharedCore from "@budibase/shared-core"
+
+export function canBeDisplayColumn(column) {
+  if (!sharedCore.canBeDisplayColumn(column.type)) {
+    return sharedCore
+  }
+
+  if (column.related) {
+    // If it's a related column (only available in the frontend), don't allow using it as display column
+    return false
+  }
+
+  return true
+}