'Is it possible to create a table on react-table using two or more datasets/constants?

Good day everyone, this is my first time posting here but I'd like some help with a recent issue.

So, I'm working on a small React app just for fun and to keep practising, in it I made a few constants for different datasets (each with varying data fields), that is, I have various kinds of records categorized in said constants, since some records use 2+ rows and some need only one row. Initially I was going to share the app's code, but the datasets are a tad... large, so reading the tips I thought I'd instead create an online sandbox to illustrate with a much simpler and smaller scenario of what I managed to do: [link to the sandbox].

However, looking around and trying different stuff I found out about react-table, which is what I needed due to its useful features and how lightweight it is. I mainly need it for filtering records but I want to try some other features as well.

All this brings me to my problem: I want to populate a table in react-table with the multiple datasets together and their own ways their data is placed on the JSX code, however, I can't figure out what to do and my app's code is getting messy in the process, so I thought I'd ask here to see what I can do, using the code in the sandbox as base, then I can edit my app accordingly if there's a solution for this, otherwise I guess I can maybe make one table for each dataset or just use good ol' HTML+JS+CSS? But neither are the results I'm aiming for.

I'm in no rush for answers since this is just a project for fun and to practise, however, any help is appreciated, thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source