How to have a custom wrapper for every n
amount of rows?
#5612
-
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 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:
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
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. |
Beta Was this translation helpful? Give feedback.
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.