Skip to content

Commit 4deede6

Browse files
BitTheCatBitTheCat
committed
added responsive
1 parent 2510757 commit 4deede6

File tree

1 file changed

+106
-103
lines changed

1 file changed

+106
-103
lines changed

‎src/components/TVTable.vue‎

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

115118
<TVPagination
116119
v-if="localTotalRows > perPage && !hidePagination"

0 commit comments

Comments
 (0)