feat: Lit integration

[kadoshms]

Hey there,

This PR comes along with those two:

1. https://github.com/TanStack/virtual/pull/718 (Virtual)
2. https://github.com/TanStack/ranger/pull/91 (Ranger)

And hopefully for the rest of the stack :)

Anyway, Iv'e set up the scaffolds for creating and integration for Lit, currently with a basic + sorting examples. I'll add more examples later.

The core idea is using a Reactive Controller to create a reactive Table instance.

Examples Added

1. Basic
2. Row Sorting
3. Row Filtering
4. Row selection

[KevinVandy]

Wow, I was actually getting ready to reach out after seeing the other lit TanStack PRs. I'm focused on getting Angular Table shipped in the next couple days first, but then will focus on this PR. That PR or the qwik one might be a good guide for this one to follow to make sure we don't forget anything.

[kadoshms]

Aweseome @KevinVandy, I also added a filters & selection examples 👍

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 603b25d02bf2cae82c15cd861a75b5eb730ba359. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:lib,test:types,build --parallel=3

---

Sent with 💌 from NxCloud.

[KevinVandy]

@kadoshms I spent some time this weekend merging in all the new angular table changes from main, then setting up what I think are all of the correct build configs. And then created the docs templates for what will be needed. The adapter and table-state docs pages need to be filled-in and rewritten by someone who actually knows Lit, so help on that would be appreciated.

[kadoshms]

Great, so I'll use the Angular template as a base for Lit docs and add those to the MR.

[KevinVandy]

Great, so I'll use the Angular template as a base for Lit docs and add those to the MR.

I already committed the files. Copied them over from the qwik table docs and did a search and replace for Lit. But yeah, if we're able to be as detailed as the 2 new angular docs pages, that'd be great.

[KevinVandy]

@kadoshms How do we get the styles/css to work in these Lit examples?

I wrote the Lit adapter docs and think that they are good. I'm not all the way clear on Lit state vs properties and our best state recommendations, but can work on the lit table-state docs a bit later.

Otherwise, this might be surprising close to shipping already. Let me know if you're able to continue to help this week.

[kadoshms]

@KevinVandy - I'll set up the styles (just need to tweak the examples a bit to work properly with the shadow DOM). As regarding for state - I'll make sure it's all properly documented and working as expected (was AFK the last couple of days)

[kadoshms]

@KevinVandy I updated the docs and added some styling to basic example using twind :)

[KevinVandy]

@kadoshms Great, now I see the basic styles working that are coded in those style tags down below.

Would you be able to add any discussion between getTable and useLitTable and the naming conventions expected in Lit? Just want to make sure the current state of this PR is sure of what it should be.

Considering merging tomorrow, though, we can always use more examples - now or later

I opened a tanstack.com pr in tandem: https://github.com/TanStack/tanstack.com/pull/230

[kadoshms]

@KevinVandy I am not sure there is enough out there to come up with a convention, but thinking of the almost vanilla nature of lit, maybe something like getTableInstance or getTableInstanceWithOptions would be even more appropriate, as ultimately this function does that - creates the instance if not exist, updates the options and returns it.

WDYT?

[kadoshms]

Added another example for Column Resizing. Any other example that you think I should add at this phase?

[KevinVandy]

Lol. We don't need to get too complicated with the name. If anything, might I suggest LitTableController.createTable.

I just had not seen "use" anywhere else in lit docs, and just wanted to make sure.

What does TanStack Lit Form do?

It appears that form would suggest TanStackTableController.something

[kadoshms]

Naming is always fun 😄 Actually I liked this pattern, changed that to TableController.table it's actually kind of neat.

[WickyNilliams]

hey, this is cool! curious if it was based on my code here? it looks the same, except for some things shuffled around :) https://codesandbox.io/p/sandbox/dry-fog-42qisy?file=%252Fsrc%252FTableController.ts

[kadoshms]

@WickyNilliams no actually, but good to hear more people are lit by Lit 😉

[WickyNilliams]

I was just curious. Convergent evolution at work!

Happy to see this land. I had planned on contributing myself, but never got around to it. So I'm glad you did, it looks great. Thanks!