Untitled
<script lang="ts"> import Table from "$lib/components/Table/Table.svelte"; import { timeSince } from "$lib/utils"; import ModalAddUser from "./ModalAddUser.svelte"; import UserBalance from "./(UserBalance)/UserBalance.svelte"; $: columns = [ { key: "id", label: "ID", hidden: true, }, { key: "username", label: "Username", }, { key: "role", label: "Type", render: (r: any) => r.role.name[0].toUpperCase() + r.role.name.slice(1), }, { key: "toBan", label: "Ban User?", render: (r: any) => { return `<input type="checkbox" class="rounded text-lg text-indigo-600">`; }, }, { key: "balance", label: "Balance", component: UserBalance, props: (r: any) => { return { user: r, }; }, }, { key: "created_at", label: "Created", render: (r: any) => { const ageDays = timeSince(r.created_at).days; return `${new Date(r.created_at).toLocaleDateString("en-US")}<br/> <span class="text-xs"> ${ageDays} ${ageDays > 1 ? "days" : "day"} ago </span>`; }, }, ]; </script> <Table {columns} apiRoute="/api/users"> <div class=""> <ModalAddUser /> </div> </Table> // Table.svelte <table> <thead> <tr> {#each columns as column} <Th centered={column.centerHeader} {handler} orderBy={column.key}>{column.label}</Th> {/each} </tr> <tr> {#each columns as column} <ThFilter {handler} filterBy={column.key} class="text-gray-100" /> {/each} </tr> </thead> <tbody> {#each $rows as row (row.id)} <tr class="hover:!bg-slate-900 border transition-all duration-300"> {#each columns as column (column?.key)} <td class="p-4"> <div class="{column.centerContent ? 'm-auto w-fit' : ''} "> {#if column.component} <svelte:component this={column?.component} {...column?.props ? column.props(row) : {}} /> {:else if column.render} {@html column.render(row)} {:else} {row[column.key]} {/if} </div> </td> {/each} </tr> {/each} </tbody> </table>
Leave a Comment