Merge pull request #2 from BitTheCat/additional-row-header

Additional Row Header (0.1.7)

Author: BitTheCat

README.md

@@ -6,6 +6,13 @@ Contains the TVPaginator component that can be disabled via prop or used in stan
 
 <img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvdatatable.jpg"/>
 
+<hr>
+
+#### ❗️ *__Documentation soon available__* 
+##### For now, check under dev/TableShow.vue to see the table in action
+
+<hr>
+
 ### Install
 ```
 npm i @bitthecat/tailwind-vue-data-table
@@ -43,7 +50,7 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 - Busy state ✔️
 <img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvtable_busy_state.jpg"/>
 
-- Additional rows up the header
+- Additional rows up the header ✔️
 
 - Select rows
 
@@ -77,7 +84,8 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 | items | table data |
 | fields | data fields |
 | #cell:FIELD_NAME | used for overwrite |
-
+| #row-details | row details, you need to use row.toggleDetails(row.item) within a template that contains an icon/button to toggle it |
+| #header-row | used for additional rows up the header |
 
 slot 'cell:' has item or data props
 

dev/TableShow.vue

@@ -30,6 +30,14 @@
                 @check-row="checkRow"
                 @row-clicked="checkRow"
             >
+                <template #header-row>
+                    <tr>
+                        <td colspan="2" />
+                        <td colspan="2" class="bg-white text-center">Header1</td>
+                        <td colspan="1" class="bg-red-300 text-center">Header2</td>
+                    </tr>
+                </template>
+
                 <template #cell:username="row">
                     {{ row.item.emoji }} - {{ row.item.username }}
                 </template>
@@ -42,10 +50,10 @@
                     <input id="checkbox" :checked="row.item._showDetails" type="checkbox" @click.stop="row.toggleDetails(row.item)" />
                 </template>
             </TVTable>
-            Selected: 
-            <pre>
-                {{ selectRow }}
-            </pre>
+
+            <div class="text-left mt-2">
+                Selected: {{ selectRow }}
+            </div>
         </div>
     </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.1.6",
+    "version": "0.1.7",
     "keywords": [
         "tailwindcss",
         "vue",

src/components/TVTable.vue

@@ -3,8 +3,9 @@
         <span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
     </div>
 
-    <table class="min-w-full">
-        <thead class="bg-gray-300 border">
+    <table ref="TVTABLE" class="min-w-full" v-bind="attrs">
+        <thead class="bg-gray-300 border divide-x divide-y">
+            <slot v-if="slots['header-row']" name="header-row" />
             <tr class="divide-x divide-y">
                 <th 
                     v-if="enableCheck" 
@@ -64,25 +65,25 @@
                         </div>
                     </td>
                 </tr>
-            <template v-for="(item, index) in items" v-else :key="item.label">
+            <template v-for="(item, index) in items" v-else :key="item.id">
                 <tr 
-                    :id="`TV_TABLE_row_${item.label}`"  
+                    :id="`TVTABLE_row_${index}_${item.id}`"  
                     class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left text-xs font-medium border hover:bg-gray-400/50"
                     :class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
                     @click="rowClicked(item)"
                 >
                     <td
                         v-if="enableCheck"
                         :key="`check_${item.label}`"
-                        class="px-2 py-1.5 align-top lg:table-cell last:border-b-0"
+                        class="px-2 py-1.5 align-top table-cell last:border-b-0"
                     >
                         <input id="checkbox" v-model="selectedRows" :value="item" type="checkbox" @click.stop="emit('checkRow', item)" />
                     </td>
 
                     <td
                         v-for="field in fields"
                         :key="field.key"
-                        class="px-2 py-1.5 align-top lg:table-cell last:border-b-0"
+                        class="px-2 py-1.5 align-top table-cell last:border-b-0"
                         :class="field.tdClass"
                         :style="field.tdStyle"
                     >
@@ -99,10 +100,10 @@
                 <tr 
                     v-if="item._showDetails" 
                     :class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
-                    >
-                        <td :colspan="enableCheck ? fields.length + 1 : fields.length">
-                            <slot name="row-details" :item="item" />
-                        </td>
+                >
+                    <td :colspan="enableCheck ? fields.length + 1 : fields.length">
+                        <slot name="row-details" :item="item" />
+                    </td>
                 </tr>
             </template>
         </tbody>
@@ -117,13 +118,16 @@
 </template>
 
 <script setup>
-import {computed, defineComponent, ref, watch} from 'vue';
+import {computed, defineComponent, ref, useAttrs, useSlots, watch} from 'vue';
 import TVPagination from './TVPagination.vue';
 
 defineComponent({
     name: 'TVTable'
 })
 
+const slots = useSlots();
+const attrs = useAttrs();
+
 const props = defineProps({
     items: {
         type: [Object, Array],