Integration: Data Tables

endigo9740 commented 10 months ago

[!WARNING] This issue is a work in progress.

This will act as a hub to centralize this information.

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

[!NOTE] We're aiming to retire the dedicated Table component in Skeleton v3 in favor of styled native HTML tables via the Tailwind Components (aka "Element"). This will help reduce common issues as listed below. As well as provide better integration of third party data table solutions:

React: https://tanstack.com/table/latest
Svelte: https://github.com/vincjo/datatables

Bugs and Known Issues

Does not integrate with third party data table libraries
Does not allow for components to be inserted into table cells
Is difficult to style due to the structure
The table data utilities are more confusing than helpful

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

kmalloy24 commented 4 months ago

TanStack's Svelte Adapter for runes looks ready to go https://github.com/TanStack/table/pull/5403

endigo9740 commented 4 months ago

@kmalloy24 I actually did review the Tanstack Tables for Svelte at least a year or so ago. The docs were in a really rough shape at the time. Links that went to empty pages, etc. As long as that's improved I'd be open to exploring this. Looks like they provide support for all major frameworks though, so I'm down. I'd say maybe start with an audit before committing to the guide though.

Also note I have no solid plans for the Paginator component yet. It's hard to avoid building these in an opinionated manner. Which can be troublesome when there's no single standard for pagination structure and functionality. Plus you need to support both local client-side and remote server-side pagination options. We might lean into the options provided by the library we opt for. So maybe keep that in mind as you explore.

kmalloy24 commented 4 months ago

I only looked briefly, but they seem fairly fleshed out now. It's mostly the same as the core docs, but with some Svelte specific stuff for handling state. Once they push the runes update I'll see if I can get an example working.

Pagination is tricky...good point. I ran into an issue when trying to use the old guide to paginate data from Supabase and ended up just using range from postgres through their API and linking it up to some buttons.

endigo9740 commented 4 months ago

Awesome, and yeah we'll definitely need Svelte 5 support. v3 is going all in on that.

As for pagination, just let us know if you think it makes sense to add a component or not. We've been moving v2 features to proposed Cookbook recipes. Basically teach folks how to build it rather than building it for them. That gives them to flexibility to adjust per their use cases. So we have options.

kmalloy24 commented 4 months ago

I like that, especially since a framework agnostic solution wouldn't be that useful to most folks wanting to take advantage of ways to work with framework specific features like the page store in sveltekit or something. Will keep you posted 👍

eft commented 2 months ago

Looking for a more generic way to integrate DataTables, is this a legit approach to populating the table headers with key names from the source data:

<thead>
  <tr>
    {#each Object.keys($rows[0]).slice(0,) as heading}
      <ThSort {handler} orderBy="{heading}">{heading}</ThSort>
    {/each}
  </tr>
  <tr>
    {#each Object.keys($rows[0]).slice(0,) as heading}
      <ThFilter {handler} filterBy="{heading}" />
    {/each}
  </tr>
</thead>

endigo9740 commented 2 months ago

Hey @eft so this thread is in regards to creating a new official data tables integration guide for Skeleton v3. We also may move to a more framework agnostic option as suggested here. The Tanstack option might be worth a peek if you want to stay ahead of the curve.

If this is in regards to v2.x, then what you provided seems like a great way to handle dynamic headers. If you need a more robust data table solution, we offer this guide authored by community contributor Kyle from above.

I'd ask that you reserve v2.x discussion though, as that would be off topic. Feel free to create a GitHub Discussions thread or reach out on Discord instead please.

eft commented 2 months ago

@endigo9740 thank you for clarifying - I hadn't realized you were considering another data tables solution so I apologize for posting in this issue thread.

walker-tx commented 2 months ago

Hey guys, author of the TanStack/Table adapter for Svelte 5 here.

It's set to release for v9 of Tanstack/Table, and it's actually broken right now. I'll be working this week on getting things working again, but its prod release will be blocked by Table's v9 release. I was very intentional about adding more clarity to the new adapters docks (I felt the pain of the old docs), so it's important to me that they're done well here, too.

Happy to help in anyway I can. Cheers.

endigo9740 commented 2 months ago

Hey @walker-tx thanks for dropping by and I appreciate the update. That's great to know. I don't think we'll start our guide for a few more weeks, we've got a few irons in the fire, but will take this into account. Maybe we can check in once we reach that point.

Side note - I noticed your in Fort Worth. I'm in Dallas. Nice to come across a fellow Svelte community member in DFW! 👋

walker-tx commented 2 months ago

Hey @walker-tx thanks for dropping by and I appreciate the update. That's great to know. I don't think we'll start our guide for a few more weeks, we've got a few irons in the fire, but will take this into account. Maybe we can check in once we reach that point.

Side note - I noticed your in Fort Worth. I'm in Dallas. Nice to come across a fellow Svelte community member in DFW! 👋

Oh that's what's up! I just shot you an invite on Discord - would love to chat with you if you don't mind.

endigo9740 commented 1 month ago

Here's a great reference provided by @walker-tx

https://svelte5-and-tanstack-table-v8.vercel.app/

kmalloy24 commented 1 month ago

Here's a great reference provided by @walker-tx

svelte5-and-tanstack-table-v8.vercel.app

@walker-tx This is excellent! Super easy to reproduce from the documentation, and then just drop in Skeleton's Tailwind classes.

I'll circle back to this when I have more time and see what I can bring in from the v2 guide.

walker-tx commented 1 month ago

Thank you @kmalloy24! It's great to know that this has been a helpful resource!

endigo9740 commented 3 days ago

@kmalloy24 with our automated documentation and Svelte component test cases added, the next order of business will be our Cookbook and Integration guides. I'm going to start with the former tomorrow. Which means the Datatables and Code Block integration guides will follow shortly. Let me know if you have anything prepped for this, otherwise I'll go ahead and take over ownership of this one.

@walker-tx I haven't forgot about you! I'll ping you on Discord if I run into any issues with the Tanstack tables. But again, there's a few smaller guides incoming before this. So it may be late this week or sometime next week.

You guys can feel free to monitor this ticket. When a PR is generated it should notify you. You're welcome to preview and provided feedback as this develops. And I'll definitely appreciate a PR review when the final guide is!

kmalloy24 commented 3 days ago

@endigo9740 Sorry, I haven't been able to find the time. So do your thing, I'm excited to see this soon!

skeletonlabs / skeleton