Merge pull request #2947 from nocodb/feat/gui-v2-grid-ops

feat(gui-v2): Grid operations

packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@@ -118,7 +118,7 @@ watchEffect(() => {
             <!-- Cancel -->
             {{ $t('general.cancel') }}
           </a-button>
-          <a-button html-type="submit" type="primary" size="small" @click="addOrUpdate(reloadMeta)">
+          <a-button html-type="submit" type="primary" size="small" @click="addOrUpdate(reloadMeta), (advancedOptions = false)">
             <!-- Save -->
             {{ $t('general.save') }}
           </a-button>

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -6,74 +6,13 @@ import { ColumnInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
+
 provide(ColumnInj, column)
+
 const meta = inject(MetaInj)
 
 // instantiate column update store
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
-
-/*
-import { UITypes } from 'nocodb-sdk'
-import cell from '@/components/project/spreadsheet/mixins/cell'
-import EditColumn from '~/components/project/spreadsheet/components/EditColumn'
-
-export default {
-  name: 'HeaderCell',
-  components: { EditColumn },
-  mixins: [cell],
-  props: [
-    'value',
-    'column',
-    'isForeignKey',
-    'meta',
-    'nodes',
-    'columnIndex',
-    'isForm',
-    'isPublicView',
-    'isVirtual',
-    'required',
-    'isLocked',
-  ],
-  data: () => ({
-    editColumnMenu: false,
-    columnDeleteDialog: false,
-  }),
-  methods: {
-    showColumnEdit() {
-      if (this.column.uidt === UITypes.ID) {
-        return this.$toast.info('Primary key column edit is not allowed.').goAway(3000)
-      }
-      this.editColumnMenu = true
-    },
-    async deleteColumn() {
-      try {
-        const column = { ...this.column, cno: this.column.column_name }
-        column.altered = 4
-        const columns = this.meta.columns.slice()
-        columns[this.columnIndex] = column
-        await this.$api.dbTableColumn.delete(column.id)
-
-        this.$emit('colDelete')
-        this.$emit('saved')
-        this.columnDeleteDialog = false
-      } catch (e) {
-        console.log(e)
-      }
-    },
-    async setAsPrimaryValue() {
-      // todo: pass only updated fields
-      try {
-        await this.$api.dbTableColumn.primaryColumnSet(this.column.id)
-        this.$toast.success('Successfully updated as primary column').goAway(3000)
-      } catch (e) {
-        console.log(e)
-        this.$toast.error('Failed to update primary column').goAway(3000)
-      }
-      this.$emit('saved')
-      this.columnDeleteDialog = false
-    },
-  },
-} */
 </script>
 
 <template>

packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@@ -1,10 +1,54 @@
 <script lang="ts" setup>
+import { Modal } from 'ant-design-vue'
+import { inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
+import { useNuxtApp } from '#app'
+import { useMetas } from '#imports'
+import { ColumnInj, MetaInj } from '~/context'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiEditIcon from '~icons/mdi/pencil'
 import MdiStarIcon from '~icons/mdi/star'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
+const { virtual = false } = defineProps<{ virtual?: boolean }>()
 const editColumnDropdown = $ref(false)
+
+const column = inject(ColumnInj)
+const meta = inject(MetaInj)
+
+const { $api } = useNuxtApp()
+const { t } = useI18n()
+const toast = useToast()
+const { getMeta } = useMetas()
+
+const deleteColumn = () =>
+  Modal.confirm({
+    title: h('div', ['Do you want to delete ', h('span', { class: 'font-weight-bold' }, [column?.title]), ' column ?']),
+    okText: t('general.delete'),
+    okType: 'danger',
+    cancelText: t('general.cancel'),
+    async onOk() {
+      try {
+        await $api.dbTableColumn.delete(column?.id as string)
+        getMeta(meta?.value?.id as string, true)
+      } catch (e) {
+        toast.error(await extractSdkResponseErrorMsg(e))
+      }
+    },
+  })
+
+const setAsPrimaryValue = async () => {
+  try {
+    await $api.dbTableColumn.primaryColumnSet(column?.id as string)
+    getMeta(meta?.value?.id as string, true)
+    toast.success('Successfully updated as primary column')
+  } catch (e) {
+    console.log(e)
+    toast.error('Failed to update primary column')
+  }
+}
 </script>
 
 <template>
@@ -18,12 +62,12 @@ const editColumnDropdown = $ref(false)
     <MdiMenuDownIcon class="text-grey" />
     <template #overlay>
       <div class="shadow bg-white">
-        <div class="nc-column-edit nc-menu-item" @click="editColumnDropdown = true">
+        <div v-if="!virtual" class="nc-column-edit nc-menu-item" @click="editColumnDropdown = true">
           <MdiEditIcon class="text-primary" />
           <!-- Edit -->
           {{ $t('general.edit') }}
         </div>
-        <div v-t="['a:column:set-primary']" class="nc-menu-item">
+        <div v-if="!virtual" v-t="['a:column:set-primary']" class="nc-menu-item" @click="setAsPrimaryValue">
           <MdiStarIcon class="text-primary" />
 
           <!--       todo : tooltip -->
@@ -31,7 +75,7 @@ const editColumnDropdown = $ref(false)
           {{ $t('activity.setPrimary') }}
           <!--        <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span> -->
         </div>
-        <div class="nc-column-delete nc-menu-item">
+        <div class="nc-column-delete nc-menu-item" @click="deleteColumn">
           <MdiDeleteIcon class="text-error" />
           <!-- Delete -->
           {{ $t('general.delete') }}

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -145,71 +145,8 @@ provide(ColumnInj, column)
 
     <!--    </v-tooltip> -->
     <v-spacer />
-    <!--
-      todo: implement delete or edit column
 
-          <v-menu
-            v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('edit-column') && !isForm"
-            offset-y
-            open-on-hover
-            left
-            transition="slide-y-transition"
-          >
-            <template #activator="{ on }">
-              <v-icon v-if="!isLocked && !isForm" small v-on="on"> mdi-menu-down </v-icon>
-            </template>
-            <v-list dense>
-              <v-list-item dense @click="editColumnMenu = true">
-                <x-icon small class="mr-1 nc-column-edit" color="primary"> mdi-pencil </x-icon>
-                <span class="caption">
-                  &lt;!&ndash; Edit &ndash;&gt;
-                  {{ $t('general.edit') }}
-                </span>
-              </v-list-item>
-              <v-list-item @click="columnDeleteDialog = true">
-                <x-icon small class="mr-1 nc-column-delete" color="error"> mdi-delete-outline </x-icon>
-                <span class="caption">
-                  &lt;!&ndash; Delete &ndash;&gt;
-                  {{ $t('general.delete') }}
-                </span>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-
-          <v-dialog v-model="columnDeleteDialog" max-width="500" persistent>
-            <v-card>
-              <v-card-title class="grey darken-2 subheading white&#45;&#45;text"> Confirm </v-card-title>
-              <v-divider />
-              <v-card-text class="mt-4 title">
-                Do you want to delete <span class="font-weight-bold">'{{ column.title }}'</span> column ?
-              </v-card-text>
-              <v-divider />
-              <v-card-actions class="d-flex pa-4">
-                <v-spacer />
-                <v-btn small @click="columnDeleteDialog = false">
-                  &lt;!&ndash; Cancel &ndash;&gt;
-                  {{ $t('general.cancel') }}
-                </v-btn>
-                <v-btn v-t="['a:column:delete']" small color="error" @click="deleteColumn"> Confirm </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
-
-          <v-menu v-model="editColumnMenu" offset-y content-class="" left transition="slide-y-transition">
-            <template #activator="{ on }">
-              <span v-on="on" />
-            </template>
-            <edit-virtual-column
-              v-if="editColumnMenu"
-              v-model="editColumnMenu"
-              :nodes="nodes"
-              :edit-column="true"
-              :column="column"
-              :meta="meta"
-              :sql-ui="sqlUi"
-              v-on="$listeners"
-            />
-          </v-menu> -->
+    <SmartsheetHeaderMenu :virtual="true" />
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -1,25 +1,71 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
-import { useColumn, useVModel } from '#imports'
+import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
   column: ColumnType
   modelValue: any
+  editEnabled: boolean
 }
 
 interface Emits {
   (event: 'update:modelValue', value: any): void
 }
 
-const { column, ...rest } = defineProps<Props>()
+const { column, editEnabled, ...rest } = defineProps<Props>()
 
-const emit = defineEmits<Emits>()
+const emit = defineEmits(['update:modelValue', 'save'])
 
 provide(ColumnInj, column)
 
-const vModel = useVModel(rest, 'modelValue', emit)
+provide(
+  'editEnabled',
+  computed(() => editEnabled),
+)
+
+let changed = $ref(false)
+const syncValue = useDebounceFn(function () {
+  emit('save')
+}, 1000)
+
+const isAutoSaved = $computed(() => {
+  return [
+    UITypes.SingleLineText,
+    UITypes.LongText,
+    UITypes.PhoneNumber,
+    UITypes.Email,
+    UITypes.URL,
+    UITypes.Number,
+    UITypes.Decimal,
+    UITypes.Percent,
+    UITypes.Count,
+    UITypes.AutoNumber,
+    UITypes.SpecificDBType,
+    UITypes.Geometry,
+  ].includes(column.uidt as UITypes)
+})
+
+const isManualSaved = $computed(() => {
+  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column.uidt as UITypes)
+})
+
+const vModel = computed({
+  get: () => value,
+  set: (val) => {
+    if (val !== value) {
+      changed = true
+      emit('update:modelValue', val)
+      if (isAutoSaved) {
+        syncValue()
+      } else if (!isManualSaved) {
+        emit('save')
+      }
+    }
+  },
+})
 
 const {
   isURL,

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
+import { ColumnType, isVirtualCol } from 'nocodb-sdk'
 import {
+  Row,
   inject,
   onKeyStroke,
   onMounted,
   provide,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
+  useSmartsheetStoreOrThrow,
   useViewData,
 } from '#imports'
 import {
@@ -16,36 +18,55 @@ import {
   FieldsInj,
   IsFormInj,
   IsGridInj,
+  IsLockedInj,
   MetaInj,
   PaginationDataInj,
   ReloadViewDataHookInj,
 } from '~/context'
 import MdiPlusIcon from '~icons/mdi/plus'
+import MdiArrowExpandIcon from '~icons/mdi/arrow-expand'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
-const fields = inject(FieldsInj)
-
+const fields = inject(FieldsInj, ref([]))
+const isLocked = inject(IsLockedInj, false)
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
 
-const selected = reactive<{ row?: number | null; col?: number | null }>({})
-const editEnabled = ref(false)
+const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
+let editEnabled = $ref(false)
 const { sqlUi } = useProject()
 const { xWhere } = useSmartsheetStoreOrThrow()
 const addColumnDropdown = ref(false)
+const contextMenu = ref(false)
+const contextMenuTarget = ref(false)
+
+const visibleColLength = $computed(() => {
+  const cols = fields.value
+  return cols.filter((col) => !isVirtualCol(col)).length
+})
 
-const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view as any, xWhere)
-const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
+const {
+  loadData,
+  paginationData,
+  formattedData: data,
+  updateOrSaveRow,
+  changePage,
+  addEmptyRow,
+  deleteRow,
+  deleteSelectedRows,
+  selectedAllRecords,
+} = useViewData(meta, view as any, xWhere)
+const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
-provide(ChangePageInj, changePage)
 provide(EditModeInj, editEnabled)
+provide(ChangePageInj, changePage)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 reloadViewDataHook?.on(() => {
@@ -59,7 +80,7 @@ const selectCell = (row: number, col: number) => {
 
 onKeyStroke(['Enter'], (e) => {
   if (selected.row !== null && selected.col !== null) {
-    editEnabled.value = true
+    editEnabled = true
   }
 })
 
@@ -89,15 +110,101 @@ defineExpose({
 // watchEffect(() => {
 if (meta) useProvideColumnCreateStore(meta)
 // })
+
+// reset context menu target on hide
+watch(contextMenu, () => {
+  if (!contextMenu.value) {
+    contextMenuTarget.value = false
+  }
+})
+
+const clearCell = async (ctx: { row: number; col: number }) => {
+  const rowObj = data.value[ctx.row]
+  const columnObj = fields.value[ctx.col]
+
+  if (isVirtualCol(columnObj)) {
+    return
+  }
+
+  rowObj.row[columnObj.title] = null
+  // update/save cell value
+  await updateOrSaveRow(rowObj, columnObj.title)
+}
+
+/** handle keypress events */
+onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'], async (e: KeyboardEvent) => {
+  if (selected.row !== null && selected.col !== null) {
+    /** on tab key press navigate through cells */
+    switch (e.key) {
+      case 'Tab':
+        e.preventDefault()
+        if (e.shiftKey) {
+          if (selected.col > 0) {
+            selected.col--
+          } else if (selected.row > 0) {
+            selected.row--
+            selected.col = visibleColLength - 1
+          }
+        } else {
+          if (selected.col < visibleColLength - 1) {
+            selected.col++
+          } else if (selected.row < data.value.length - 1) {
+            selected.row++
+            selected.col = 0
+          }
+        }
+        break
+      /** on enter key press make cell editable */
+      case 'Enter':
+        e.preventDefault()
+        editEnabled = true
+        break
+      /** on delete key press clear cell */
+      case 'Delete':
+        e.preventDefault()
+        await clearCell(selected as { row: number; col: number })
+        break
+      /** on arrow key press navigate through cells */
+      case 'ArrowRight':
+        e.preventDefault()
+        if (selected.col < visibleColLength - 1) selected.col++
+        break
+      case 'ArrowLeft':
+        e.preventDefault()
+        if (selected.col > 0) selected.col--
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        if (selected.row > 0) selected.row--
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        if (selected.row < data.value.length - 1) selected.row++
+        break
+    }
+  }
+})
 </script>
 
 <template>
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
-      <table class="xc-row-table nc-grid backgroundColorDefault">
+      <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
+        <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
-          <tr>
-            <th>#</th>
+            <tr class="group">
+              <th>
+                <div class="flex align-center w-[80px]">
+                  <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
+                  <div
+                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                    class="group-hover:flex w-full align-center"
+                  >
+                    <a-checkbox v-model:checked="selectedAllRecords" />
+                    <span class="flex-1" />
+                  </div>
+                </div>
+              </th>
               <th
                 v-for="col in fields"
                 :key="col.title"
@@ -124,10 +231,18 @@ if (meta) useProvideColumnCreateStore(meta)
             </tr>
           </thead>
           <tbody>
-          <tr v-for="({ row }, rowIndex) in data" :key="rowIndex" class="nc-grid-row">
-            <td key="row-index" style="width: 65px" class="caption nc-grid-cell">
-              <div class="d-flex align-center">
-                {{ rowIndex + 1 }}
+            <tr v-for="(row, rowIndex) in data" :key="rowIndex" 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" />
+                    <MdiArrowExpandIcon class="text-sm text-pink hidden group-hover:inline-block" />
+                  </div>
                 </div>
               </td>
               <td
@@ -136,28 +251,59 @@ if (meta) useProvideColumnCreateStore(meta)
                 class="cell pointer nc-grid-cell"
                 :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-                // 'primary-column': primaryValueColumn === columnObj.title,
-                // 'text-center': isCentrallyAligned(columnObj),
-                // 'required': isRequired(columnObj, rowObj),
                 }"
                 :data-col="columnObj.id"
                 @click="selectCell(rowIndex, colIndex)"
                 @dblclick="editEnabled = true"
+                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
               >
-              <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row[columnObj.title]" :column="columnObj" />
+                <SmartsheetVirtualCell v-if="isVirtualCol(columnObj)" v-model="row.row[columnObj.title]" :column="columnObj" />
 
                 <SmartsheetCell
                   v-else
-                v-model="row[columnObj.title]"
+                  v-model="row.row[columnObj.title]"
                   :column="columnObj"
                   :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                @update:model-value="updateRowProperty(row, columnObj.title)"
+                  @save="updateOrSaveRow(row, columnObj.title)"
                 />
               </td>
             </tr>
+
+            <tr v-if="!isLocked">
+              <td
+                v-t="['c:row:add:grid-bottom']"
+                :colspan="visibleColLength + 1"
+                class="text-left pointer nc-grid-add-new-cell"
+                @click="addEmptyRow()"
+              >
+                <a-tooltip top left>
+                  <div class="w-min flex align-center">
+                    <MdiPlusIcon class="text-pint-500 text-xs" />
+                    <span class="ml-1 caption grey--text">
+                      {{ $t('activity.addRow') }}
+                    </span>
+                  </div>
+                  <template #title>
+                    <span class="caption"> Add new row</span>
+                  </template>
+                </a-tooltip>
+              </td>
+            </tr>
           </tbody>
         </table>
+        <template #overlay>
+          <div class="bg-white shadow" @click="contextMenu = false">
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
+            <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">
+              Insert new row
+            </div>
+          </div>
+        </template>
+      </a-dropdown>
     </div>
+
     <SmartsheetPagination />
   </div>
 </template>
@@ -175,6 +321,11 @@ if (meta) useProvideColumnCreateStore(meta)
     height: 41px !important;
     position: relative;
     padding: 0 5px;
+
+    & > * {
+      @apply flex align-center h-auto;
+    }
+
     overflow: hidden;
   }
 
@@ -186,8 +337,6 @@ if (meta) useProvideColumnCreateStore(meta)
     border-bottom: 1px solid #7f828b33 !important;
     border-top: 1px solid #7f828b33 !important;
     border-collapse: collapse;
-
-    font-size: 0.8rem;
   }
 
   td {

packages/nc-gui-v2/composables/useGridViewColumnWidth.ts

@@ -19,7 +19,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
 
   watch(
     // todo : update type in swagger
-    () => [gridViewCols, resizingCol, resizingColWidth],
+    () => [gridViewCols, resizingCol, resizingColWidth, columns],
     () => {
       let style = ''
       for (const c of columns?.value || []) {

packages/nc-gui-v2/composables/useViewData.ts

@@ -1,8 +1,10 @@
 import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
+import { notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 import { NOCO } from '~/lib'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -11,30 +13,73 @@ const formatData = (list: Record<string, any>[]) =>
     rowMeta: {},
   }))
 
+export interface Row {
+  row: Record<string, any>
+  oldRow: Record<string, any>
+  rowMeta?: any
+}
+
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
   viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
   where?: ComputedRef<string | undefined>,
 ) {
-  const data = ref<Record<string, any>[]>()
-  const formattedData = ref<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }[]>()
+  const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
 
+  const selectedAllRecords = computed({
+    get() {
+      return formattedData.value.every((row) => row.rowMeta.selected)
+    },
+    set(selected) {
+      formattedData.value.forEach((row) => (row.rowMeta.selected = selected))
+    },
+  })
+
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
       ...params,
       where: where?.value,
     })
-    data.value = response.list
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
   }
+  const insertRow = async (row: Record<string, any>, rowIndex = formattedData.value?.length) => {
+    try {
+      const insertObj = meta?.value?.columns?.reduce((o: any, col) => {
+        if (!col.ai && row?.[col.title as string] !== null) {
+          o[col.title as string] = row?.[col.title as string]
+        }
+        return o
+      }, {})
+
+      const insertedData = await $api.dbViewRow.create(
+        NOCO,
+        project?.value.id as string,
+        meta?.value.id as string,
+        viewMeta?.value?.id as string,
+        insertObj,
+      )
+
+      formattedData.value?.splice(rowIndex ?? 0, 1, {
+        row: insertedData,
+        rowMeta: {},
+        oldRow: { ...insertedData },
+      })
+    } catch (error: any) {
+      notification.error({
+        message: 'Row insert failed',
+        description: await extractSdkResponseErrorMsg(error),
+      })
+    }
+  }
 
   const updateRowProperty = async (row: Record<string, any>, property: string) => {
+    try {
       const id = meta?.value?.columns
         ?.filter((c) => c.pk)
         .map((c) => row[c.title as string])
@@ -70,36 +115,125 @@ export function useViewData(
               })
               .then(() => {})
           */
+    } catch (error: any) {
+      notification.error({
+        message: 'Row update failed',
+        description: await extractSdkResponseErrorMsg(error),
+      })
+    }
   }
-  const insertRow = async (row: Record<string, any>, rowIndex = formattedData.value?.length) => {
-    // todo: implement insert row
 
-    const insertObj = meta?.value?.columns?.reduce((o: any, col) => {
-      if (!col.ai && row?.[col.title as string] !== null) {
-        o[col.title as string] = row?.[col.title as string]
+  const updateOrSaveRow = async (row: Row, property: string) => {
+    if (row.rowMeta.new) {
+      await insertRow(row.row, formattedData.value.indexOf(row))
+    } else {
+      await updateRowProperty(row.row, property)
+    }
+  }
+  const changePage = async (page: number) => {
+    paginationData.value.page = page
+    await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25), where: where?.value } as any)
   }
-      return o
-    }, {})
 
-    const insertedData = await $api.dbViewRow.create(
-      NOCO,
-      project?.value.id as string,
+  const addEmptyRow = (addAfter = formattedData.value.length) => {
+    formattedData.value.splice(addAfter, 0, {
+      row: {},
+      oldRow: {},
+      rowMeta: { new: true },
+    })
+  }
+
+  const deleteRowById = async (id: string) => {
+    if (!id) {
+      throw new Error("Delete not allowed for table which doesn't have primary Key")
+    }
+
+    const res: any = await $api.dbViewRow.delete(
+      'noco',
+      project.value.id as string,
       meta?.value.id as string,
-      viewMeta?.value?.id as string,
-      insertObj,
+      viewMeta?.value.id as string,
+      id,
     )
 
-    formattedData.value?.splice(rowIndex ?? 0, 1, {
-      row: insertedData,
-      rowMeta: {},
-      oldRow: { ...insertedData },
+    if (res.message) {
+      notification.info({
+        message: 'Row delete failed',
+        description: h('div', {
+          innerHTML: `<div style="padding:10px 4px">Unable to delete row with ID ${id} because of the following:
+                <br><br>${res.message.join('<br>')}<br><br>
+                Clear the data first & try again</div>`,
+        }),
       })
+      return false
     }
 
-  const changePage = async (page: number) => {
-    paginationData.value.page = page
-    await loadData({ offset: (page - 1) * (paginationData.value.pageSize || 25), where: where?.value } as any)
+    return true
   }
 
-  return { data, loadData, paginationData, formattedData, insertRow, updateRowProperty, changePage }
+  const deleteRow = async (rowIndex: number) => {
+    try {
+      const row = formattedData.value[rowIndex]
+      if (!row.rowMeta.new) {
+        const id = meta?.value?.columns
+          ?.filter((c) => c.pk)
+          .map((c) => row.row[c.title as any])
+          .join('___')
+
+        const deleted = await deleteRowById(id as string)
+        if (!deleted) {
+          return
+        }
+      }
+      formattedData.value.splice(rowIndex, 1)
+    } catch (e: any) {
+      notification.error({
+        message: 'Failed to delete row',
+        description: await extractSdkResponseErrorMsg(e),
+      })
+    }
+  }
+
+  const deleteSelectedRows = async () => {
+    let row = formattedData.value.length
+    while (row--) {
+      try {
+        const { row: rowObj, rowMeta } = formattedData.value[row]
+        if (!rowMeta.selected) {
+          continue
+        }
+        if (!rowMeta.new) {
+          const id = meta?.value?.columns
+            ?.filter((c) => c.pk)
+            .map((c) => rowObj[c.title as string])
+            .join('___')
+
+          const successfulDeletion = await deleteRowById(id as string)
+          if (!successfulDeletion) {
+            continue
+          }
+        }
+        formattedData.value.splice(row, 1)
+      } catch (e: any) {
+        return notification.error({
+          message: 'Failed to delete row',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
+    }
+  }
+
+  return {
+    loadData,
+    paginationData,
+    formattedData,
+    insertRow,
+    updateRowProperty,
+    changePage,
+    addEmptyRow,
+    deleteRow,
+    deleteSelectedRows,
+    updateOrSaveRow,
+    selectedAllRecords,
+  }
 }