Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table with sorting has issues when using TS #1570

Open
Akergez opened this issue Apr 8, 2025 · 1 comment
Open

Table with sorting has issues when using TS #1570

Akergez opened this issue Apr 8, 2025 · 1 comment

Comments

@Akergez
Copy link

Akergez commented Apr 8, 2025

Describe the bug

<script lang="ts">
    import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
    let items = [
        { id: 1, maker: 'Toyota', type: 'ABC', make: 2017 },
        { id: 2, maker: 'Ford', type: 'CDE', make: 2018 },
        { id: 3, maker: 'Volvo', type: 'FGH', make: 2019 },
        { id: 4, maker: 'Saab', type: 'IJK', make: 2020 }
    ];
</script>

<Table hoverable={true} {items}>
    <TableHead>
        <TableHeadCell sort={(a, b) => a.id - b.id}>ID</TableHeadCell>
        <TableHeadCell sort={(a, b) => a.maker.localeCompare(b.maker)} defaultSort>Maker</TableHeadCell>
        <TableHeadCell sort={(a, b) => a.type.localeCompare(b.type)}>Type</TableHeadCell>
        <TableHeadCell sort={(a, b) => a.make - b.make} defaultDirection="desc">Make</TableHeadCell>
        <TableHeadCell>
            <span class="sr-only">Buy</span>
        </TableHeadCell>
    </TableHead>
    <TableBody tableBodyClass="divide-y">
        <TableBodyRow slot="row" let:item>
            <TableBodyCell>{item.id}</TableBodyCell>
            <TableBodyCell>{item.maker}</TableBodyCell>
            <TableBodyCell>{item.type}</TableBodyCell>
            <TableBodyCell>{item.make}</TableBodyCell>
            <TableBodyCell>
                <a href="/tables" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Buy</a>
            </TableBodyCell>
        </TableBodyRow>
    </TableBody>
</Table>

when i add lang="ts" to example from docs, type of item becomes unknown and accessing item.id for example causes ts issue, but works

Reproduction

Use example from docs but add lang=ts

Flowbite version and System Info

npmPackages:
    @sveltejs/kit: ^2.16.0 => 2.20.4 
    flowbite-svelte: ^0.48.5 => 0.48.5 
    svelte: ^5.0.0 => 5.25.8 
    vite: ^6.2.5 => 6.2.5
@jaeger-2601
Copy link

Bump. Facing same issue here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants