docs(react-table): add TanStack Table community parsers example / documentation

[junwen-k]

Happy New Year! 🎉

First of all, I want to express my gratitude for nuqs—this library has been working wonderfully and has significantly cleaned up our codebase. As a way to give back to the community, I've added documentation specifically for TanStack Table parsers. I hope this contribution will be helpful for others who are integrating nuqs with their tables.

Summary of Changes

I've added documentation and examples for TanStack Table integrations, covering the following areas:

1. Column Filtering

• TanStack Table manages column filters via the columnFilters state, an array of objects with the shape:

  type ColumnFilter = {
    id: string
    value: unknown
  }

• Filters are stored in the URL as columnId=value, with the value serialized as JSON to support any valid JSON type.

2. Sorting

• TanStack Table handles sorting with the sorting state, an array of objects with the shape:

  type ColumnSort = {
    id: string
    desc: boolean
  }

• Sorting is represented in the URL as columnId:direction (e.g., columnId:asc or columnId:desc).

3. Kitchen Sink Example

• Demonstrates a comprehensive integration, including column filtering, sorting, and pagination, all persisted in the URL. It also showcases how the URL parameters sync with the table's internal state.

4. State Display Updates

• Updated all TanStack Table examples to display the actual table state using table.getState(), aligning it more closely with the library's expectations (previously, pagination was managed manually).

Feedback Request

• Folder Structure: I followed my best understanding of the existing structure when organizing the documentation files and example code, but I'm unsure if this aligns with the library's conventions. I would appreciate any feedback or suggestions for improvement.

• Serialization Conventions: For sorting and filtering, I’ve used conventions like columnId:direction for sorting and columnId=value for filtering. I’d love to hear your thoughts on whether these align with your vision or if there are alternative conventions you'd prefer.

---

Thank you again for maintaining such an excellent library! I hope these additions are helpful to the community. Looking forward to your feedback!

[vercel]

@junwen-k is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nuqs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 1, 2025 8:45am