From 3682f86b6d78e9152800e0205d4a2ada8cc786b0 Mon Sep 17 00:00:00 2001
From: svetlanak-git <svetlanak.cf@gmail.com>
Date: Thu, 3 Oct 2024 18:31:42 +0300
Subject: [PATCH] feat: Datatable - move caption out of the table, make headers
 nowrap

---
 src/components/ui/table/BuiDataTable.vue | 5 +++--
 src/components/ui/table/BuiTableHead.vue | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/table/BuiDataTable.vue b/src/components/ui/table/BuiDataTable.vue
index 0615a62..638b396 100644
--- a/src/components/ui/table/BuiDataTable.vue
+++ b/src/components/ui/table/BuiDataTable.vue
@@ -25,7 +25,6 @@ import { computed, watchEffect } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
-  BuiTableCaption,
   BuiTableCell,
   BuiTableEmpty,
   BuiTableFooter,
@@ -144,8 +143,10 @@ function getGroupLabel(index: number) {
 </script>
 
 <template>
+  <div v-if="$slots.caption" class="w-full py-4">
+    <slot name="caption" :table="table" />
+  </div>
   <BuiTable>
-    <BuiTableCaption v-if="$slots.caption"><slot name="caption" :table="table" /></BuiTableCaption>
     <BuiTableHeader>
       <BuiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
         <BuiTableHead v-for="header in headerGroup.headers" :key="header.id">
diff --git a/src/components/ui/table/BuiTableHead.vue b/src/components/ui/table/BuiTableHead.vue
index a79b7a1..20b553c 100644
--- a/src/components/ui/table/BuiTableHead.vue
+++ b/src/components/ui/table/BuiTableHead.vue
@@ -13,7 +13,7 @@ const props = defineProps<{ class?: string }>()
       )
     "
   >
-    <div class="flex h-10 items-center border-r border-border/[0.16] p-4">
+    <div class="flex h-10 items-center whitespace-nowrap border-r border-border/[0.16] p-4">
       <slot />
     </div>
   </th>