Reputation: 493
I have this json data that is gotten from an API end point.
[{
"id": 1,
"style": "A",
"color": "black",
"size": "30",
"quantity": "122.00"
},
{
"id": 2,
"style": "B",
"color": "maroon",
"size": "24",
"quantity": "48.00"
},...]
I know I can use array.map() to loop over the data and give me a table with headers 'style','color','size', and 'quantity' with corresponding data rows below.
What I want to do is transform the rendering into this table format as it is more human-readable and a big plus would be to have the cells editable also (e.g. data ties back to state). Specifically, the sizes are in the column headers. How can I do this using either plain react/javascript logic or even better is there a popular React package that has this capability? Currently looking at react-table and react-virtualized but don't have enough experience on these packages to do something complex. Some code would be highly appreciated.
Upvotes: 1
Views: 1592
Reputation: 1707
Here is the image of the table which i created.Hope you are looking for this
And here is the link for the project
https://github.com/AdnanShah/ReactJS-KretaHub-
Upvotes: 1