rising-crimson

Creating dynamic columns from API response

Hello! I have a problem that is driving me crazy and I wasn't able to find a solution in the docs. Let me explain it: An endpoint returns me an array of objects with the following shape: https://pastebin.com/hGMQ18S5 I have attached an image of what I'm trying to achieve (the styling is not a problem). As you can see, the key of the objects in the top level is used to name the first header, and then, a new column is created for every object in the array, where name is the second header and amount is the cell. Now, the real problem is that I can't hardcode any of these columns, since the API will return a different amount of objects in the arrays depending on filter, dates, etc, so I need to be able to generate these columns dynamically. Here's what I've tried so far and got ALMOST working, with the exception of the header: https://pastebin.com/vLZDyKPq As you can see, this is kind of a mess since I'm using the real object (reports), which I know will always have hours and supplements, but I don't know about their content. I'm also nos using methods like accessorFn because I don't know how to use them in this case. Any help will be greatly appreciated, thank you very much in advance!

Pastebin

```const reports = { person:{ /* irrevelevant data for the examp...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Pastebin

```const columns = [ { id: 'hours', header: 'Hours...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

5 Replies

jolly-crimson•2y ago

Have you considered changing your data shape before passing creating your ColumnDefs? Once the data is fetched, mutate each rows to get a flattened object. Then you could have a set of static columns defs. If your payslip object is expected to possibly include more keys, then you reach for making it dynamic by returning a set of accessors which can be calculated during the data flattening time. Could be flattened down to:

{
  "columns": [
    {
      "parent": "Hours",
      "accessor": "Name"
    },
    {
      "parent": "Supplements",
      "accessor": "Bonus"
    }
  ],
  "rows": [
    {
      "_person": {},
      "Name": 999,
      "Bonus": 777
    }
  ]
}

{
  "columns": [
    {
      "parent": "Hours",
      "accessor": "Name"
    },
    {
      "parent": "Supplements",
      "accessor": "Bonus"
    }
  ],
  "rows": [
    {
      "_person": {},
      "Name": 999,
      "Bonus": 777
    }
  ]
}

data.columns to build your ColumnDefs, and data.rows to be passed into the useReactTable hook.

jolly-crimson•2y ago

For the fully flattened dynamic columns version I've got a stackblitz here https://stackblitz.com/edit/github-rt31ct?file=src%2Fmain.tsx

Sean Cassiere

StackBlitz

tanstack-table-transform-data - StackBlitz

Run official live example code for Table Basic, created by Tan Stack on StackBlitz

jolly-crimson•2y ago

^ This allows for keys in the payslip object to be created into a grouping column and allows you have to any number of items within the groupings of the payslip object. Its entirely dynamic, and does not require you to know beforehand any of it. The example I've got has some extra columns which you can ignore, which I added to handle use cases where some rows could have items in the sub-items of the payslip object that are not available on the other rows.

rising-crimsonOP•2y ago

Thank you so much for your time answering and creating a working demo to showcase this. It's amazing and it works beautifully. You saved me days of smashing my head against the keyboard in frustration. Again, thank you SO SO much 😄

jolly-crimson•2y ago

No sweat. I was bored on a Saturday evening and this seemed quite interesting.

Gaming

Programming

Creating dynamic columns from API response

Did you find this page helpful?