Array of Object datasource pick column headers automatically

Tags: #<Tag:0x00007efc71a93ef8> #<Tag:0x00007efc71a93cf0>

I have array of object as datasource I want handsontable to pick key of object as headers. It is showing A,B, C as headers. I cant give headers using colHeader prop because keys will keep changing as data is coming from custom query which user will write on frontend. so I wont be able to know which columns he has selected and which columns came in response data.

right now I am picking first element of array and then getting all the keys of that object and assigning col headers to it… but is there a cleaner method?

 colHeaders={
      queryTableData.length > 0 ? Object.keys(queryTableData[0]) : true
    }

Hi @jamshaidbutt055

Your solution looks sufficient in this case. We don’t have any guides for this kind of implementation as it requires a custom solution like yours.

1 Like