100 lines
2.9 KiB
Vue
100 lines
2.9 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
|
|
|
const props = defineProps({
|
|
example: { type: String, default: "Demo" },
|
|
});
|
|
|
|
// Dummy columns
|
|
const columns = [
|
|
{ key: "id", label: "ID", sortable: true, class: "w-16" },
|
|
{ key: "name", label: "Ime", sortable: true },
|
|
{ key: "email", label: "Email", sortable: true },
|
|
{
|
|
key: "balance",
|
|
label: "Stanje",
|
|
sortable: true,
|
|
align: "right",
|
|
formatter: (row) =>
|
|
new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
|
|
row.balance
|
|
),
|
|
},
|
|
{ key: "created_at", label: "Ustvarjeno", sortable: true },
|
|
];
|
|
|
|
// Generate some dummy rows
|
|
function makeRow(i) {
|
|
const bal = Math.round((Math.random() * 5000 - 1000) * 100) / 100;
|
|
const dt = new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 90));
|
|
const iso = dt.toISOString().slice(0, 10);
|
|
return {
|
|
id: i + 1,
|
|
name: `Uporabnik ${i + 1}`,
|
|
email: `user${i + 1}@example.com`,
|
|
balance: bal,
|
|
created_at: iso,
|
|
};
|
|
}
|
|
// Increase dataset to visualize multi-page pagination (e.g., 100 pages at size 10)
|
|
const rows = ref(Array.from({ length: 1000 }, (_, i) => makeRow(i)));
|
|
|
|
// Controls (two-way bound)
|
|
const sort = ref({ key: null, direction: null });
|
|
const search = ref("");
|
|
const page = ref(1);
|
|
const pageSize = ref(10);
|
|
const searchKeys = ["name", "email"];
|
|
|
|
function onRowClick(row) {
|
|
// no-op demo; could show toast or details
|
|
console.debug("Row clicked:", row);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Testing Sandbox">
|
|
<div class="space-y-6 p-6">
|
|
<div class="prose dark:prose-invert max-w-none">
|
|
<h1 class="text-2xl font-semibold">Testing Page</h1>
|
|
<p>
|
|
This page is for quick UI or component experiments. Remove or adapt as needed.
|
|
</p>
|
|
<p class="text-slate-700 dark:text-slate-200 text-sm">
|
|
Prop example value: <span class="font-mono">{{ props.example }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm"
|
|
>
|
|
<h2
|
|
class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3"
|
|
>
|
|
DataTable (Client-side)
|
|
</h2>
|
|
<DataTableClient
|
|
:columns="columns"
|
|
:rows="rows"
|
|
v-model:sort="sort"
|
|
v-model:search="search"
|
|
v-model:page="page"
|
|
v-model:pageSize="pageSize"
|
|
:search-keys="searchKeys"
|
|
@row:click="onRowClick"
|
|
>
|
|
<template #actions="{ row }">
|
|
<button
|
|
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-xs"
|
|
>
|
|
Akcija
|
|
</button>
|
|
</template>
|
|
</DataTableClient>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|