100 lines
2.6 KiB
Svelte
100 lines
2.6 KiB
Svelte
<script lang="ts" generics="TData, TValue">
|
|
import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
|
|
import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
|
|
import * as Table from '$lib/components/ui/table/index.js';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
|
|
type DataTableProps<TData, TValue> = {
|
|
columns: ColumnDef<TData, TValue>[];
|
|
data: TData[];
|
|
pageCount: number;
|
|
totalItems: number;
|
|
};
|
|
|
|
let { data, columns, pageCount, totalItems }: DataTableProps<TData, TValue> = $props();
|
|
|
|
const table = createSvelteTable({
|
|
get data() {
|
|
return data;
|
|
},
|
|
get columns() {
|
|
return columns;
|
|
},
|
|
getCoreRowModel: getCoreRowModel(),
|
|
manualPagination: true,
|
|
get pageCount() {
|
|
return pageCount;
|
|
}
|
|
});
|
|
|
|
function handlePageChange(newPage: number) {
|
|
const url = new URL($page.url);
|
|
url.searchParams.set('page', newPage.toString());
|
|
goto(url);
|
|
}
|
|
</script>
|
|
|
|
<div class="rounded-md border bg-card">
|
|
<Table.Root>
|
|
<Table.Header>
|
|
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
|
|
<Table.Row>
|
|
{#each headerGroup.headers as header (header.id)}
|
|
<Table.Head>
|
|
{#if !header.isPlaceholder}
|
|
<FlexRender
|
|
content={header.column.columnDef.header}
|
|
context={header.getContext()}
|
|
/>
|
|
{/if}
|
|
</Table.Head>
|
|
{/each}
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each table.getRowModel().rows as row (row.id)}
|
|
<Table.Row data-state={row.getIsSelected() && 'selected'}>
|
|
{#each row.getVisibleCells() as cell (cell.id)}
|
|
<Table.Cell>
|
|
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
|
|
</Table.Cell>
|
|
{/each}
|
|
</Table.Row>
|
|
{:else}
|
|
<Table.Row>
|
|
<Table.Cell colspan={columns.length} class="h-24 text-center">
|
|
No hay resultados.
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end space-x-2 py-4">
|
|
<div class="flex-1 text-sm text-muted-foreground">
|
|
Total: {totalItems}
|
|
</div>
|
|
<div class="space-x-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) - 1)}
|
|
disabled={Number($page.url.searchParams.get('page') || 1) <= 1}
|
|
>
|
|
Anterior
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onclick={() => handlePageChange(Number($page.url.searchParams.get('page') || 1) + 1)}
|
|
disabled={Number($page.url.searchParams.get('page') || 1) >= pageCount}
|
|
>
|
|
Siguiente
|
|
</Button>
|
|
</div>
|
|
</div>
|