From d50e2ada0fd3bec3a98e092aabc032226390c4f8 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 10:39:14 +0200
Subject: [PATCH] feat(VnTable): refs #6825 actions sticky

---
 src/components/VnTable/VnTable.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index b7ac12237..853c64ed6 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -228,6 +228,9 @@ defineExpose({
                         />
                     </QTh>
                 </template>
+                <template #header-cell-tableActions>
+                    <QTh auto-width class="sticky" />
+                </template>
                 <template #body-cell-tableStatus="{ col, row }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
                         <VnTableChip :columns="splittedColumns.columnChips" :row="row">
@@ -253,7 +256,11 @@ defineExpose({
                     </QTd>
                 </template>
                 <template #body-cell-tableActions="{ col, row }">
-                    <QTd auto-width :class="`text-${col.align ?? 'left'} `">
+                    <QTd
+                        auto-width
+                        :class="`text-${col.align ?? 'left'}`"
+                        class="sticky no-padding"
+                    >
                         <QBtn
                             v-for="(btn, index) of col.actions"
                             :key="index"
@@ -357,7 +364,7 @@ defineExpose({
             </QTable>
         </template>
     </VnPaginate>
-    <QPageSticky v-if="create" :offset="[20, 20]">
+    <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>
             {{ create.title }}
@@ -496,8 +503,12 @@ defineExpose({
     }
     .sticky {
         position: sticky;
+        right: 0;
         z-index: 1;
     }
+    td.sticky {
+        background-color: var(--q-dark);
+    }
 }
 
 .vn-label-value {