How do I set columns of a table dynamically?

So, I am trying to create a page where there is a table that represents some data.

This data is derived using an API call. The response of this call has a key called params, a list of parameters we want to display in the table. The data of the table has exactly the keys mentioned in params. I want to make the table such that the table's columns are made dynamically using the params key in the response and then the data is populated into it. Can you please help me?

@Aditya_Asthana Welcome to the forum!
Can you share some more details about the data and some screenshots?

@ScottR Thanks for the response.

The params response looks like this, a list of column names

{
  "params": [
    "id",
    "doc_id",
    "tags",
    "dataset_id"
  ]
}

and this is what the data looks like:

{
  "data": [
    {
      "id": "0",
      "doc_id": "7202c582-5134-11ee-be56-0242ac120002",
      "tags": "geo",
      "dataset_id": "GSE12841_GPL15881"
    },
    {
      "id": "2",
      "doc_id": "914d6bd6-5134-11ee-be56-0242ac120002",
      "tags": "bulk",
      "dataset_id": "GSE81275_GPL88581"
    }
  ]
}

This data contains all the keys defined in params list.
I want to create the table columns dynamically based on the keys listed in params and then populate the data in the table

Please let me know if there's any other information required.

I think you should simply be able to use the data for the table as the Data source so long as the params and the keys match up as they seem to do in your example.
I used the following so you may need to transform the data to have it populate into table:

[
    {
      "id": "0",
      "doc_id": "7202c582-5134-11ee-be56-0242ac120002",
      "tags": "geo",
      "dataset_id": "GSE12841_GPL15881"
    },
    {
      "id": "2",
      "doc_id": "914d6bd6-5134-11ee-be56-0242ac120002",
      "tags": "bulk",
      "dataset_id": "GSE81275_GPL88581"
    }
  ]

1 Like