How to have a custom wrapper for every n amount of rows?

[mauriciosoares]

So consider that I have a flat array of items, like event tickets, and some of these items shares a common event id, like this:

[{
  id: 1,
  ticket: 'ticket-1',
  eventId: 1
}, {
  id: 2,
  ticket: 'ticket-2',
  eventId: 1
}, {
  id: 3,
  ticket: 'ticket-3',
  eventId: 2
}]

I'd like to be able to render these tickets in a single table, but have a custom wrapper around the tickets that shares the same event ID, so users can easily see what are the tickets for a specific event. So even though the table would still render tickets, in the payload above, I'd have a wrapper around ticket 1 and 2, because both of them belongs to event 1, and ticket 3 would have it's own wrapper ,because it belongs to event 2. Here's a basic sketch of what it would look like

Any suggestions on how I could accomplish that? I tried looking up for examples on the docs, but wasn't able to find anything. Btw I don't necessarily need to use table tags.

I'm also fine if I can't really wrap them inside a div, I could render on the same flat row structure one row that's customized specifically for this event, and right after the actual rows, something like:

<div>Event 1</div>
<div>ticket 1</div>
<div>ticket 2</div>
<div>Event 2</div>
<div>ticket 3</div>

[mauriciosoares]

Answering my own question, I was able to solve that by identifying if the row has subrows, and rendering a different component instead of rendering the actual row component. I also used some css tricks to add borders around each row to make it look like they're inside a "card" even though it's a flat list.