You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
bandolier-website/admin/bando/demos/DataTable.svelte

71 lines
2.8 KiB

<script>
import DataTable from "$/client/components/DataTable.svelte";
import Icon from "$/client/components/Icon.svelte";
import { link } from 'svelte-spa-router';
import { log } from "$/client/logging.js";
import { onMount } from "svelte";
let rows = [
{_url: "/", id: 1, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 2, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 3, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 4, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 5, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 7, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 7, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 8, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 9, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 10, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 11, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 12, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 13, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 14, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 15, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 16, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 17, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 18, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 19, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 20, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
{_url: "/", id: 21, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
];
let column_names = Object.keys(rows[0]);
let pagination = { currentPage: 1, lastPage: 1 }
const full_query = async (event) => {
log.debug("QUERY", event.detail);
}
const search_query = async (event) => {
let search_text = event.detail;
log.debug("SEARCH", search_text);
}
const clear_search = async (event) => {
log.debug("CLEAR", event.detail);
}
const cell_click = (event) => {
log.debug("CELL", event.detail);
}
onMount(async () => {
await full_query();
});
</script>
<DataTable rows={ rows }
columns={ column_names }
bind:pagination
on:full_query={ full_query }
on:search_query={ search_query }
on:clear_search={ clear_search }
on:cell_click={ cell_click }>
<a href="/admin/table/" use:link><Icon name="arrow-left" size="36" /></a>
<a href="/admin/table/create/table/" use:link><Icon name="file-plus" size="36" /></a>
</DataTable>