From 5f8a280d0c7f3e9471609c27bff05b4723928de7 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Tue, 8 Oct 2024 17:39:11 +0700
Subject: [PATCH] fix(DataTable): make header pagination position fixed

---
 src/components/tables/RuiDataTable.vue       | 20 ++++++++++----------
 src/components/tables/RuiTablePagination.vue | 18 +++++++++++-------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/tables/RuiDataTable.vue b/src/components/tables/RuiDataTable.vue
index 6b04568..b9339b5 100644
--- a/src/components/tables/RuiDataTable.vue
+++ b/src/components/tables/RuiDataTable.vue
@@ -996,19 +996,19 @@ onMounted(() => {
       { [$style.outlined]: outlined },
     ]"
   >
+    <RuiTablePagination
+      v-if="paginationData && !hideDefaultHeader"
+      v-model="paginationData"
+      :dense="dense"
+      :loading="loading"
+      :disable-per-page="disablePerPage"
+      data-cy="table-pagination"
+      @update:model-value="onPaginate()"
+    />
     <div
       ref="tableScroller"
       :class="$style.scroller"
     >
-      <RuiTablePagination
-        v-if="paginationData && !hideDefaultHeader"
-        v-model="paginationData"
-        :dense="dense"
-        :loading="loading"
-        :disable-per-page="disablePerPage"
-        data-cy="table-pagination"
-        @update:model-value="onPaginate()"
-      />
       <table
         ref="table"
         :class="[$style.table, { [$style.dense]: dense }]"
@@ -1341,7 +1341,7 @@ onMounted(() => {
   }
 
   .table {
-    @apply min-w-full table-fixed divide-y divide-black/[0.12] whitespace-nowrap mx-auto my-0 max-w-fit relative border-t border-black/[0.12];
+    @apply min-w-full table-fixed divide-y divide-black/[0.12] whitespace-nowrap mx-auto my-0 max-w-fit relative border-black/[0.12];
 
     .tbody {
       @apply divide-y divide-black/[0.12];
diff --git a/src/components/tables/RuiTablePagination.vue b/src/components/tables/RuiTablePagination.vue
index 548bb8f..aaa16b5 100644
--- a/src/components/tables/RuiTablePagination.vue
+++ b/src/components/tables/RuiTablePagination.vue
@@ -125,7 +125,7 @@ function onLast() {
 </script>
 
 <template>
-  <div :class="$style.wrapper">
+  <div :class="[$style.wrapper, { [$style['wrapper-dense']]: dense }]">
     <div :class="$style.limit">
       <span :class="$style.limit__text">Rows per page:</span>
       <RuiMenuSelect
@@ -201,21 +201,21 @@ function onLast() {
 
 <style module lang="scss">
 .wrapper {
-  @apply relative flex flex-wrap items-center justify-end;
+  @apply relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0;
 
   .limit {
-    @apply flex items-center space-x-2 text-caption px-3;
+    @apply flex items-center space-x-2 text-caption;
 
     &__text {
-      @apply text-rui-text-secondary whitespace-nowrap py-4;
+      @apply text-rui-text-secondary whitespace-nowrap py-3;
     }
   }
 
   .ranges {
-    @apply flex items-center space-x-2 text-caption px-3;
+    @apply flex items-center space-x-2 text-caption pr-2;
 
     &__text {
-      @apply text-rui-text-secondary whitespace-nowrap py-4;
+      @apply text-rui-text-secondary whitespace-nowrap py-3;
     }
   }
 
@@ -224,7 +224,11 @@ function onLast() {
   }
 
   .navigation {
-    @apply flex items-center pl-3;
+    @apply flex items-center;
+  }
+
+  &-dense {
+    @apply gap-x-2;
   }
 }
 </style>