diff --git a/packages/nc-gui/components/project/spreadsheet/components/editable.vue b/packages/nc-gui/components/project/spreadsheet/components/editable.vue
new file mode 100644
index 0000000000..b8340e2145
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/components/editable.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    ref="editable"
+    contenteditable
+    v-on="listeners"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    listeners() {
+      return { ...this.$listeners, input: this.onInput }
+    }
+  },
+  mounted() {
+    this.$refs.editable.innerText = this.value
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.innerText)
+    }
+  }
+}
+</script>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
index 7e5d7d0867..131a6d626d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
@@ -151,7 +151,8 @@ export default {
     meta: Object,
     ignoreFocus: Boolean,
     isForm: Boolean,
-    active: Boolean
+    active: Boolean,
+    dummy: Boolean
   },
   data: () => ({
     changed: false,
diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index a6fae341d1..919ef94130 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -189,94 +189,98 @@
                 {{ $t('nav_drawer.virtual_views.gallery.create') }}
               </v-tooltip>
 
-<!--              <v-tooltip bottom>-->
-<!--                <template #activator="{ on }">-->
-<!--                  <v-list-item-->
-<!--                    dense-->
-<!--                    class="body-2"-->
-<!--                    v-on="on"-->
-<!--                    @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"-->
-<!--                  >-->
-<!--                    <v-list-item-icon class="mr-n1">-->
-<!--                      <v-icon x-small>-->
-<!--                        mdi-calendar-->
-<!--                      </v-icon>-->
-<!--                    </v-list-item-icon>-->
-<!--                    <v-list-item-title>-->
-<!--                      <span class="font-weight-regular">-->
-<!--                        &lt;!&ndash; Calendar &ndash;&gt;-->
-<!--                        {{ $t('nav_drawer.virtual_views.calendar.title') }}-->
-<!--                      </span>-->
-<!--                    </v-list-item-title>-->
-
-<!--                    <v-spacer />-->
-<!--                    <v-icon class="mr-1" small>-->
-<!--                      mdi-plus-->
-<!--                    </v-icon>-->
-<!--                  </v-list-item>-->
-<!--                </template>-->
-<!--                &lt;!&ndash; Add Calendar View &ndash;&gt;-->
-<!--                {{ $t('nav_drawer.virtual_views.calendar.create') }}-->
-<!--              </v-tooltip>-->
-<!--              <v-tooltip bottom>-->
-<!--                <template #activator="{ on }">-->
-<!--                  <v-list-item-->
-<!--                    dense-->
-<!--                    open-class="body-2"-->
-<!--                    v-on="on"-->
-<!--                    @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"-->
-<!--                  >-->
-<!--                    <v-list-item-icon class="mr-n1">-->
-<!--                      <v-icon x-small>-->
-<!--                        mdi-tablet-dashboard-->
-<!--                      </v-icon>-->
-<!--                    </v-list-item-icon>-->
-<!--                    <v-list-item-title>-->
-<!--                      <span class="font-weight-regular">-->
-<!--                        &lt;!&ndash; Kanban &ndash;&gt;-->
-<!--                        {{ $t('nav_drawer.virtual_views.kanban.title') }}-->
-<!--                      </span>-->
-<!--                    </v-list-item-title>-->
-
-<!--                    <v-spacer />-->
-<!--                    <v-icon class="mr-1" small>-->
-<!--                      mdi-plus-->
-<!--                    </v-icon>-->
-<!--                  </v-list-item>-->
-<!--                </template>-->
-<!--                &lt;!&ndash; Add Kanban View &ndash;&gt;-->
-<!--                {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
-<!--              </v-tooltip>-->
-<!--              <v-tooltip bottom>-->
-<!--                <template #activator="{ on }">-->
-<!--                  <v-list-item-->
-<!--                    dense-->
-<!--                    class="body-2"-->
-<!--                    v-on="on"-->
-<!--                    @click="$toast.info('Coming soon').goAway(3000)"-->
-<!--                  >-->
-<!--                    <v-list-item-icon class="mr-n1">-->
-<!--                      <v-icon x-small class="mt-n1">-->
-<!--                        mdi-form-select-->
-<!--                      </v-icon>-->
-<!--                    </v-list-item-icon>-->
-<!--                    <v-list-item-title>-->
-<!--                      <span class="font-weight-regular">-->
-<!--                        &lt;!&ndash; Form &ndash;&gt;-->
-
-<!--                        {{ $t('nav_drawer.virtual_views.form.title') }}-->
-<!--                      </span>-->
-<!--                    </v-list-item-title>-->
-
-<!--                    <v-spacer />-->
-<!--                    <v-icon class="mr-1" small>-->
-<!--                      mdi-plus-->
-<!--                    </v-icon>-->
-<!--                  </v-list-item>-->
-<!--                </template>-->
-<!--                &lt;!&ndash; Add Form View &ndash;&gt;-->
-<!--                {{ $t('nav_drawer.virtual_views.form.create') }}-->
-<!--              </v-tooltip>-->
+              <!--              <v-tooltip bottom>-->
+              <!--                <template #activator="{ on }">-->
+              <!--                  <v-list-item-->
+              <!--                    dense-->
+              <!--                    class="body-2"-->
+              <!--                    v-on="on"-->
+              <!--                    @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"-->
+              <!--                  >-->
+              <!--                    <v-list-item-icon class="mr-n1">-->
+              <!--                      <v-icon x-small>-->
+              <!--                        mdi-calendar-->
+              <!--                      </v-icon>-->
+              <!--                    </v-list-item-icon>-->
+              <!--                    <v-list-item-title>-->
+              <!--                      <span class="font-weight-regular">-->
+              <!--                        &lt;!&ndash; Calendar &ndash;&gt;-->
+              <!--                        {{ $t('nav_drawer.virtual_views.calendar.title') }}-->
+              <!--                      </span>-->
+              <!--                    </v-list-item-title>-->
+
+              <!--                    <v-spacer />-->
+              <!--                    <v-icon class="mr-1" small>-->
+              <!--                      mdi-plus-->
+              <!--                    </v-icon>-->
+              <!--                  </v-list-item>-->
+              <!--                </template>-->
+              <!--                &lt;!&ndash; Add Calendar View &ndash;&gt;-->
+              <!--                {{ $t('nav_drawer.virtual_views.calendar.create') }}-->
+              <!--              </v-tooltip>-->
+              <!--              <v-tooltip bottom>-->
+              <!--                <template #activator="{ on }">-->
+              <!--                  <v-list-item-->
+              <!--                    dense-->
+              <!--                    open-class="body-2"-->
+              <!--                    v-on="on"-->
+              <!--                    @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"-->
+              <!--                  >-->
+              <!--                    <v-list-item-icon class="mr-n1">-->
+              <!--                      <v-icon x-small>-->
+              <!--                        mdi-tablet-dashboard-->
+              <!--                      </v-icon>-->
+              <!--                    </v-list-item-icon>-->
+              <!--                    <v-list-item-title>-->
+              <!--                      <span class="font-weight-regular">-->
+              <!--                        &lt;!&ndash; Kanban &ndash;&gt;-->
+              <!--                        {{ $t('nav_drawer.virtual_views.kanban.title') }}-->
+              <!--                      </span>-->
+              <!--                    </v-list-item-title>-->
+
+              <!--                    <v-spacer />-->
+              <!--                    <v-icon class="mr-1" small>-->
+              <!--                      mdi-plus-->
+              <!--                    </v-icon>-->
+              <!--                  </v-list-item>-->
+              <!--                </template>-->
+              <!--                &lt;!&ndash; Add Kanban View &ndash;&gt;-->
+              <!--                {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
+              <!--              </v-tooltip>-->
+              <v-tooltip
+                v-if="enableDummyFeat"
+                bottom
+              >
+                <template #activator="{ on }">
+                  <v-list-item
+                    v-if="enableDummyFeat"
+                    dense
+                    class="body-2"
+                    v-on="on"
+                    @click="openCreateViewDlg('form')"
+                  >
+                    <v-list-item-icon class="mr-n1">
+                      <v-icon x-small class="mt-n1">
+                        mdi-form-select
+                      </v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>
+                      <span class="font-weight-regular">
+                        <!-- Form -->
+
+                        {{ $t('nav_drawer.virtual_views.form.title') }}
+                      </span>
+                    </v-list-item-title>
+
+                    <v-spacer />
+                    <v-icon class="mr-1" small>
+                      mdi-plus
+                    </v-icon>
+                  </v-list-item>
+                </template>
+                <!-- Add Form View -->
+                {{ $t('nav_drawer.virtual_views.form.create') }}
+              </v-tooltip>
             </v-list>
           </template>
         </div>
@@ -490,6 +494,7 @@ export default {
   name: 'SpreadsheetNavDrawer',
   components: { Extras, CreateViewDialog },
   props: {
+    extraViewParams: Object,
     showAdvanceOptions: Boolean,
     hideViews: Boolean,
     primaryValueColumn: [Number, String],
@@ -565,6 +570,7 @@ export default {
         this.$emit('update:fieldsOrder', queryParams.fieldsOrder || [])
         this.$emit('update:viewStatus', queryParams.viewStatus || {})
         this.$emit('update:columnsWidth', queryParams.columnsWidth || {})
+        this.$emit('update:extraViewParams', queryParams.extraViewParams || {})
         this.$emit('update:coverImageField', queryParams.coverImageField)
         this.$emit('update:showSystemFields', queryParams.showSystemFields)
         if (queryParams.showFields) {
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
index 6f9c43ec57..1cc099e3ec 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
@@ -83,23 +83,9 @@ export default {
     availableRealColumns() {
       return this.availableColumns && this.availableColumns.filter(c => !c.virtual)
     },
-    availableColumns() {
-      let columns = []
-
-      if (!this.meta) { return [] }
-      // todo: generate hideCols based on default values
-      const hideCols = ['created_at', 'updated_at']
-
-      if (this.showSystemFields) {
-        columns = this.meta.columns || []
-      } else if (this.data && this.data.length) {
-        columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
-          !((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
-          !hideCols.includes(c.cn))) || []
-      } else {
-        columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || []
-      }
 
+    allColumns() {
+      let columns = this.meta.columns
       if (this.meta && this.meta.v) {
         columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))]
       }
@@ -119,6 +105,25 @@ export default {
           }
         })
       }
+      return columns
+    },
+    availableColumns() {
+      let columns = []
+
+      if (!this.meta) { return [] }
+      // todo: generate hideCols based on default values
+      const hideCols = ['created_at', 'updated_at']
+
+      if (this.showSystemFields) {
+        columns = this.meta.columns || []
+      } else if (this.data && this.data.length) {
+        columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
+          !((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
+          !hideCols.includes(c.cn))) || []
+      } else {
+        columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || []
+      }
+
       if (this.fieldsOrder.length) {
         return [...columns].sort((c1, c2) => {
           const i1 = this.fieldsOrder.indexOf(c1.alias)
@@ -283,6 +288,11 @@ export default {
         this.syncDataDebounce(this)
       }
     },
+    extraViewParams(v) {
+      if (!this.loadingMeta || !this.loadingData) {
+        this.syncDataDebounce(this)
+      }
+    },
     fieldsOrder: {
       handler(v) {
         if (!this.loadingMeta || !this.loadingData) {
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 96139a41c8..1d5a968885 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container class="h-100 j-excel-container pa-0 ma-0" fluid>
     <v-toolbar height="32" dense class="elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7">
-      <div class="d-flex xc-border align-center search-box">
+      <div v-if="!isForm" class="d-flex xc-border align-center search-box">
         <v-menu bottom offset-y>
           <template #activator="{on}">
             <div v-on="on">
@@ -72,62 +72,65 @@
         </span>
       </v-tooltip>
       <lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" />
-      <x-btn tooltip="Reload view data" outlined small text @click="reload">
-        <v-icon small class="mr-1" color="grey  darken-3">
-          mdi-reload
-        </v-icon>
-      </x-btn>
-      <x-btn
-        v-if="isEditable && relationType !== 'bt'"
-        tooltip="Add new row"
-        :disabled="isLocked"
-        outlined
-        small
-        text
-        btn.class="nc-add-new-row-btn"
-        @click="insertNewRow(true,true)"
-      >
-        <v-icon small class="mr-1" color="grey  darken-3">
-          mdi-plus
-        </v-icon>
-      </x-btn>
-      <x-btn
-        small
-        text
-        outlined
-        tooltip="Save new rows"
-        :disabled="!edited || isLocked"
-        @click="save"
-      >
-        <v-icon small class="mr-1" color="grey  darken-3">
-          save
-        </v-icon>
-        Save
-      </x-btn>
 
-      <fields
-        v-model="showFields"
-        :field-list="fieldList"
-        :meta="meta"
-        :is-locked="isLocked"
-        :fields-order.sync="fieldsOrder"
-        :sql-ui="sqlUi"
-        :show-system-fields.sync="showSystemFields"
-        :cover-image-field.sync="coverImageField"
-        :is-gallery="isGallery"
-      />
+      <template v-if="!isForm">
+        <x-btn tooltip="Reload view data" outlined small text @click="reload">
+          <v-icon small class="mr-1" color="grey  darken-3">
+            mdi-reload
+          </v-icon>
+        </x-btn>
+        <x-btn
+          v-if="isEditable && relationType !== 'bt'"
+          tooltip="Add new row"
+          :disabled="isLocked"
+          outlined
+          small
+          text
+          btn.class="nc-add-new-row-btn"
+          @click="insertNewRow(true,true)"
+        >
+          <v-icon small class="mr-1" color="grey  darken-3">
+            mdi-plus
+          </v-icon>
+        </x-btn>
+        <x-btn
+          small
+          text
+          outlined
+          tooltip="Save new rows"
+          :disabled="!edited || isLocked"
+          @click="save"
+        >
+          <v-icon small class="mr-1" color="grey  darken-3">
+            save
+          </v-icon>
+          Save
+        </x-btn>
+
+        <fields
+          v-model="showFields"
+          :field-list="fieldList"
+          :meta="meta"
+          :is-locked="isLocked"
+          :fields-order.sync="fieldsOrder"
+          :sql-ui="sqlUi"
+          :show-system-fields.sync="showSystemFields"
+          :cover-image-field.sync="coverImageField"
+          :is-gallery="isGallery"
+        />
 
-      <sort-list
-        v-model="sortList"
-        :is-locked="isLocked"
-        :field-list="[...realFieldList, ...formulaFieldList]"
-      />
-      <column-filter
-        v-model="filters"
-        :is-locked="isLocked"
-        :field-list="[...realFieldList, ...formulaFieldList]"
-        dense
-      />
+        <sort-list
+          v-model="sortList"
+          :is-locked="isLocked"
+          :field-list="[...realFieldList, ...formulaFieldList]"
+        />
+        <column-filter
+          v-model="filters"
+          :is-locked="isLocked"
+          :field-list="[...realFieldList, ...formulaFieldList]"
+          dense
+        />
+      </template>
       <v-tooltip
         v-if="_isUIAllowed('table-delete')"
         bottom
@@ -273,8 +276,25 @@
               @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
             />
           </template>
+          <template v-else-if="isForm">
+            <form-view
+              :nodes="nodes"
+              :table="table"
+              :available-columns="availableColumns"
+              :meta="meta"
+              :data="data"
+              :show-fields.sync="showFields"
+              :all-columns="allColumns"
+              :field-list="fieldList"
+              :is-locked="isLocked"
+              :fields-order.sync="fieldsOrder"
+              :primary-value-column="primaryValueColumn"
+              :form-params.sync="extraViewParams.formParams"
+              @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
+            />
+          </template>
         </div>
-        <template v-if="data">
+        <template v-if="data && !isForm">
           <pagination
             v-model="page"
             :count="count"
@@ -307,6 +327,7 @@
         :view-status.sync="viewStatus"
         :columns-width.sync="columnsWidth"
         :show-system-fields.sync="showSystemFields"
+        :extra-view-params.sync="extraViewParams"
         @mapFieldsAndShowFields="mapFieldsAndShowFields"
         @loadTableData="loadTableData"
         @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
@@ -487,6 +508,7 @@
 
 import { mapActions } from 'vuex'
 import debounce from 'debounce'
+import FormView from './views/formView'
 import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
 
 import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
@@ -507,6 +529,7 @@ import ColumnFilter from '~/components/project/spreadsheet/components/columnFilt
 export default {
   name: 'RowsXcDataTable',
   components: {
+    FormView,
     DebugMetas,
     Pagination,
     ExpandedForm,
@@ -535,6 +558,7 @@ export default {
     showTabs: [Boolean, Number]
   },
   data: () => ({
+    extraViewParams: {},
     debug: false,
     key: 1,
     dataLoaded: false,
@@ -692,7 +716,8 @@ export default {
           fieldsOrder: this.fieldsOrder,
           viewStatus: this.viewStatus,
           columnsWidth: this.columnsWidth,
-          showSystemFields: this.showSystemFields
+          showSystemFields: this.showSystemFields,
+          extraViewParams: this.extraViewParams
         }
 
         if (this.isGallery) {
@@ -1038,6 +1063,9 @@ export default {
     isGallery() {
       return this.selectedView && this.selectedView.show_as === 'gallery'
     },
+    isForm() {
+      return this.selectedView && this.selectedView.show_as === 'form'
+    },
     meta() {
       return this.$store.state.meta.metas[this.table]
     },
diff --git a/packages/nc-gui/components/project/spreadsheet/views/formView.vue b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
new file mode 100644
index 0000000000..523f33fc14
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
@@ -0,0 +1,359 @@
+<template>
+  <v-container fluid class="h-100 backgroundColor">
+    <v-row class="h-100">
+      <v-col cols="3">
+        <v-card class="h-100 pa-2 backgroundColor elevation-0">
+          <div class="d-flex grey--text">
+            <span class="">Fields</span>
+            <v-spacer />
+            <span class="caption mr-2 font-weight-bold" style="border-bottom: 2px solid grey">add all</span>
+            <span class="caption font-weight-bold" style="border-bottom: 2px solid grey">remove all</span>
+          </div>
+          <draggable
+            v-model="hiddenColumns"
+            draggable=".item"
+            group="form-inputs"
+            @start="drag=true"
+            @end="drag=false"
+          >
+            <v-card
+              v-for="(col) in hiddenColumns"
+              :key="col.alias"
+              class="pa-2 my-2 item pointer elevation-0"
+              @mousedown="moved=false"
+              @mousemove="moved=false"
+              @mouseup="handleMouseUp(col)"
+            >
+              <div class="d-flex">
+                <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize flex-grow-1">
+                  <virtual-header-cell
+                    v-if="col.virtual"
+                    :column="col"
+                    :nodes="nodes"
+                    :is-form="true"
+                    :meta="meta"
+                  />
+                  <header-cell
+                    v-else
+                    :is-form="true"
+                    :value="col._cn"
+                    :column="col"
+                    :sql-ui="sqlUi"
+                  />
+
+                </label>
+                <v-icon color="grey">
+                  mdi-drag
+                </v-icon>
+              </div>
+            </v-card>
+            <div class="nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1">
+              Drag and drop field here to hide
+            </div>
+          </draggable>
+          <div class="grey--text caption text-center mt-4">
+            <v-icon samll color="grey">
+              mdi-plus
+            </v-icon>
+            Add new field to this table
+          </div>
+        </v-card>
+      </v-col>
+      <v-col class="h-100 px-10 backgroundColor darken-1" style="overflow-y: auto" cols="9">
+        <!--        <div class="my-14 d-flex align-center justify-center">-->
+        <!--          <v-chip>Add cover image</v-chip>-->
+        <!--        </div>-->
+        <div class="my-10 d-flex align-center justify-center flex-column">
+          <editable
+            v-model="localParams.name"
+            class="title nc-meta-inputs text-center"
+          />
+
+          <editable
+            v-model="localParams.description"
+            class="caption nc-meta-inputs text-center"
+          />
+        </div>
+
+        <div style="max-width:600px" class="mx-auto">
+          <draggable
+            v-model="columns"
+            draggable=".item"
+            group="form-inputs"
+            class="h-100"
+            @start="drag=true"
+            @end="drag=false"
+          >
+            <div
+              v-for="(col,i) in columns"
+              :key="col.alias"
+              class="nc-field-wrapper item pa-2"
+            >
+              <v-overlay
+                :value="true"
+                absolute
+                :color="$store.state.windows.darkTheme ? 'black': 'white'"
+                opacity="0.1"
+              />
+              <v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
+                mdi-eye-off-outline
+              </v-icon>
+              <!--            <v-card-->
+              <!--              outlined-->
+              <!--              class="pa-2 my-2  "-->
+              <!--            >-->
+              <div
+                v-if="!col.lk"
+                :key="i"
+                :class="{
+                  'active-row' : active === col._cn
+                }"
+                class="row-col  my-4"
+              >
+                <div>
+                  <label :for="`data-table-form-${col._cn}`" class="body-2  mt-n1 text-capitalize">
+                    <virtual-header-cell
+                      v-if="col.virtual"
+                      :column="col"
+                      :nodes="nodes"
+                      :is-form="true"
+                      :meta="meta"
+                    />
+                    <header-cell
+                      v-else
+                      :is-form="true"
+                      :value="col._cn"
+                      :column="col"
+                      :sql-ui="sqlUi"
+                    />
+
+                  </label>
+                  <virtual-cell
+                    v-if="col.virtual"
+                    ref="virtual"
+                    :column="col"
+                    :row="localState"
+                    :nodes="nodes"
+                    :meta="meta"
+                    :api="api"
+                    :active="false"
+                    :sql-ui="sqlUi"
+                    :is-form="true"
+                    :dummy="true"
+                  />
+                  <editable-cell
+                    v-else
+                    :id="`data-table-form-${col._cn}`"
+                    v-model="localState[col._cn]"
+                    :db-alias="dbAlias"
+                    :column="col"
+                    class="xc-input body-2"
+                    :meta="meta"
+                    :sql-ui="sqlUi"
+                    is-form
+                    :dummy="true"
+                  />
+                </div>
+              </div>
+              <!--            </v-card>-->
+            </div>
+          </draggable>
+          <div class="my-10 text-center">
+            <v-btn color="primary">
+              Submit
+            </v-btn>
+          </div>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+
+import draggable from 'vuedraggable'
+import VirtualHeaderCell from '../components/virtualHeaderCell'
+import HeaderCell from '../components/headerCell'
+import VirtualCell from '../components/virtualCell'
+import EditableCell from '../components/editableCell'
+import Editable from '../components/editable'
+
+export default {
+  name: 'FormView',
+  components: { Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
+  props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns'],
+  data: () => ({
+    localState: {},
+    moved: false
+    // hiddenColumns: []
+  }),
+  computed: {
+    localParams: {
+      get() {
+        return this.formParams || {}
+      },
+      set(params) {
+        this.$emit('update:formParams', params)
+      }
+    },
+    hiddenColumns: {
+      get() {
+        return this.allColumns.filter(c => !this.showFields[c.alias])
+      }
+    },
+    columns: {
+      get() {
+        return this.allColumns.filter(c => this.showFields[c.alias])
+      },
+      set(val) {
+        const showFields = val.reduce((o, v) => {
+          o[v.alias] = true
+          return o
+        }, {})
+        console.log(showFields, this.showFields)
+        const fieldsOrder = val.map(v => v.alias)
+        // debugger
+        this.$emit('update:showFields', showFields)
+        this.$emit('update:fieldsOrder', fieldsOrder)
+      }
+    }
+  },
+  watch: {
+    // visibleColumns: {
+    //   handler(val) {
+    //
+    //   },
+    //   deep: true
+    // }
+  },
+  mounted() {
+    this.localParams = Object.assign({ name: this.meta._tn, description: 'Form view description' }, this.localParams)
+    // this.columns = [...this.availableColumns]
+    // this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn))
+  },
+  methods: {
+    handleMouseUp(col) {
+      if (!this.moved) {
+        this.columns = [...this.columns, col]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.nc-field-wrapper {
+
+  position: relative;
+
+  .nc-field-remove-icon {
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    transition: 200ms opacity;
+    z-index: 9
+  }
+
+  &:hover {
+    background: var(--v-backgroundColorDefault-base);
+
+    .nc-field-remove-icon {
+      opacity: 1;
+    }
+  }
+}
+
+.row-col > label {
+  color: grey;
+  font-weight: 700;
+}
+
+.row-col:focus > label, .active-row > label {
+  color: var(--v-primary-base);
+}
+
+.title.text-center {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+::v-deep {
+
+  .v-breadcrumbs__item:nth-child(odd) {
+    font-size: .72rem;
+    color: grey;
+  }
+
+  .v-breadcrumbs li:nth-child(even) {
+    padding: 0 6px;
+    font-size: .72rem;
+    color: var(--v-textColor-base);
+  }
+
+  position: relative;
+
+  .comment-icon {
+    position: absolute;
+    right: 60px;
+    bottom: 60px;
+  }
+
+  div > input,
+  div > .xc-input > input,
+  div > .xc-input > div > input,
+  div > select,
+  div > .xc-input > select,
+  div textarea:not(.inputarea) {
+    border: 1px solid #7f828b33;
+    padding: 1px 5px;
+    font-size: .8rem;
+    border-radius: 4px;
+    min-height: 44px;
+
+    &:focus {
+      border: 1px solid var(--v-primary-base);
+    }
+
+    &:hover:not(:focus) {
+      box-shadow: 0 0 2px dimgrey;
+    }
+
+    background: var(--v-backgroundColorDefault-base);
+  }
+
+}
+
+.required > div > label + * {
+  border: 1px solid red;
+  border-radius: 4px;
+  background: var(--v-backgroundColorDefault-base);
+}
+
+.nc-meta-inputs {
+  width: 400px;
+  min-height: 40px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: var(--v-backgroundColor-base);
+  }
+
+  &:active, &:focus {
+    border: 1px solid #7f828b33;
+  }
+}
+
+.nc-drag-n-drop-to-hide {
+  border: 2px dotted #a1a1a1;
+  border-radius: 4px;
+  font-size: .6rem;
+  color: grey
+}
+
+</style>
diff --git a/packages/nc-gui/mixins/device.js b/packages/nc-gui/mixins/device.js
index dee099f14a..3a782e0168 100644
--- a/packages/nc-gui/mixins/device.js
+++ b/packages/nc-gui/mixins/device.js
@@ -44,7 +44,9 @@ export default {
       return process.env.EE
     },
     _isZh() {
-      return ['zh', 'zh-cn', 'zh-hk', 'zh-mo', 'zh-sg', 'zh-tw'].includes((navigator.language || navigator.userLanguage || 'en').toLowerCase())
+      const zhLan = ['zh', 'zh-cn', 'zh-hk', 'zh-mo', 'zh-sg', 'zh-tw']
+      const browserLan = (navigator.languages || [navigator.language || navigator.userLanguage || 'en']).map(v => v.toLowerCase())
+      return zhLan.some(l => browserLan.includes(l))
     },
     ...mapGetters({
       _isUIAllowed: 'users/GtrIsUIAllowed'