Skip to content

Table with sorting has issues when using TS #1570

Closed
@Akergez

Description

@Akergez

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions