T
TanStack•2y ago
rising-crimson

How to render dynamic columns based upon the data

I have data like this 
[
  {
    "name": "jhon doe",
    "age": 23
  },
  {
    "name": "Riana",
    "hobby": "football"
  }
]
[
  {
    "name": "jhon doe",
    "age": 23
  },
  {
    "name": "Riana",
    "hobby": "football"
  }
]
And I want the result as follows ["name", "age", "hobby"] ["jhon doe", 23, ""] ["Riana", , "football"]
2 Replies
foreign-sapphire
foreign-sapphire•2y ago
I would say: 1. Traverse your data and push all the keys in a Set so they are unique 2. Convert the set to an Array, map() on it to build the columnHelpers 3. Use the TanStack Table as usual
optimistic-gold
optimistic-gold•2y ago
Does anyone make this with in Next.js? I have the same problem but columns is a client component so I can't fetch data in my serve and later join the columns I am using shadcn https://ui.shadcn.com/docs/components/data-table
Data Table
Powerful table and datagrids built using TanStack Table.

Did you find this page helpful?