Add DataTable component
This commit is contained in:
Daniel Supernault
parent
af5caa3d68
commit
47591bbd4a
220
resources/js/components/DataTable.vue
Normal file
220
resources/js/components/DataTable.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div
|
||||
v-if="sortOptions && sortOptions.length > 0"
|
||||
class="relative"
|
||||
>
|
||||
<select
|
||||
v-model="selectedSort"
|
||||
class="pl-3 pr-8 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none"
|
||||
@change="handleSortChange"
|
||||
>
|
||||
<option value="">Sort by...</option>
|
||||
<option
|
||||
v-for="option in sortOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
<ChevronDownIcon
|
||||
class="absolute right-2 top-2.5 h-5 w-5 text-gray-400 pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
@input="$emit('search', searchQuery)"
|
||||
/>
|
||||
<MagnifyingGlassIcon
|
||||
class="absolute left-3 top-2.5 h-5 w-5 text-gray-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
@click="$emit('refresh')"
|
||||
>
|
||||
<ArrowPathIcon class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table
|
||||
class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"
|
||||
>
|
||||
<thead class="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
|
||||
>
|
||||
{{ column.label }}
|
||||
</th>
|
||||
<th
|
||||
v-if="hasActions"
|
||||
class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"
|
||||
>
|
||||
<template v-if="loading">
|
||||
<tr v-for="i in 5" :key="i">
|
||||
<td
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
class="px-6 py-4"
|
||||
>
|
||||
<div
|
||||
class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"
|
||||
></div>
|
||||
</td>
|
||||
<td v-if="hasActions" class="px-6 py-4">
|
||||
<div
|
||||
class="h-4 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse ml-auto"
|
||||
></div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr
|
||||
v-for="item in data"
|
||||
v-else
|
||||
:key="item.id"
|
||||
class="hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<td
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<slot
|
||||
:name="`cell-${column.key}`"
|
||||
:item="item"
|
||||
:value="item[column.key]"
|
||||
>
|
||||
{{ item[column.key] }}
|
||||
</slot>
|
||||
</td>
|
||||
<td
|
||||
v-if="hasActions"
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm"
|
||||
>
|
||||
<slot name="actions" :item="item">
|
||||
<button
|
||||
class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<button
|
||||
class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">
|
||||
Showing {{ data.length }} results
|
||||
</p>
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
:disabled="!hasPrevious"
|
||||
:class="[
|
||||
'px-3 py-1 text-sm border rounded',
|
||||
hasPrevious
|
||||
? 'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||||
: 'border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-600 cursor-not-allowed',
|
||||
]"
|
||||
@click="$emit('previous')"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
:disabled="!hasNext"
|
||||
:class="[
|
||||
'px-3 py-1 text-sm border rounded',
|
||||
hasNext
|
||||
? 'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||||
: 'border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-600 cursor-not-allowed',
|
||||
]"
|
||||
@click="$emit('next')"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
ArrowPathIcon,
|
||||
ChevronDownIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
columns: Array,
|
||||
data: Array,
|
||||
loading: Boolean,
|
||||
hasPrevious: Boolean,
|
||||
hasNext: Boolean,
|
||||
hasActions: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
sortOptions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
initialSearchQuery: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["search", "refresh", "previous", "next", "sort"]);
|
||||
|
||||
const searchQuery = ref(props.initialSearchQuery);
|
||||
const selectedSort = ref("");
|
||||
|
||||
watch(
|
||||
() => props.initialSearchQuery,
|
||||
(newValue) => {
|
||||
searchQuery.value = newValue || "";
|
||||
},
|
||||
);
|
||||
|
||||
const handleSortChange = () => {
|
||||
emit("sort", selectedSort.value);
|
||||
};
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user