Enhancement: TanStack Table

[jasonwillschiu]

Describe the feature

See here
bryanmylee/svelte-headless-table#224

Plus shadcn/ui says it's based on Tanstack Table.

Thanks for all your hard work!
Jason

[huntabyte]

The last time I tried tanstack table it was a nightmare. I'll revisit the Svelte 5 rewrite and see how it goes.

[jessielaf]

@huntabyte I have been using tanstack table with Svelte for a while without any problems. Which problems did you encounter?

[robots4life]

TanStack/table#5403

[jasonwillschiu]

Happy for it to be something that's not TanStack table. Just something that's maintained with similar functionality to ease my mind haha

[ESchouten]

Personally I would prefer Tanstack Table, have been using it for over a year and nothing else really comes close to it.

[shyakadavis]

I'm indifferent to what ends up being used, but here is something else for consideration. (The runes-powered v2 is currently in preview)

• Repo: https://github.com/vincjo/datatables | Runes - https://github.com/vincjo/datatables/tree/runes
• URL: https://vincjo.fr/datatables.runes/

---

Here's even a shadcn-svelte example:

• https://vincjo.fr/datatables.runes/client/examples/shadcn

[j13n]

Just tried @tanstack/svelte-table@alpha on one of my current tables since I want to start using Svelte 5. Seems to be working fine.

You do have to have svelte@next installed though so for now it looks like:
Svelte 4 with svelte-headless-table and Svelte 5 with @tanstack/svelte-table@alpha.

If @huntabyte and the rest are cool with it I can write some documentation on how to use it. Perhaps a new section on the bottom of the current data-table docs with instructions on how to make data-tables with Svelte 5.

[robots4life]

This is just a heads up for anyone following the current docs on Data Table.

I had an issue where I wanted to combine pagination and sort with the current Data Table per docs but use a different icon for sorting the table up and down.

The solution is to include 2 unused properties, pageCount and pageSize for the Data Table to work correctly with props.sort.order.

const { hasNextPage, hasPreviousPage, pageIndex, pageCount, pageSize } = pluginStates.page;

Even though this is not mentioned in the docs because there an ArrowUpDown is used to trigger the sorting it makes sense to want to indicate to the user in what direction the table is currently sorted.

If we stick with svelte-headless-table for a while this is possibly worth mentioning in the docs.

[stefa168]

+1 for TanStack

[huntabyte]

After having used TanStack pretty extensively over the last few days, I can confirm that most of the issues I experienced with it the first time have been corrected.

If someone would like to update the DataTable docs and examples to use TanStack it would be greatly appreciated, otherwise, I will get to it as soon as I have the chance!

[c-kirkeby]

I'll be happy to have a go. I just recently tried to do this myself and I've got a draft PR open on a personal project. My main blocker has been trying to pass children to table cells as part of the table definition, something that was possible with svelte-headless-table but does not seem straightforward with TanStack Table (at least not following their docs).

Update 2/09/2024: this issue looks like it might resolve the issue I had, will have a prod around

[c-kirkeby]

Okay so rather than doubling up on trying to convert the Tasks demo (@shyakadavis has picked it up in #1260), I implemented the Data Table for my own project here at c-kirkeby/osrs-price-site#3. It doesn't have the filter or the actions / row selection or the filters from the Tasks example, and mine has some more complex use cases like colouring cells / right-aligning cells.

One issue I ran into was this:
https://github.com/c-kirkeby/osrs-price-site/pull/3/files#diff-dfcbcef4795391b3fac61ea52dc73d867264ba430a9ea6dfcab677acd7777e66R72-R73

Due to TanStack/table#4382 there are some TypeScript errors when assigning columns to the ColumnDef<TData, TValue> type.

I don't love the Svelte API for TanStack. It's a lot of React-like getters and setters, where as svelte-headless-table took much more of Svelte-like approach. They're apparently looking to improve it though. I also could not find a way to use Svelte slots with custom components in column defs (this is more for the reusable data table).

[robots4life]

It might be worth to point out that TanStack Table will not be supported by Svelte 5 out of the box.

sveltejs/svelte#10359 (comment)

#1260 (comment)

Perhaps it is a good idea to wait for TanStack Table to support Svelte 5 before writing new documentation.

[ESchouten]

@robots4life Correction: Tanstack Table v8 will not support Svelte 5, Tanstack Table v9 only supports Svelte 5 and up

[stefa168]

I have used Tanstack Table v9 alpha for the last two months and from what I've experienced it isn't ready for use yet.

I'd suggest waiting for the release or maybe make separate examples for both Tanstack Table and datatables

[robots4life]

Here is a guide to using Svelte 5 with TanStack Table v8 that @walker-tx put together.

https://github.com/walker-tx/svelte5-tanstack-table-examples

TanStack/table#5403 (comment)

After some of the questions on Discord and here, I've put together a reference project so folks can see how they can implement their own Svelte 5 adapter for @tanstack/table-core v8:

https://github.com/walker-tx/svelte5-tanstack-table-examples

Hopefully, this gives folks a clearer path to value.

Full disclosure: I threw this together in a caffeinated frenzy. Once I get some rest, I'll go back over everything with fresher eyes.

[huntabyte]

We're now using TanStack Table in shadcn-svelte@next - https://next.shadcn-svelte.com