Rendering columns dynamically

Question

I receive JSON(that has products/categories related information) from a Rest API call, on my ReactJS page. I render this information on ag-grid.

Categories are showed horizontally and against each category, products are shown in the columns.

---------|-----  |----------|------------
         Product1| Product2 | Product3
---------|-------------------------------
Category1|abc1   | abc2     | abc3
-----------------------------------------
Category2|xyz1   | xyz2     | xyz3
-----------------------------------------

The JSON can have any number of categories/products. I need to able to render the rows/columns dynamically based on this info. Not sure how to go about this?

Products could be maximum five in number. Shall I define header definitions of these five products in my reactJS page and then dynamically set the hidden property to true or false, depending upon which product is present in JSON?

[{
    headerName: "Product1",
    resizable: true,
    wrapText: true,
    cellStyle: {
        'white-space': 'normal'
    },
    autoHeight: true,
    hide: true
},
{
    headerName: "Product2",
    resizable: true,
    wrapText: true,
    cellStyle: {
        'white-space': 'normal'
    },
    autoHeight: true,
    hide: false
}]

JSON: Example1:

"raw_message":
[
{
"category": "category1"
[
{
    "product": "Product1"
},
{
    "product": "Product2"
},
]

}

]

Example2:

"raw_message":
[
{
"category": "category1"
[
{
    "product": "Product1"
},
{
    "product": "Product2"
},
{
    "product": "Product3"
},
]

}

]

Can you share your json format for products and cargories related info. — Mahi, Sep 16 '21 at 06:37
Are you sure the json format is correct and this is the data you are getting? — Mahi, Sep 16 '21 at 17:01

score 0 · Answer 1 · answered Sep 21 '21 at 00:50

0

Thanks for your help. I managed to resolve the issue by using ag-grid's onRowDataChanged eventhandler and columnAPi's SetColumnVisible property.

answered Sep 21 '21 at 00:50

newbie2000

73
1
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 21 '21 at 07:13

Rendering columns dynamically

1 Answers1