Closed
Description
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