Browse Source

Merge pull request #3951 from nocodb/enhancement/3768-scroll-to-cell

Enhancement: Scroll to the active cell on active cell change
pull/3954/head
Pranav C 2 years ago committed by GitHub
parent
commit
35d59ef831
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 21
      packages/nc-gui/components/smartsheet/Grid.vue

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

@ -327,6 +327,22 @@ watch(
}, },
{ immediate: true }, { immediate: true },
) )
const tbodyEl = ref<HTMLElement>()
watch([() => selected.row, () => selected.col], ([row, col]) => {
if (row !== null && col !== null) {
// get active cell
const td = tbodyEl.value?.querySelectorAll('tr')[row]?.querySelectorAll('td')[col + 1]
if (!td) return
// scroll into the active cell
td.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'end',
})
}
})
</script> </script>
<template> <template>
@ -413,7 +429,7 @@ watch(
</tr> </tr>
</thead> </thead>
<!-- this prevent select text from field if not in edit mode --> <!-- this prevent select text from field if not in edit mode -->
<tbody @selectstart.prevent> <tbody ref="tbodyEl" @selectstart.prevent>
<LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row"> <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
<template #default="{ state }"> <template #default="{ state }">
<tr class="nc-grid-row"> <tr class="nc-grid-row">
@ -434,7 +450,8 @@ watch(
<a-checkbox v-model:checked="row.rowMeta.selected" /> <a-checkbox v-model:checked="row.rowMeta.selected" />
</div> </div>
<span class="flex-1" /> <span class="flex-1" />
<div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }"> <div v-if="!readOnly && !isLocked" class="nc-expand"
:class="{ 'nc-comment': row.rowMeta?.commentCount }">
<span <span
v-if="row.rowMeta?.commentCount" v-if="row.rowMeta?.commentCount"
class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)" class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"

Loading…
Cancel
Save