Skip to content

Commit 2469901

Browse files
BitTheCatBitTheCat
authored
Merge pull request #8 from BitTheCat/fix/fixes
v0.2.2
2 parents 2510757 + d2644cd commit 2469901

File tree

4 files changed

+128
-111
lines changed

4 files changed

+128
-111
lines changed

‎dev/App.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
<template>
2-
<div class="pb-36">
3-
<div class="flex max-w-2xl mx-auto mb-10 space-x-4 sm:mt-10">
4-
<div class="flex flex-col flex-grow">
2+
<div class="py-8 px-8">
53
<div class="font-semibold mb-2">
6-
Tailwind Vue DataTable v0.2.1
4+
Tailwind Vue DataTable v0.2.2
75
<span class="text-xs font-light">by BitTheCat</span>
86
</div>
97
<div>
108
<router-view />
119
</div>
12-
</div>
1310
</div>
14-
</div>
1511
</template>
1612

1713
<script>

‎dev/TableShow.vue‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div>
33
<div class="mb-3">
44
<span class="text-xs"> Simple </span>
5+
56
<TVTable
67
ref="tvtTableSimple"
78
:items="cloneItems"
@@ -10,7 +11,23 @@
1011
:spinner-class="'text-red-500'"
1112
@check-row="checkRow"
1213
@row-clicked="checkRow"
13-
/>
14+
>
15+
<template #header-row>
16+
<tr>
17+
<td colspan="2" />
18+
<td colspan="1">Header1</td>
19+
</tr>
20+
</template>
21+
22+
23+
<template #footer-row>
24+
<tr>
25+
<td colspan="1" />
26+
<td colspan="1" />
27+
<td colspan="1">Footer</td>
28+
</tr>
29+
</template>
30+
</TVTable>
1431

1532
<input class="border mt-2 p-1 rounded bg-gray-300 text-sm" type="button" :value="`Test busy: ${busy ? 'on' : 'off' }`" @click="busy = !busy" />
1633
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@bitthecat/tailwind-vue-data-table",
3-
"version": "0.2.1",
3+
"version": "0.2.2",
44
"keywords": [
55
"tailwindcss",
66
"vue",

‎src/components/TVTable.vue‎

Lines changed: 107 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -3,114 +3,118 @@
33
<span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
44
</div>
55

6-
<table ref="TVTABLE" class="min-w-full">
7-
<thead class="bg-gray-300 text-xs border divide-x divide-y">
8-
<slot v-if="slots['header-row']" name="header-row" />
9-
<tr class="divide-x divide-y">
10-
<th
11-
v-if="enableCheck"
12-
class="px-2 py-1.5"
13-
style="width: 30px"
14-
/>
15-
16-
<th
17-
v-for="field in fields"
18-
:key="field.label"
19-
class="px-2 py-1.5 font-medium uppercase"
20-
:class="field.thClass"
21-
:style="field.thStyle"
22-
>
23-
<div class="flex justify-between items-center">
24-
<span>
25-
{{ field.label }}
26-
</span>
27-
<div v-if="field.sortable" class="ml-2">
28-
<svg
29-
xmlns="http://www.w3.org/2000/svg"
30-
fill="none"
31-
viewBox="0 0 24 24"
32-
:stroke-width="sortable[field.key] === 'asc' ? 4 : 2"
33-
stroke="currentColor"
34-
class="w-2.5 h-2.5 cursor-pointer"
35-
@click="updateSortable(field.key, 'asc')"
36-
>
37-
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
38-
</svg>
39-
<svg
40-
xmlns="http://www.w3.org/2000/svg"
41-
fill="none"
42-
viewBox="0 0 24 24"
43-
:stroke-width="sortable[field.key] === 'desc' ? 4 : 2"
44-
stroke="currentColor"
45-
class="w-2.5 h-2.5 cursor-pointer"
46-
@click="updateSortable(field.key, 'desc')"
47-
>
48-
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
49-
</svg>
50-
</div>
51-
</div>
52-
</th>
53-
</tr>
54-
</thead>
55-
<tbody class="border">
56-
<tr v-if="busy">
57-
<td :colspan="enableCheck ? fields.length + 1 : fields.length">
58-
<div class="flex justify-center mb-3 mt-3">
59-
<slot name="busy">
60-
<svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" :class="spinnerClass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
61-
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
62-
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
6+
<div class="overflow-auto">
7+
<table ref="TVTABLE" class="overflow-hidden min-w-full">
8+
<thead class="bg-gray-300 text-xs border divide-x divide-y">
9+
<slot v-if="slots['header-row']" name="header-row" />
10+
<tr class="divide-x divide-y">
11+
<th
12+
v-if="enableCheck"
13+
class="px-2 py-1.5"
14+
style="width: 30px"
15+
/>
16+
17+
<th
18+
v-for="field in fields"
19+
:key="field.label"
20+
class="px-2 py-1.5 font-medium uppercase"
21+
:class="field.thClass"
22+
:style="field.thStyle"
23+
>
24+
<div class="flex justify-between items-center">
25+
<span>
26+
{{ field.label }}
27+
</span>
28+
<div v-if="field.sortable" class="ml-2">
29+
<svg
30+
xmlns="http://www.w3.org/2000/svg"
31+
fill="none"
32+
viewBox="0 0 24 24"
33+
:stroke-width="sortable[field.key] === 'asc' ? 4 : 2"
34+
stroke="currentColor"
35+
class="w-2.5 h-2.5 cursor-pointer"
36+
@click="updateSortable(field.key, 'asc')"
37+
>
38+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
6339
</svg>
64-
</slot>
40+
<svg
41+
xmlns="http://www.w3.org/2000/svg"
42+
fill="none"
43+
viewBox="0 0 24 24"
44+
:stroke-width="sortable[field.key] === 'desc' ? 4 : 2"
45+
stroke="currentColor"
46+
class="w-2.5 h-2.5 cursor-pointer"
47+
@click="updateSortable(field.key, 'desc')"
48+
>
49+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
50+
</svg>
51+
</div>
6552
</div>
66-
</td>
53+
</th>
6754
</tr>
68-
<template v-for="(item, index) in items" v-else :key="item.id">
69-
<tr
70-
:id="`TVTABLE_row_${index}_${item.id}`"
71-
class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left border hover:bg-gray-400/50"
72-
:class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'}`"
73-
@click="rowClicked(item)"
74-
>
75-
<td
76-
v-if="enableCheck"
77-
:key="`check_${item.label}`"
78-
:class="`px-2 py-1.5 align-top table-cell last:border-b-0 ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
55+
</thead>
56+
<tbody class="border">
57+
<tr v-if="busy">
58+
<td :colspan="enableCheck ? fields.length + 1 : fields.length">
59+
<div class="flex justify-center mb-3 mt-3">
60+
<slot name="busy">
61+
<svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" :class="spinnerClass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
62+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
63+
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
64+
</svg>
65+
</slot>
66+
</div>
67+
</td>
68+
</tr>
69+
<template v-for="(item, index) in items" v-else :key="item.id">
70+
<tr
71+
:id="`TVTABLE_row_${index}_${item.id}`"
72+
class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left border hover:bg-gray-400/50"
73+
:class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'}`"
74+
@click="rowClicked(item)"
7975
>
80-
<input id="checkbox" v-model="selectedRows" :value="item" type="checkbox" @click.stop="emit('checkRow', item)" />
81-
</td>
82-
83-
<td
84-
v-for="field in fields"
85-
:key="field.key"
86-
class="px-2 py-1.5 align-top table-cell last:border-b-0"
87-
:class="`${field.tdClass ?? ''} ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
88-
:style="field.tdStyle"
89-
>
90-
<slot
91-
:name="`cell:${field.key || field.label}`"
92-
:item="item"
93-
:data="getField(item, field.key)"
94-
:toggle-details="toggleDetails"
76+
<td
77+
v-if="enableCheck"
78+
:key="`check_${item.label}`"
79+
:class="`px-2 py-1.5 align-top table-cell last:border-b-0 ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
9580
>
96-
{{ getField(item, field.key, '') }}
97-
</slot>
98-
</td>
99-
</tr>
100-
<tr
101-
v-if="item._showDetails"
102-
:class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
103-
>
104-
<td :colspan="enableCheck ? fields.length + 1 : fields.length">
105-
<slot name="row-details" :item="item" />
106-
</td>
107-
</tr>
108-
</template>
109-
</tbody>
110-
<tfoot class="bg-gray-300 border divide-x divide-y">
111-
<slot v-if="slots['footer-row']" name="footer-row" />
112-
</tfoot>
113-
</table>
81+
<input id="checkbox" v-model="selectedRows" :value="item" type="checkbox" @click.stop="emit('checkRow', item)" />
82+
</td>
83+
84+
<td
85+
v-for="field in fields"
86+
:key="field.key"
87+
class="px-2 py-1.5 align-top table-cell last:border-b-0"
88+
:class="`${field.tdClass ?? ''} ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
89+
:style="field.tdStyle"
90+
>
91+
<slot
92+
:name="`cell:${field.key || field.label}`"
93+
:item="item"
94+
:data="getField(item, field.key)"
95+
:toggle-details="toggleDetails"
96+
>
97+
{{ getField(item, field.key, '') }}
98+
</slot>
99+
</td>
100+
</tr>
101+
<tr
102+
v-if="item._showDetails"
103+
:class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
104+
>
105+
<td :colspan="enableCheck ? fields.length + 1 : fields.length">
106+
<slot name="row-details" :item="item" />
107+
</td>
108+
</tr>
109+
</template>
110+
</tbody>
111+
<tfoot
112+
class="text-xs bg-gray-300 border divide-x divide-y"
113+
>
114+
<slot v-if="slots['footer-row']" name="footer-row" />
115+
</tfoot>
116+
</table>
117+
</div>
114118

115119
<TVPagination
116120
v-if="localTotalRows > perPage && !hidePagination"

0 commit comments

Comments
 (0)