Skip to content

v0.2.2 #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 16, 2022
Merged

v0.2.2 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4deede6
added responsive
BitTheCat Nov 16, 2022
d2644cd
added overflow-hidden for responsive table v0.2.2
BitTheCat Nov 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions dev/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
<template>
<div class="pb-36">
<div class="flex max-w-2xl mx-auto mb-10 space-x-4 sm:mt-10">
<div class="flex flex-col flex-grow">
<div class="py-8 px-8">
<div class="font-semibold mb-2">
Tailwind Vue DataTable v0.2.1
Tailwind Vue DataTable v0.2.2
<span class="text-xs font-light">by BitTheCat</span>
</div>
<div>
<router-view />
</div>
</div>
</div>
</div>
</template>

<script>
Expand Down
19 changes: 18 additions & 1 deletion dev/TableShow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div>
<div class="mb-3">
<span class="text-xs"> Simple </span>

<TVTable
ref="tvtTableSimple"
:items="cloneItems"
Expand All @@ -10,7 +11,23 @@
:spinner-class="'text-red-500'"
@check-row="checkRow"
@row-clicked="checkRow"
/>
>
<template #header-row>
<tr>
<td colspan="2" />
<td colspan="1">Header1</td>
</tr>
</template>


<template #footer-row>
<tr>
<td colspan="1" />
<td colspan="1" />
<td colspan="1">Footer</td>
</tr>
</template>
</TVTable>

<input class="border mt-2 p-1 rounded bg-gray-300 text-sm" type="button" :value="`Test busy: ${busy ? 'on' : 'off' }`" @click="busy = !busy" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bitthecat/tailwind-vue-data-table",
"version": "0.2.1",
"version": "0.2.2",
"keywords": [
"tailwindcss",
"vue",
Expand Down
210 changes: 107 additions & 103 deletions src/components/TVTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,114 +3,118 @@
<span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
</div>

<table ref="TVTABLE" class="min-w-full">
<thead class="bg-gray-300 text-xs border divide-x divide-y">
<slot v-if="slots['header-row']" name="header-row" />
<tr class="divide-x divide-y">
<th
v-if="enableCheck"
class="px-2 py-1.5"
style="width: 30px"
/>

<th
v-for="field in fields"
:key="field.label"
class="px-2 py-1.5 font-medium uppercase"
:class="field.thClass"
:style="field.thStyle"
>
<div class="flex justify-between items-center">
<span>
{{ field.label }}
</span>
<div v-if="field.sortable" class="ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
:stroke-width="sortable[field.key] === 'asc' ? 4 : 2"
stroke="currentColor"
class="w-2.5 h-2.5 cursor-pointer"
@click="updateSortable(field.key, 'asc')"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
:stroke-width="sortable[field.key] === 'desc' ? 4 : 2"
stroke="currentColor"
class="w-2.5 h-2.5 cursor-pointer"
@click="updateSortable(field.key, 'desc')"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="border">
<tr v-if="busy">
<td :colspan="enableCheck ? fields.length + 1 : fields.length">
<div class="flex justify-center mb-3 mt-3">
<slot name="busy">
<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">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<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>
<div class="overflow-auto">
<table ref="TVTABLE" class="overflow-hidden min-w-full">
<thead class="bg-gray-300 text-xs border divide-x divide-y">
<slot v-if="slots['header-row']" name="header-row" />
<tr class="divide-x divide-y">
<th
v-if="enableCheck"
class="px-2 py-1.5"
style="width: 30px"
/>

<th
v-for="field in fields"
:key="field.label"
class="px-2 py-1.5 font-medium uppercase"
:class="field.thClass"
:style="field.thStyle"
>
<div class="flex justify-between items-center">
<span>
{{ field.label }}
</span>
<div v-if="field.sortable" class="ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
:stroke-width="sortable[field.key] === 'asc' ? 4 : 2"
stroke="currentColor"
class="w-2.5 h-2.5 cursor-pointer"
@click="updateSortable(field.key, 'asc')"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
</svg>
</slot>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
:stroke-width="sortable[field.key] === 'desc' ? 4 : 2"
stroke="currentColor"
class="w-2.5 h-2.5 cursor-pointer"
@click="updateSortable(field.key, 'desc')"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
</td>
</th>
</tr>
<template v-for="(item, index) in items" v-else :key="item.id">
<tr
:id="`TVTABLE_row_${index}_${item.id}`"
class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left 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 table-cell last:border-b-0 ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
</thead>
<tbody class="border">
<tr v-if="busy">
<td :colspan="enableCheck ? fields.length + 1 : fields.length">
<div class="flex justify-center mb-3 mt-3">
<slot name="busy">
<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">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<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>
</svg>
</slot>
</div>
</td>
</tr>
<template v-for="(item, index) in items" v-else :key="item.id">
<tr
:id="`TVTABLE_row_${index}_${item.id}`"
class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left border hover:bg-gray-400/50"
:class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'}`"
@click="rowClicked(item)"
>
<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 table-cell last:border-b-0"
:class="`${field.tdClass ?? ''} ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
:style="field.tdStyle"
>
<slot
:name="`cell:${field.key || field.label}`"
:item="item"
:data="getField(item, field.key)"
:toggle-details="toggleDetails"
<td
v-if="enableCheck"
:key="`check_${item.label}`"
:class="`px-2 py-1.5 align-top table-cell last:border-b-0 ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
>
{{ getField(item, field.key, '') }}
</slot>
</td>
</tr>
<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>
</tr>
</template>
</tbody>
<tfoot class="bg-gray-300 border divide-x divide-y">
<slot v-if="slots['footer-row']" name="footer-row" />
</tfoot>
</table>
<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 table-cell last:border-b-0"
:class="`${field.tdClass ?? ''} ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
:style="field.tdStyle"
>
<slot
:name="`cell:${field.key || field.label}`"
:item="item"
:data="getField(item, field.key)"
:toggle-details="toggleDetails"
>
{{ getField(item, field.key, '') }}
</slot>
</td>
</tr>
<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>
</tr>
</template>
</tbody>
<tfoot
class="text-xs bg-gray-300 border divide-x divide-y"
>
<slot v-if="slots['footer-row']" name="footer-row" />
</tfoot>
</table>
</div>

<TVPagination
v-if="localTotalRows > perPage && !hidePagination"
Expand Down