Is there a way to define row data in react-table?

Question

I've been tasked to build a table that will compare the results of two objects:

[
  {
      id: 1,
      source:{
         name: 'foo',
         type: 'bar',
      },
      match:{
         name: 'foo',
         type: 'baz',
         description: 'some desc'
      }
   },
  {
      id: 2,
      source:{
         name: 'bar',
         type: 'baz',
      },
      match:{
         name: 'foo',
         type: 'bar',
         description: 'another desc'
      }
   },
]

I would like to generate a table with columns source, match. Then, with useGroupBy, group the rows by the object id. However, I need the data to display in rows, using both object's keys: id, name, type, description:

End result would look like this table

Is this possible in react-table or should I attempt a different implementation? Just need a pointer, I know this is a very open ended question.

Answer 1

等待大神答复