From 989441c0f93573ecb4b1c090dcdba0b1a61f4ecb Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 10 Oct 2023 06:57:25 +0000
Subject: [PATCH] fix: group by for small tables

---
 .../nc-gui/components/smartsheet/grid/GroupBy.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index dee7d6ccc4..ad003337c2 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -18,6 +18,7 @@ const props = defineProps<{
 
   viewWidth?: number
   scrollLeft?: number
+  fullPage?: boolean
 
   depth?: number
   maxDepth?: number
@@ -40,6 +41,12 @@ const wrapper = ref<HTMLElement | undefined>()
 
 const scrollable = ref<HTMLElement | undefined>()
 
+const tableHeader = ref<HTMLElement | undefined>()
+
+const fullPage = computed<boolean>(() => {
+  return props.fullPage ?? (tableHeader.value?.offsetWidth ?? 0) > (props.viewWidth ?? 0)
+})
+
 const _activeGroupKeys = ref<string[] | string>()
 
 const activeGroups = computed<string[]>(() => {
@@ -149,7 +156,7 @@ const onScroll = (e: Event) => {
             style="background-color: #f9f9fa; border-color: #e7e7e9; border-bottom-width: 1px"
             :style="{ 'padding-left': `${(maxDepth || 1) * 13}px` }"
           ></div>
-          <Table class="mb-2" :data="[]" :header-only="true" />
+          <Table ref="tableHeader" class="mb-2" :data="[]" :header-only="true" />
         </div>
         <div :class="{ 'px-[12px]': vGroup.root === true }">
           <a-collapse
@@ -258,11 +265,12 @@ const onScroll = (e: Event) => {
                 :row-height="rowHeight"
                 :redistribute-rows="redistributeRows"
                 :expand-form="expandForm"
-                :pagination-fixed-size="props.viewWidth"
+                :pagination-fixed-size="fullPage ? props.viewWidth : undefined"
                 :pagination-hide-sidebars="true"
                 :scroll-left="props.scrollLeft || _scrollLeft"
                 :view-width="viewWidth"
                 :scrollable="scrollable"
+                :full-page="fullPage"
               />
               <GroupBy
                 v-else
@@ -277,6 +285,7 @@ const onScroll = (e: Event) => {
                 :view-width="viewWidth"
                 :depth="_depth + 1"
                 :scroll-left="scrollBump"
+                :full-page="fullPage"
               />
             </a-collapse-panel>
           </a-collapse>
@@ -299,7 +308,7 @@ const onScroll = (e: Event) => {
       :change-page="(p: number) => groupWrapperChangePage(p, vGroup)"
       :hide-sidebars="true"
       :style="`${props.depth && props.depth > 0 ? 'border-radius: 0 0 12px 12px !important;' : ''}margin-left: ${scrollBump}px;`"
-      :fixed-size="props.viewWidth"
+      :fixed-size="fullPage ? props.viewWidth : undefined"
     ></LazySmartsheetPagination>
   </div>
 </template>