feat: Datatable - move caption out of the table, make headers nowrap

soft-stech · Oct 3, 2024 · 3682f86 · 3682f86
1 parent 5cf955b
commit 3682f86
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git 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
@@ -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>