search

huntabyte / shadcn-svelte

shadcn/ui, but for Svelte. ✨
https://next.shadcn-svelte.com
MIT License
5.56k stars 341 forks source link

feature: Data Table #43

Closed huntabyte closed 1 year ago

huntabyte commented 1 year ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

The original project uses Tanstack Table, which also has a Svelte version, so the intent is to integrate that with the existing Table component to create a DataTable.

After looking into the TanStack table docs and really putting thought into this, I don't want to build on a project where Svelte is not a top priority, but rather an afterthought.

There are a few solid data table libraries out there right now, and I'll list them here once I confirm whether they are a true candidate or not.

If you have any that come to mind, we're completely open at the moment, so let's discuss.

flowluap commented 1 year ago

Could you please checkout https://github.com/Kage0x3B/svelte-advanced-datatable. We use this in production and could imagine to use this in shadcn-svelte. What is your opinion @huntabyte ?

huntabyte commented 1 year ago

Could you please checkout https://github.com/Kage0x3B/svelte-advanced-datatable. We use this in production and could imagine to use this in shadcn-svelte. What is your opinion @huntabyte ?

Wow, this looks really good! I will play around with it a bit this week but it certainly seems like a good candidate.

flowluap commented 1 year ago

@Kage0x3B maybe we can do a pr? Checkout this video: https://www.youtube.com/watch?v=bfbam0Zf4p0&ab_channel=Huntabyte

dionysiusmarquis commented 1 year ago

This might also fit, i guess: https://github.com/bryanmylee/svelte-headless-table

huntabyte commented 1 year ago

I'm finally back from a work trip and have some time on my hands this weekend to work through the Data Table implementation.

Similar to the original, the goal is to create a step-by-step / walk-through implementation guide of a datatable using the existing Table components. It's rare that two datatables are the same, and trying to create some universal component that makes sense to everyone isn't practical. If you want to create a component from the implementation guide yourself, you're more than welcome to, but it won't be distributed via the CLI (beyond maybe just the example implementation).

I'm going to start with an implementation of bryanmylee/svelte-headless-table, and if time permits, I'll also try to build the same with vincjo/datables. Both of which have solid TypeScript support (which is non-negotiable).

While we'll have a step-by-step implementation guide which will be great for getting people started, it can't possibly cover all use-cases, so rock solid documentation of the datatables library itself is a must.

@flowluap - if/when the documentation for Kage0x3B/svelte-advanced-datatable is more complete we can look at a guide for that as well.

Of course, developers are free to choose whatever datatable library they wish, which is a great benefit of handling it in this way.

flowluap commented 1 year ago

I'm finally back from a work trip and have some time on my hands this weekend to work through the Data Table implementation.

Similar to the original, the goal is to create a step-by-step / walk-through implementation guide of a datatable using the existing Table components. It's rare that two datatables are the same, and trying to create some universal component that makes sense to everyone isn't practical. If you want to create a component from the implementation guide yourself, you're more than welcome to, but it won't be distributed via the CLI (beyond maybe just the example implementation).

I'm going to start with an implementation of bryanmylee/svelte-headless-table, and if time permits, I'll also try to build the same with vincjo/datables. Both of which have solid TypeScript support (which is non-negotiable).

While we'll have a step-by-step implementation guide which will be great for getting people started, it can't possibly cover all use-cases, so rock solid documentation of the datatables library itself is a must.

@flowluap - if/when the documentation for Kage0x3B/svelte-advanced-datatable is more complete we can look at a guide for that as well.

Of course, developers are free to choose whatever datatable library they wish, which is a great benefit of handling it in this way.

Thank you for the extensive feedback!

huntabyte commented 1 year ago

Little update: So far bryanmylee/svelte-headless-table has been a joy to work with and I'm nearing completion with an initial implementation.

If you want to see where I'm at right now, here's a demo/preview link.

huntabyte commented 1 year ago

The data table preview is up and functional! Will be working through the guide in the coming days to get this closed out.

theetherGit commented 1 year ago

@huntabyte it's working great i'm using it one of my project. As you mentioned you are working on docs that's all we need. Thank you

niemyjski commented 11 months ago

@huntabyte I'm curious why tanstack table wasn't used considering it's typescript and used in the original shadcn project. https://ui.shadcn.com/docs/components/data-table Would be nice to have a component with a layout much like the table component so it feels more idiomatic.