Is there a way to make this type of table with react-table?

[sbtly]

I want to merge two table that have different columns into one table, sort by one same column.

For example, I have Dogs and Cats data like below.
Both have born_date, born_place, type columns, but rest of the columns are different.

const Dogs = [
  {
    born_date: "2019-02-03",
    born_place: "Earth",
    type: "Dog",
    dog-column-1: "11",
    dog-column-2: "22",
    dog-column-3: "33",
    ...
  }
  , ...
]

const Cats = [
  {
    born_date: "2019-03-01",
    born_place: "Moon",
    type: "Cat",
    cat-column-1: "aa",
    cat-column-2: "bb",
    cat-column-3: "cc",
    cat-column-4: "cc",
    ...
  }
  , ...
]

I want to join these two data, sort by born_date, and insert column headers in between rows where Dog and Cat shows up next.

I want the table UI to be like this pic below.

I've searched everywhere, but I just can't find a table like this one.

Is there a way to make this table with react-table?

I know that is not an ideal UI of table, but I really need to do it because I have data sets that have hundreds of different columns. I can't just merge them with null cells, because it'll then have massive horizontal scroll and that's not really readable.