Using associative arrays to populate an ant design table in react

  antd, javascript, json, reactjs

I am working on a music program and I want to have the data to be stored by genre, then albums.

So I would have something like:

{"jazz":[{"album":"Album 1", "artist":"wes montgomery", "year":"1960"},...,{...}],

So as I loop through the associative array (genres) I will put them as the first row in the table. I believe I can do that by having it be the first column and then have the column span, and for the array under each genre hide the first row.

But I am not certain how to set up the column definitions as I have just been displaying the album information and ignoring the genre.

Is it possible to have one table where the data source is an associative array?

Source: Ask Javascript Questions