Only show sortable fields for sort column settings

packages/builder/src/components/design/settings/componentSettings.js

@@ -7,6 +7,7 @@ import TableSelect from "./controls/TableSelect.svelte"
 import ColorPicker from "./controls/ColorPicker.svelte"
 import { IconSelect } from "./controls/IconSelect"
 import FieldSelect from "./controls/FieldSelect.svelte"
+import SortableFieldSelect from "./controls/SortableFieldSelect.svelte"
 import MultiFieldSelect from "./controls/MultiFieldSelect.svelte"
 import SearchFieldSelect from "./controls/SearchFieldSelect.svelte"
 import SchemaSelect from "./controls/SchemaSelect.svelte"
@@ -41,6 +42,7 @@ const componentMap = {
   filter: FilterEditor,
   url: URLSelect,
   columns: ColumnEditor,
+  "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
   "field/options": FormFieldSelect,

packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+  import { createEventDispatcher } from "svelte"
+  import { UNSORTABLE_TYPES } from "constants"
+
+  export let componentInstance = {}
+  export let value = ""
+  export let placeholder
+
+  const dispatch = createEventDispatcher()
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: options = getSortableFields(schema)
+  $: boundValue = getValidValue(value, options)
+
+  const getSortableFields = schema => {
+    return Object.entries(schema || {})
+      .filter(entry => !UNSORTABLE_TYPES.includes(entry[1].type))
+      .map(entry => entry[0])
+  }
+
+  const getValidValue = (value, options) => {
+    // Reset value if there aren't any options
+    if (!Array.isArray(options)) {
+      return null
+    }
+
+    // Reset value if the value isn't found in the options
+    if (options.indexOf(value) === -1) {
+      return null
+    }
+
+    return value
+  }
+
+  const onChange = value => {
+    boundValue = getValidValue(value.detail, options)
+    dispatch("change", boundValue)
+  }
+</script>
+
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />

packages/client/manifest.json

@@ -3523,7 +3523,7 @@
         "key": "filter"
       },
       {
-        "type": "field",
+        "type": "field/sortable",
         "label": "Sort Column",
         "key": "sortColumn"
       },
@@ -3853,7 +3853,7 @@
         "key": "filter"
       },
       {
-        "type": "field",
+        "type": "field/sortable",
         "label": "Sort Column",
         "key": "sortColumn"
       },
@@ -4018,7 +4018,7 @@
         "key": "filter"
       },
       {
-        "type": "field",
+        "type": "field/sortable",
         "label": "Sort Column",
         "key": "sortColumn"
       },
@@ -4177,7 +4177,7 @@
         "key": "filter"
       },
       {
-        "type": "field",
+        "type": "field/sortable",
         "label": "Sort Column",
         "key": "sortColumn"
       },