CODEWITHSUNDEEP
javascriptreactjsreact-virtualizedreact-table
柳 Lau
柳 Lau

Reputation: 493

Dynamic rendering of a datagrid/table in React given JSON data from API

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

Answers (1)

Adnan
Adnan

Reputation: 1707

Here is the image of the table which i created.Hope you are looking for this

enter image description here

And here is the link for the project

https://github.com/AdnanShah/ReactJS-KretaHub-

Upvotes: 1

Related Questions