ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Interactive Tables in SvelteKit with TanStack Table
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- SvelteKit Playlist: • SvelteKit 1.0 with SQL...
Code: github.com/phartenfeller/svel...
Demo: sveltekit-demo.hartenfeller.dev/
In this video, we implement a feature-rich interactive table with the TanStack Table library. We allow column sorting, global Search, facet filters and pagination.
Follow me:
Twitter: / phartenfeller
Mastodon: mastodon.social/@phartenfeller
Blog: hartenfeller.dev/blog
LinkedIn: / phartenfeller
Support me:
www.buymeacoffee.com/hartenfe...
paypal.me/phartenfeller
Timestamps:
00:00 Intro
00:36 Create Invoice Page
02:02 Setup Table
05:45 Column Sorting
07:38 Global Search Filter
11:10 Fuzzy Search
12:55 Filter Column with Checkbox Facets
18:45 Min Max Number Facets
20:35 Pagination
23:54 Outro
Resources:
tanstack.com/table/v8
www.npmjs.com/package/@tansta...
www.npmjs.com/package/@tansta...
I tried a different style for this video. To reduce the video time, I voiced over the recording and cut a lot.ion. Do you have feedback on this?
I've often thought about this approach but always think I'll wonder what's coming next 😅
@@ScottSpencePlease It's a lot of cutting work (as an experienced cutter) but I can think more about what I am saying. Coding and talking at the same time is hard 😅
Could you cover something in lines of exporting this table data to csv? Or is it provided with this lib?
@@hassanmiiro1030 great idea, I will look into it 👍
Was great !!!
This was super fun to watch. Will try engage with it tonight. Thanks for the tutorial
Helped a lot, thank you 👍
Huge value! Thank you.
Superb tut, thanks so much
Lovely, thank you!
It sounds to me that server-side is being queried for the full set of data. In the case of having tens of thousands of entries or millions of entries, we need to delegate the pagination process to the backend. The api (as I noticed from inspecting the code) is not handling pagination.
Kindly advise or correct me.
You are correct. TanStack Table is designed for client-side data handling so I fetch all the data onto the client.
A server-side API would also need filterung and sorting on the server next to pagination.
Is there any way to implement default/initial sorting for the table..?
Good video, man. If the API provides pagination, which is better for the tanstack table or the self-build table component?
I think you might still want to use some component. It has lots of stuff already figured out.
But I am not sure if there are other table components more suited for doing everything server-side.
Great video. Any idea on how to use the global filter and pagination to fetch the from database using filter, limit, offset style query? Can't seem to find it on the documentation.
That's something TanStack table can't do, as it only focuses on the client-side data. I already had the idea of doing a video on how to rebuild the table with every data operation being server-side.
@@hartenfellerdev This video & code is a great resource for learning, thanks a lot! It would be nice to see your solution for a server-side rendered pagination.
Thank you! I have done that in a newer video: th-cam.com/video/pjV3rCBBT_Q/w-d-xo.html
Is there any way to render Svelte components in cells? The documentation is all in tsx.
Yeah, it also took me long to find out their docs aren't great for anything other than react, unfortunately. I did it in this part of another video: th-cam.com/video/w-aitQBsINc/w-d-xo.html
@@hartenfellerdev Thank you! That was exactly what I needed.
Could you please show how to add an edit and delete button to a row. Thanks
How to transform urls to image? and change cells format depending on token?
I don't quite understand what you mean with token and url to image?
With the cell property on a column you can define your own HTML markup for a col and in there e. g. use an image tag.
@@hartenfellerdev yes - i got url to work with cell: (info) => flexRender(Avatar, { src: info.row.original.avatar, width: 'w-8' })
@@hartenfellerdev how do i render an imported component in that cell?
I have done it in my newest video here: th-cam.com/video/w-aitQBsINc/w-d-xo.html
Whats are the advantages over Headerless Table, if there are any?
Good question. I haven't used Headless Table in depth, but at a first glance, they are pretty similar. I chose TanStack Table as it has been around for many years (previously as React Table) and because of that, has some maturity.
"I downloaded the project files from your GitHub repository and tried to run it locally by opening the folder in Visual Studio Code and running npm install, but I encountered an error:
npm ERR! While resolving: sveltekit-sqlite-music-app@0.0.1
npm ERR! Found: svelte@4.0.5
npm ERR! node_modules/svelte
npm ERR! dev svelte@"^4.0.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.49.0" from @tanstack/svelte-table@8.9.4
npm ERR! node_modules/@tanstack/svelte-table
npm ERR! dev @tanstack/svelte-table@"^8.9.4" from the root project
It seems that @tanstack/svelte-table is not compatible with Svelte 4.0.5 and requires version 3.49.0. Do I need to downgrade the project version to 3.49.0?"
I hope this helps clarify your question.
Oh weird. Yarn does output a warning but as everything worked just finde I ignored them. But yeah npm straight up refuses to install it.
What you can do is checkout the tag I linked to in the video description. This used an older version of svelte and does not have this error.