diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index e7827e1239..5249014afe 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -288,7 +288,7 @@ const expandForm = (row: Row) => {
           <thead>
             <tr>
               <th>
-                <div class="flex align-center w-[80px]">
+                <div class="flex align-center w-[80px] px-1">
                   <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -329,73 +329,66 @@ const expandForm = (row: Row) => {
             </tr>
           </thead>
           <tbody>
-            <SmartsheetRow
-              v-for="(row, rowIndex) in data"
-              :key="row.id"
-              :row="row"
-              :row-index="rowIndex"
-              :selected="selected"
-              :edit-enabled="editEnabled"
-            >
-            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
-              <td key="row-index" class="caption nc-grid-cell group">
-                <div class="flex items-center w-[80px]">
-                  <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                  <div
-                    :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                    class="group-hover:flex w-full items-center justify-between p-1"
-                  >
-                    <a-checkbox v-model:checked="row.rowMeta.selected" />
-                    <span class="flex-1" />
-                    <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
-                      <MdiArrowExpand
-                        class="select-none transform hover:(text-pink-500 scale-120)"
-                        @click="expandedFormDlg = true"
-                      />
+            <SmartsheetRow v-for="(row, rowIndex) in data" :key="rowIndex" :row="row">
+              <tr class="nc-grid-row">
+                <td key="row-index" class="caption nc-grid-cell group">
+                  <div class="flex items-center w-[80px]">
+                    <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                    <div
+                      :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                      class="group-hover:flex w-full items-center justify-between p-1"
+                    >
+                      <a-checkbox v-model:checked="row.rowMeta.selected" />
+                      <span class="flex-1" />
+                      <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                        <MdiArrowExpand
+                          class="select-none transform hover:(text-pink-500 scale-120)"
+                          @click="expandedFormDlg = true"
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
-              </td>
-              <td
-                v-for="(columnObj, colIndex) of fields"
-                :ref="cellRefs.set"
-                :key="columnObj.id"
-                class="cell relative cursor-pointer nc-grid-cell"
-                :class="{
+                </td>
+                <td
+                  v-for="(columnObj, colIndex) of fields"
+                  :ref="cellRefs.set"
+                  :key="columnObj.id"
+                  class="cell relative cursor-pointer nc-grid-cell"
+                  :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
-                :data-key="rowIndex + columnObj.id"
-                :data-col="columnObj.id"
-                :data-title="columnObj.title"
-                @click="selectCell(rowIndex, colIndex)"
-                @dblclick="makeEditable(row, columnObj)"
-                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-              >
-                <div class="w-full h-full">
-                  <SmartsheetVirtualCell
-                    v-if="isVirtualCol(columnObj)"
-                    v-model="row.row[columnObj.title]"
-                    :column="columnObj"
-                    :active="selected.col === colIndex && selected.row === rowIndex"
-                    :row="row"
-                    @navigate="onNavigate"
-                  />
-
-                  <SmartsheetCell
-                    v-else
-                    v-model="row.row[columnObj.title]"
-                    :column="columnObj"
-                    :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                    :row-index="rowIndex"
-                    :active="selected.col === colIndex && selected.row === rowIndex"
-                    @update:edit-enabled="editEnabled = false"
-                    @save="updateOrSaveRow(row, columnObj.title)"
-                    @navigate="onNavigate"
-                    @cancel="editEnabled = false"
-                  />
-                </div>
-              </td>
-            </tr>
+                  :data-key="rowIndex + columnObj.id"
+                  :data-col="columnObj.id"
+                  :data-title="columnObj.title"
+                  @click="selectCell(rowIndex, colIndex)"
+                  @dblclick="makeEditable(row, columnObj)"
+                  @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+                >
+                  <div class="w-full h-full">
+                    <SmartsheetVirtualCell
+                      v-if="isVirtualCol(columnObj)"
+                      v-model="row.row[columnObj.title]"
+                      :column="columnObj"
+                      :active="selected.col === colIndex && selected.row === rowIndex"
+                      :row="row"
+                      @navigate="onNavigate"
+                    />
+
+                    <SmartsheetCell
+                      v-else
+                      v-model="row.row[columnObj.title]"
+                      :column="columnObj"
+                      :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                      :row-index="rowIndex"
+                      :active="selected.col === colIndex && selected.row === rowIndex"
+                      @update:edit-enabled="editEnabled = false"
+                      @save="updateOrSaveRow(row, columnObj.title)"
+                      @navigate="onNavigate"
+                      @cancel="editEnabled = false"
+                    />
+                  </div>
+                </td>
+              </tr>
             </SmartsheetRow>
 
             <tr v-if="!isLocked">
@@ -450,13 +443,11 @@ const expandForm = (row: Row) => {
     min-height: 41px !important;
     height: 41px !important;
     position: relative;
-    //padding: 0 5px;
+  }
 
-    & > div {
-      overflow: hidden;
-      @apply flex align-center h-auto;
-      padding: 0 5px;
-    }
+  td > div {
+    overflow: hidden;
+    @apply flex align-center h-auto px-1;
   }
 
   table,
diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
index 4b8e072800..043894959a 100644
--- a/packages/nc-gui-v2/components/smartsheet/Row.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -1,79 +1,23 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
 import type { Row } from '~/composables'
 import { useSmartsheetStoreOrThrow } from '~/composables'
 import { useProvideSmartsheetRowStore } from '~/composables/useSmartsheetRowStore'
-import { FieldsInj } from '~/context'
 
 interface Props {
   row: Row
-  selected: { col?: number; row?: number }
-  rowIndex: number
-  editEnabled: boolean
 }
 
 const props = defineProps<Props>()
-
 const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'navigate'])
-
 const row = toRef(props, 'row')
-const rowIndex = toRef(props, 'rowIndex')
-const editEnabled = toRef(props, 'editEnabled')
-
-// todo : from props / inject
-const isPublicView = false
 
-const fields = inject(FieldsInj, ref([]))
 const { meta } = useSmartsheetStoreOrThrow()
-
-const { isNew } = useProvideSmartsheetRowStore(meta, row)
+const { isNew, localState } = useProvideSmartsheetRowStore(meta, row)
+watch(row, () => {
+  localState.value = {}
+})
 </script>
 
 <template>
-  <tr class="nc-grid-row group">
-    <td key="row-index" class="caption nc-grid-cell">
-      <div class="align-center flex w-[80px]">
-        <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-        <div :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" class="group-hover:flex w-full align-center">
-          <a-checkbox v-model:checked="row.rowMeta.selected" />
-          <span class="flex-1" />
-          <mdi-arrow-expand class="text-sm text-pink hidden group-hover:inline-block" @click="emit('expandForm')" />
-        </div>
-      </div>
-    </td>
-    <td
-      v-for="(columnObj, colIndex) in fields"
-      :key="columnObj.title"
-      class="cell pointer nc-grid-cell"
-      :class="{
-        active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-      }"
-      :data-col="columnObj.id"
-      @click="emit('selectCell', rowIndex, colIndex)"
-      @dblclick="editEnabled = true"
-      @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-    >
-      <div class="w-full h-full">
-        <SmartsheetVirtualCell
-          v-if="isVirtualCol(columnObj)"
-          v-model="row.row[columnObj.title]"
-          :column="columnObj"
-          :active="selected.col === colIndex && selected.row === rowIndex"
-          :row="row"
-          @navigate="emit('navigate', $event)"
-        />
-
-        <SmartsheetCell
-          v-else
-          v-model="row.row[columnObj.title]"
-          :column="columnObj"
-          :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-          @update:edit-enabled="editEnabled = false"
-          @save="emit('updateOrSaveRow', row, columnObj.title)"
-          @navigate="emit('navigate', $event)"
-          @cancel="emit('cancel')"
-        />
-      </div>
-    </td>
-  </tr>
+  <slot />
 </template>
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 67bb0f78b3..6b5ced2dc2 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -5,7 +5,7 @@ import type { Row } from '~/composables/useViewData'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   // state
-  const localState = reactive({})
+  const localState = ref({})
 
   // getters
   const isNew = computed(() => row.value?.rowMeta?.new)