Getting Typescript errors when using data-table for Svelte 5

[PetrLaskevic]

Describe the bug

I followed the tutorial from https://next.shadcn-svelte.com/docs/components/data-table

First of all, thanks for the tutorial, it's really nice!

However, I noticed there were TypeScript errors like so:

Type '{ children: () => any; }' is not assignable to type '$$ComponentProps'.
  Property 'class' is missing in type '{ children: () => any; }' but required in type '{ ref?: any; class: any; children: any; }'

on <Table.Root> and and <Table.Header> and <Table.Row> and <Table.Head> etc. Basically on all Table.something.
Same issue with the Button & Input components.

Here is the whole repo if you wanted to see.

Coincidentally, there is an issue with filtering numerical columns there, but that is probably an upstream issue. Still, if you could could guide me if the error is on my end, I would be very thankful :)

I made a comment on Shadcn issue too (which is I think mistakenly stale)

Reproduction

https://github.com/PetrLaskevic/Tanstack-Table-Filter-Svelte/

Logs

System Info

System:
    OS: Linux 6.8 Linux Mint 22 (Wilma)
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
    Memory: 2.36 GB / 13.51 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 18.19.1 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
  Browsers:
    Chromium: 133.0.6943.53
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.17.2 
    bits-ui: ^1.3.1 => 1.3.1 
    lucide-svelte: ^0.475.0 => 0.475.0 
    svelte: ^5.0.0 => 5.20.2

Severity

annoyance

[ieedan]

You are using lang="ts" with js components if you remove lang="ts" and all the types you won't get type errors.

[ieedan]

but that is probably an upstream issue.

We don't have any dependencies to shadcn/ui so all the code will be here.

[PetrLaskevic]

You are using lang="ts" with js components if you remove lang="ts" and all the types you won't get type errors.

While it is true that removing Typescript will remove type errors, I would very much prefer to keep Typescript. Is there a way to make these components use Typescript as well?

As is, I copied much of the code from the tutorial / documentation, and I feel like that should work.

[ieedan]

Your project was initialized using the javascript template. You should re-initialize the project and choose typescript.

[PetrLaskevic]

You should re-initialize the project and choose typescript.

Is there a faster way then running npx sv create in a different folder and installing component dependencies one by one? And then copying over the scripts I added manually?

[ieedan]

I am not sure on the full setup for sveltekit but you should be able to swap out the jsconfig for a tsconfig and then just set typescript to true in the components.json

[PetrLaskevic]

I am not sure on the full setup for sveltekit but you should be able to swap out the jsconfig for a tsconfig and then just set typescript to true in the components.json

Thanks, I started a new project opting in typescript in the npx sv create and it all works great. Thank you very much, this didn't occur to me!

[PetrLaskevic]

but that is probably an upstream issue.

We don't have any dependencies to shadcn/ui so all the code will be here.

By upstream I meant tanstack/table (since that is what you're using for the data-table)

[ieedan]

By upstream I meant tanstack/table (since that is what you're using for the data-table)

Ah I see then you are most likely correct.