diff --git a/packages/nc-gui/assets/style/style.css b/packages/nc-gui/assets/style/style.css
index 2bfc3505f3..88675ce354 100644
--- a/packages/nc-gui/assets/style/style.css
+++ b/packages/nc-gui/assets/style/style.css
@@ -114,18 +114,23 @@ html {
   overflow: hidden;
 }
 
+
 [v-cloak] {
   display: none !important;
 }
 
+
 .v-btn {
   margin: 0 2px;
 }
 
+
+
 html {
   overflow-y: auto !important;
 }
 
+
 /* nested expansion panel bug  */
 
 .v-expansion-panel-header {
@@ -136,6 +141,7 @@ html {
   min-height: 64px !important;
 }
 
+
 /* Table validation message */
 /*table .v-input__control {*/
 /*  position: relative;*/
@@ -146,11 +152,13 @@ html {
 /*  bottom: -4px;*/
 /*}*/
 
+
 /*table edit dialog buttons*/
 .v-small-dialog__actions button span {
   font-weight: bolder;
 }
 
+
 /*resizer*/
 
 .vertical-resizer {
@@ -211,25 +219,15 @@ html {
   background: linear-gradient(180deg, black, rgb(55, 55, 55));
 }
 
+
 .yellow-orange-gradient {
-  background: -moz-linear-gradient(
-    left,
-    rgba(241, 231, 103, 1) 0%,
-    rgba(254, 182, 69, 1) 100%
-  );
-  background: -webkit-linear-gradient(
-    left,
-    rgba(241, 231, 103, 1) 0%,
-    rgba(254, 182, 69, 1) 100%
-  );
-  background: linear-gradient(
-    to right,
-    rgba(241, 231, 103, 1) 0%,
-    rgba(254, 182, 69, 1) 100%
-  );
+  background: -moz-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
+  background: -webkit-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
+  background: linear-gradient(to right, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1);
 }
 
+
 .white-gradient {
   background: linear-gradient(45deg, white, lightskyblue);
 }
@@ -250,6 +248,7 @@ html {
   background: linear-gradient(70deg, #fcbb07, #fcbb07);
 }
 
+
 .img-animation {
   animation-name: vibrate;
   animation-duration: 1.5s;
@@ -263,6 +262,7 @@ html {
 
 @keyframes vibrate {
   0% {
+
     transform: translateY(10px);
   }
   100% {
@@ -270,21 +270,26 @@ html {
   }
 }
 
+
 .search-overlay .v-overlay__content {
   height: 100%;
   width: 100%;
+
 }
 
+
 /* Draggable tree hover color */
 
 .theme--dark .vtl-tree-node:hover {
   background-color: rgb(94, 94, 94) !important;
 }
 
+
 .theme--light .vtl-tree-node:hover {
   background-color: rgb(240, 240, 240) !important;
 }
 
+
 /*vue tree list icon font */
 
 /*.sql-query-treeview .vtl-icon-folder:before {*/
@@ -304,55 +309,57 @@ html {
 
 /*}*/
 
-.sql-query-treeview .vtl-tree-node .vtl-caret {
-  width: 1rem;
+.sql-query-treeview .vtl-tree-node .vtl-caret{
+  width:1rem;
 }
-.sql-query-treeview .vtl-tree-node {
+.sql-query-treeview .vtl-tree-node{
   padding-top: 5px !important;
   padding-bottom: 5px !important;
 }
-.sql-query-treeview .custom-run-icon {
-}
+.sql-query-treeview .custom-run-icon{}
+
 
 .sql-editor .v-expansion-panel-header {
   min-height: 36px !important;
-  padding: 0 0 0 10px;
+  padding:  0 0 0  10px;
 }
 .sql-editor .v-expansion-panel-header--active {
   min-height: 40px !important;
 }
 
+
 .api-client .v-expansion-panel-header {
   min-height: 36px !important;
-  padding: 0 0 0 10px;
+  padding:  0 0 0  10px;
 }
 .api-client .v-expansion-panel-header--active {
   min-height: 40px !important;
 }
-.api-treeview .vtl-node-content {
+.api-treeview .vtl-node-content{
   max-width: calc(100% - 44px);
 }
 /* for expansion panel content wrapper */
-.expansion-wrap-0 .v-expansion-panel-content__wrap {
+.expansion-wrap-0 .v-expansion-panel-content__wrap{
   padding: 0;
 }
 
-.sql-query-treeview .vtl-operation {
-  margin-left: 2px !important;
+.sql-query-treeview .vtl-operation{
+  margin-left: 2px !important;;
 }
-.sql-query-treeview .vtl-tree-node {
+.sql-query-treeview .vtl-tree-node{
   display: flex;
 }
 
-.sql-query-treeview .vtl-node-content {
+.sql-query-treeview .vtl-node-content{
   flex-grow: 1;
 }
 
+
 .ignore-height-style table .v-input__control {
   height: auto !important;
 }
 
-.cursor-pointer {
+.cursor-pointer{
   cursor: pointer;
 }
 
@@ -361,4 +368,4 @@ html {
 .menu-filter-dropdown {
   max-height: 500px;
   overflow-y: scroll;
-}
+}
\ No newline at end of file
diff --git a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
index 4ebdda8658..36b21c513d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
@@ -1,32 +1,27 @@
 <template>
   <div
     class="backgroundColor pa-2 menu-filter-dropdown"
-    :style="{ width: nested ? '100%' : '530px' }"
+    :style="{width:nested ? '100%' : '530px'}"
   >
     <div class="grid" @click.stop>
-      <template v-for="(filter, i) in filters" dense>
+      <template v-for="(filter,i) in filters" dense>
         <template v-if="filter.status !== 'delete'">
-          <div
-            v-if="filter.is_group"
-            :key="i"
-            style="grid-column: span 4; padding: 6px"
-            class="elevation-4"
-          >
-            <div class="d-flex" style="gap: 6px; padding: 0 6px">
+          <div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding:6px" class="elevation-4 ">
+            <div class="d-flex" style="gap:6px; padding: 0 6px">
               <v-icon
                 v-if="!filter.readOnly"
                 :key="i + '_3'"
                 small
                 class="nc-filter-item-remove-btn"
-                @click.stop="deleteFilter(filter, i)"
+                @click.stop="deleteFilter(filter,i)"
               >
                 mdi-close-box
               </v-icon>
               <span v-else :key="i + '_1'" />
               <v-select
                 v-model="filter.logical_op"
-                class="flex-shrink-1 flex-grow-0 elevation-0 caption"
-                :items="['and', 'or']"
+                class="flex-shrink-1 flex-grow-0 elevation-0 caption "
+                :items="['and' ,'or']"
                 solo
                 flat
                 dense
@@ -35,7 +30,7 @@
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
               >
-                <template #item="{ item }">
+                <template #item="{item}">
                   <span class="caption font-weight-regular">{{ item }}</span>
                 </template>
               </v-select>
@@ -61,7 +56,7 @@
               :key="i + '_3'"
               small
               class="nc-filter-item-remove-btn"
-              @click.stop="deleteFilter(filter, i)"
+              @click.stop="deleteFilter(filter,i)"
             >
               mdi-close-box
             </v-icon>
@@ -70,15 +65,14 @@
               v-if="!i"
               :key="i + '_2'"
               class="caption d-flex align-center"
-              >{{ $t("labels.where") }}</span
-            >
+            >{{ $t('labels.where') }}</span>
 
             <v-select
               v-else
               :key="i + '_4'"
               v-model="filter.logical_op"
-              class="flex-shrink-1 flex-grow-0 elevation-0 caption"
-              :items="['and', 'or']"
+              class="flex-shrink-1 flex-grow-0 elevation-0 caption "
+              :items="['and' ,'or']"
               solo
               flat
               dense
@@ -87,7 +81,7 @@
               @click.stop
               @change="filterUpdateCondition(filter, i)"
             >
-              <template #item="{ item }">
+              <template #item="{item}">
                 <span class="caption font-weight-regular">{{ item }}</span>
               </template>
             </v-select>
@@ -108,7 +102,7 @@
               @click.stop
               @change="saveOrUpdate(filter, i)"
             >
-              <template #item="{ item }">
+              <template #item="{item}">
                 <span
                   :class="`caption font-weight-regular nc-filter-fld-${item.title}`"
                 >
@@ -119,12 +113,12 @@
             <v-select
               :key="'k' + i"
               v-model="filter.comparison_op"
-              class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select"
+              class="flex-shrink-1 flex-grow-0 caption  nc-filter-operation-select"
               :items="filterComparisonOp(filter)"
               :placeholder="$t('labels.operation')"
               solo
               flat
-              style="max-width: 120px"
+              style="max-width:120px"
               dense
               :disabled="filter.readOnly"
               hide-details
@@ -132,18 +126,11 @@
               @click.stop
               @change="filterUpdateCondition(filter, i)"
             >
-              <template #item="{ item }">
+              <template #item="{item}">
                 <span class="caption font-weight-regular">{{ item.text }}</span>
               </template>
             </v-select>
-            <span
-              v-if="
-                ['null', 'notnull', 'empty', 'notempty'].includes(
-                  filter.comparison_op
-                )
-              "
-              :key="'span' + i"
-            />
+            <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="'span' + i" />
             <v-checkbox
               v-else-if="types[filter.field] === 'boolean'"
               :key="i + '_7'"
@@ -170,20 +157,26 @@
       </template>
     </div>
 
-    <v-btn small class="elevation-0 grey--text my-3" @click.stop="addFilter">
-      <v-icon small color="grey"> mdi-plus </v-icon>
+    <v-btn
+      small
+      class="elevation-0 grey--text my-3"
+      @click.stop="addFilter"
+    >
+      <v-icon small color="grey">
+        mdi-plus
+      </v-icon>
       <!-- Add Filter -->
-      {{ $t("activity.addFilter") }}
+      {{ $t('activity.addFilter') }}
     </v-btn>
     <slot />
   </div>
 </template>
 
 <script>
-import { UITypes } from "~/components/project/spreadsheet/helpers/uiTypes";
+import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
-  name: "ColumnFilter",
+  name: 'ColumnFilter',
   props: {
     fieldList: [Array],
     meta: Object,
@@ -192,298 +185,269 @@ export default {
     viewId: String,
     shared: Boolean,
     webHook: Boolean,
-    hookId: String,
+    hookId: String
   },
   data: () => ({
     filters: [],
     opList: [
-      "is equal",
-      "is not equal",
-      "is like",
-      "is not like",
+      'is equal', 'is not equal', 'is like', 'is not like',
       // 'is empty', 'is not empty',
-      "is null",
-      "is not null",
-      ">",
-      "<",
-      ">=",
-      "<=",
+      'is null', 'is not null',
+      '>',
+      '<',
+      '>=',
+      '<='
     ],
     comparisonOp: [
       {
-        text: "is equal",
-        value: "eq",
+        text: 'is equal',
+        value: 'eq'
       },
       {
-        text: "is not equal",
-        value: "neq",
+        text: 'is not equal',
+        value: 'neq'
       },
       {
-        text: "is like",
-        value: "like",
+        text: 'is like',
+        value: 'like'
       },
       {
-        text: "is not like",
-        value: "nlike",
+        text: 'is not like',
+        value: 'nlike'
       },
       {
-        text: "is empty",
-        value: "empty",
-        ignoreVal: true,
+        text: 'is empty',
+        value: 'empty',
+        ignoreVal: true
       },
       {
-        text: "is not empty",
-        value: "notempty",
-        ignoreVal: true,
+        text: 'is not empty',
+        value: 'notempty',
+        ignoreVal: true
       },
       {
-        text: "is null",
-        value: "null",
-        ignoreVal: true,
+        text: 'is null',
+        value: 'null',
+        ignoreVal: true
       },
       {
-        text: "is not null",
-        value: "notnull",
-        ignoreVal: true,
+        text: 'is not null',
+        value: 'notnull',
+        ignoreVal: true
       },
       {
-        text: ">",
-        value: "gt",
+        text: '>',
+        value: 'gt'
       },
       {
-        text: "<",
-        value: "lt",
+        text: '<',
+        value: 'lt'
       },
       {
-        text: ">=",
-        value: "gte",
+        text: '>=',
+        value: 'gte'
       },
       {
-        text: "<=",
-        value: "lte",
-      },
-    ],
+        text: '<=',
+        value: 'lte'
+      }
+    ]
   }),
   computed: {
     columnsById() {
-      return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {});
+      return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {})
     },
     autoApply() {
-      return this.$store.state.windows.autoApplyFilter && !this.webHook;
+      return this.$store.state.windows.autoApplyFilter && !this.webHook
     },
     columns() {
-      return (
-        this.meta &&
-        this.meta.columns.filter((c) => c && (!c.colOptions || !c.system))
-      );
+      return (this.meta && this.meta.columns.filter(c => c && (!c.colOptions || !c.system)))
     },
     types() {
       if (!this.meta || !this.meta.columns || !this.meta.columns.length) {
-        return {};
+        return {}
       }
 
       return this.meta.columns.reduce((obj, col) => {
         switch (col.uidt) {
           case UITypes.Number:
           case UITypes.Decimal:
-            obj[col.title] = obj[col.column_name] = "number";
-            break;
+            obj[col.title] = obj[col.column_name] = 'number'
+            break
           case UITypes.Checkbox:
-            obj[col.title] = obj[col.column_name] = "boolean";
-            break;
+            obj[col.title] = obj[col.column_name] = 'boolean'
+            break
           default:
-            break;
+            break
         }
-        return obj;
-      }, {});
-    },
+        return obj
+      }, {})
+    }
   },
   watch: {
     async viewId(v) {
       if (v) {
-        await this.loadFilter();
+        await this.loadFilter()
       }
     },
     filters: {
       handler(v) {
-        this.$emit(
-          "input",
-          v &&
-            v.filter((f) => (f.fk_column_id && f.comparison_op) || f.is_group)
-        );
+        this.$emit('input', v && v.filter(f => (f.fk_column_id && f.comparison_op) || f.is_group))
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
-    this.loadFilter();
+    this.loadFilter()
   },
   methods: {
     filterComparisonOp(f) {
       return this.comparisonOp.filter((op) => {
-        if (
-          f &&
-          f.fk_column_id &&
-          this.columnsById[f.fk_column_id] &&
-          this.columnsById[f.fk_column_id].uidt ===
-            UITypes.LinkToAnotherRecord &&
+        if (f && f.fk_column_id && this.columnsById[f.fk_column_id] &&
+          this.columnsById[f.fk_column_id].uidt === UITypes.LinkToAnotherRecord &&
           this.columnsById[f.fk_column_id].uidt === UITypes.Lookup
         ) {
-          return !["notempty", "empty", "notnull", "null"].includes(op.value);
+          return ![
+            'notempty',
+            'empty',
+            'notnull',
+            'null'
+          ].includes(op.value)
         }
-        return true;
-      });
+        return true
+      })
     },
     async applyChanges(nested = false, { hookId } = {}) {
       for (const [i, filter] of Object.entries(this.filters)) {
-        if (filter.status === "delete") {
+        if (filter.status === 'delete') {
           if (this.hookId || hookId) {
-            await this.$api.dbTableFilter.delete(filter.id);
+            await this.$api.dbTableFilter.delete(filter.id)
           } else {
-            await this.$api.dbTableFilter.delete(filter.id);
+            await this.$api.dbTableFilter.delete(filter.id)
           }
-        } else if (filter.status === "update") {
+        } else if (filter.status === 'update') {
           if (filter.id) {
             if (this.hookId || hookId) {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
-                fk_parent_id: this.parentId,
-              });
+                fk_parent_id: this.parentId
+              })
             } else {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
-                fk_parent_id: this.parentId,
-              });
+                fk_parent_id: this.parentId
+              })
             }
           } else if (this.hookId || hookId) {
-            this.$set(
-              this.filters,
-              i,
-              await this.$api.dbTableWebhookFilter.create(
-                this.hookId || hookId,
-                {
-                  ...filter,
-                  fk_parent_id: this.parentId,
-                }
-              )
-            );
+            this.$set(this.filters, i, (await this.$api.dbTableWebhookFilter.create(this.hookId || hookId, {
+              ...filter,
+              fk_parent_id: this.parentId
+            })))
           } else {
-            this.$set(
-              this.filters,
-              i,
-              await this.$api.dbTableFilter.create(this.viewId, {
-                ...filter,
-                fk_parent_id: this.parentId,
-              })
-            );
+            this.$set(this.filters, i, (await this.$api.dbTableFilter.create(this.viewId, {
+              ...filter,
+              fk_parent_id: this.parentId
+            })))
           }
         }
       }
       if (this.$refs.nestedFilter) {
         for (const nestedFilter of this.$refs.nestedFilter) {
-          await nestedFilter.applyChanges(true);
+          await nestedFilter.applyChanges(true)
         }
       }
-      this.loadFilter();
-      if (!nested) {
-        this.$emit("updated");
-      }
+      this.loadFilter()
+      if (!nested) { this.$emit('updated') }
     },
     async loadFilter() {
-      let filters = [];
-      if (this.viewId && this._isUIAllowed("filterSync")) {
+      let filters = []
+      if (this.viewId && this._isUIAllowed('filterSync')) {
         filters = this.parentId
-          ? await this.$api.dbTableFilter.childrenRead(this.parentId)
-          : await this.$api.dbTableFilter.read(this.viewId);
+          ? (await this.$api.dbTableFilter.childrenRead(this.parentId))
+          : (await this.$api.dbTableFilter.read(this.viewId))
       }
-      if (this.hookId && this._isUIAllowed("filterSync")) {
+      if (this.hookId && this._isUIAllowed('filterSync')) {
         filters = this.parentId
-          ? await this.$api.dbTableFilter.childrenRead(this.parentId)
-          : await this.$api.dbTableWebhookFilter.read(this.hookId);
+          ? (await this.$api.dbTableFilter.childrenRead(this.parentId))
+          : (await this.$api.dbTableWebhookFilter.read(this.hookId))
       }
 
-      this.filters = filters;
+      this.filters = filters
     },
     addFilter() {
       this.filters.push({
         fk_column_id: null,
-        comparison_op: "eq",
-        value: "",
-        status: "update",
-        logical_op: "and",
-      });
-      this.filters = this.filters.slice();
-      this.$tele.emit(`filter:add:trigger:${this.filters.length}`);
+        comparison_op: 'eq',
+        value: '',
+        status: 'update',
+        logical_op: 'and'
+      })
+      this.filters = this.filters.slice()
+      this.$tele.emit(`filter:add:trigger:${this.filters.length}`)
     },
     addFilterGroup() {
       this.filters.push({
         parentId: this.parentId,
         is_group: true,
-        status: "update",
-      });
-      this.filters = this.filters.slice();
-      const index = this.filters.length - 1;
-      this.saveOrUpdate(this.filters[index], index);
+        status: 'update'
+      })
+      this.filters = this.filters.slice()
+      const index = this.filters.length - 1
+      this.saveOrUpdate(this.filters[index], index)
     },
     filterUpdateCondition(filter, i) {
-      this.saveOrUpdate(filter, i);
-      this.$tele.emit(
-        `filter:condition:${filter.logical_op}:${filter.comparison_op}`
-      );
+      this.saveOrUpdate(filter, i)
+      this.$tele.emit(`filter:condition:${filter.logical_op}:${filter.comparison_op}`)
     },
     async saveOrUpdate(filter, i) {
-      if (this.shared || !this._isUIAllowed("filterSync")) {
+      if (this.shared || !this._isUIAllowed('filterSync')) {
         // this.$emit('input', this.filters.filter(f => f.fk_column_id && f.comparison_op))
-        this.$emit("updated");
+        this.$emit('updated')
       } else if (!this.autoApply) {
-        filter.status = "update";
+        filter.status = 'update'
       } else if (filter.id) {
         await this.$api.dbTableFilter.update(filter.id, {
           ...filter,
-          fk_parent_id: this.parentId,
-        });
+          fk_parent_id: this.parentId
+        })
 
-        this.$emit("updated");
+        this.$emit('updated')
       } else {
-        this.$set(
-          this.filters,
-          i,
-          await this.$api.dbTableFilter.create(this.viewId, {
-            ...filter,
-            fk_parent_id: this.parentId,
-          })
-        );
+        this.$set(this.filters, i, (await this.$api.dbTableFilter.create(this.viewId, {
+          ...filter,
+          fk_parent_id: this.parentId
+        })))
 
-        this.$emit("updated");
+        this.$emit('updated')
       }
     },
     async deleteFilter(filter, i) {
-      if (this.shared || !this._isUIAllowed("filterSync")) {
-        this.filters.splice(i, 1);
-        this.$emit("updated");
+      if (this.shared || !this._isUIAllowed('filterSync')) {
+        this.filters.splice(i, 1)
+        this.$emit('updated')
       } else if (filter.id) {
         if (!this.autoApply) {
-          this.$set(filter, "status", "delete");
+          this.$set(filter, 'status', 'delete')
         } else {
-          await this.$api.dbTableFilter.delete(filter.id);
-          await this.loadFilter();
-          this.$emit("updated");
+          await this.$api.dbTableFilter.delete(filter.id)
+          await this.loadFilter()
+          this.$emit('updated')
         }
       } else {
-        this.filters.splice(i, 1);
-        this.$emit("updated");
+        this.filters.splice(i, 1)
+        this.$emit('updated')
       }
-      this.$tele.emit("filter:delete");
-    },
-  },
-};
+      this.$tele.emit('filter:delete')
+    }
+  }
+}
 </script>
 
 <style scoped>
 .grid {
   display: grid;
-  grid-template-columns: 22px 80px auto auto auto;
+  grid-template-columns:22px 80px auto auto auto;
   column-gap: 6px;
-  row-gap: 6px;
+  row-gap: 6px
 }
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
index 951350834d..c3fc46bc26 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
@@ -28,7 +28,7 @@
         </v-btn>
       </v-badge>
     </template>
-    <div class="backgroundColor pa-2 menu-filter-dropdown" style="min-width: 330px;">
+    <div class="backgroundColor pa-2 menu-filter-dropdown" style="min-width: 330px">
       <div class="sort-grid" @click.stop>
         <template v-for="(sort,i) in sortList||[]" dense>
           <v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)">