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>