Integration: Data Tables

[endigo9740]

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]

TanStack's Svelte Adapter for runes looks ready to go TanStack/table#5403

[endigo9740]

@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]

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]

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]

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]

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]

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]

@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]

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]

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]

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]

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

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

[kmalloy24]

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]

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

[endigo9740]

@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]

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

[endigo9740]

Kapture.2024-12-03.at.16.12.20.mp4

Just FYI everyone, here's a quick sneak peak at what I've been working on this week. This for the upcoming Data Table integration guide, which will see our Tailwind-based table styles paired with Tanstack Tables for the functionality:

https://tanstack.com/table/latest

Tackstack is great because it's both highly feature rich and also cross-framework! Meaning we can provide a full guide for both React and Svelte users. Currently the guide will show you how to build a reusable <DataTable> component, with the goal of building an "MVP" (minimum viable product) of the component, including the following features:

• Generating the base table
• Search
• Sort
• Pagination

Over time though, I'd like to expand this to include both client and server-side implementations. Which is not a simple ask.

As you can see, client-side search is already working, and I think sort will come soon as well. However, this may require some adjustments to both our built-in Tailwind styles AND the Pagination component to ensure everything plays well together. As we want this to be fully featured.

Given the complexity of this, we may not have every feature implemented prior to the upcoming Release Candidate, but I wanted to at least showcase that progress is being made on this.

[endigo9740]

Realistically between the upcoming RC release and holiday break, I'm just not going to have the bandwidth to finalize this before launch. As such, I will go ahead and bump this to the post-launch milestones. I will, however, aim to get this added asap once we reach that point though.