import { getCoreRowModel, createSvelteTable, getSortedRowModel, type TableOptions, flexRender, type ColumnDef, type Table } from '@tanstack/svelte-table';
import { createQuery } from '@tanstack/svelte-query';
import { awaitTimeOut } from '$utils/awaitSleep';
import { usersList } from './data';
import { Chips, DateCell, Id } from '$components/tables/cells';
import { dateFormatter } from '$lib/formatters';
import type { Readable } from 'svelte/store';
interface User {
id: string;
firstName: string;
lastName: string;
email: string;
isOnline: boolean;
createdAt: string;
roles: string[];
}
async function getUsers() {
await awaitTimeOut(1000);
return usersList;
}
let users = createQuery({
queryKey: ['users'],
queryFn: getUsers,
initialData: [
{id: '031a9ead-acb1-446b-b4e7-b9b1cac125f4', firstName: 'Joellyn', lastName: 'Filipponi', email: '[email protected]', isOnline::false, roles: ['admin'], createdAt: '2022-01-12 10:07:07'},
],
onSuccess: (data) => {}
});
const columns: ColumnDef<User>[] = [
{
id: 'name',
accessorFn: (row) => `${row.firstName} ${row.lastName}`,
header: 'Name'
},
{
id: 'createdAt',
accessorFn: (row) => dateFormatter.format(new Date(row.createdAt)),
header: 'Created At',
cell: (cell) => flexRender(DateCell, { value: cell.getValue() })
},
{
id: 'roles',
accessorKey: 'roles',
header: 'Roles',
cell: (cell) => flexRender(Chips, { value: cell.getValue() })
}
];
const options: TableOptions<User> = {
data: $users.data,
columns,
getCoreRowModel: getCoreRowModel(),
enableRowSelection: true
};
let table: Readable<Table<User>> = createSvelteTable(options);
import { getCoreRowModel, createSvelteTable, getSortedRowModel, type TableOptions, flexRender, type ColumnDef, type Table } from '@tanstack/svelte-table';
import { createQuery } from '@tanstack/svelte-query';
import { awaitTimeOut } from '$utils/awaitSleep';
import { usersList } from './data';
import { Chips, DateCell, Id } from '$components/tables/cells';
import { dateFormatter } from '$lib/formatters';
import type { Readable } from 'svelte/store';
interface User {
id: string;
firstName: string;
lastName: string;
email: string;
isOnline: boolean;
createdAt: string;
roles: string[];
}
async function getUsers() {
await awaitTimeOut(1000);
return usersList;
}
let users = createQuery({
queryKey: ['users'],
queryFn: getUsers,
initialData: [
{id: '031a9ead-acb1-446b-b4e7-b9b1cac125f4', firstName: 'Joellyn', lastName: 'Filipponi', email: '[email protected]', isOnline::false, roles: ['admin'], createdAt: '2022-01-12 10:07:07'},
],
onSuccess: (data) => {}
});
const columns: ColumnDef<User>[] = [
{
id: 'name',
accessorFn: (row) => `${row.firstName} ${row.lastName}`,
header: 'Name'
},
{
id: 'createdAt',
accessorFn: (row) => dateFormatter.format(new Date(row.createdAt)),
header: 'Created At',
cell: (cell) => flexRender(DateCell, { value: cell.getValue() })
},
{
id: 'roles',
accessorKey: 'roles',
header: 'Roles',
cell: (cell) => flexRender(Chips, { value: cell.getValue() })
}
];
const options: TableOptions<User> = {
data: $users.data,
columns,
getCoreRowModel: getCoreRowModel(),
enableRowSelection: true
};
let table: Readable<Table<User>> = createSvelteTable(options);