63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
|
|
import DataTableExample from "../Examples/DataTableExample.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>
|
|
|
|
<DataTableExample></DataTableExample>
|
|
|
|
</template>
|