diff --git a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
index eba2c39cc5..f5b4007fa1 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
@@ -92,36 +92,16 @@
-
-
-
-
- {{ item.icon }}
-
- {{ item.title }}
-
-
-
-
- {{ item.icon }}
- {{ item.title }}
-
-
+ />
+
import { getUIDTIcon, UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
+import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
export default {
name: 'ColumnFilter',
+ components: {
+ FieldListAutoCompleteDropdown
+ },
props: {
fieldList: [Array],
meta: Object,
diff --git a/packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue
new file mode 100644
index 0000000000..27a3617d6e
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue
@@ -0,0 +1,66 @@
+
+
+
+
+ {{ item.icon }}
+ {{ item.title }}
+
+
+
+
+ {{ item.icon }}
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
index 31d8f3e5e5..2a7777eb39 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue
@@ -41,37 +41,14 @@
mdi-close-box
-
-
-
- {{ item.icon }}
- {{ item.title }}
-
-
-
-
- {{ item.icon }}
-
- {{ item.title }}
-
-
-
+ />
import { RelationTypes, UITypes } from 'nocodb-sdk'
import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
+import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
export default {
name: 'SortListMenu',
+ components: { FieldListAutoCompleteDropdown },
props: {
fieldList: Array,
value: [Array, Object],