Question about rendering subrows

[rdaud]

Hey, everyone!

Current situation:
I have an array of data objects called Campaign that feeds my table. Each of these data objects have a nested array called "criativos" that should render subrows out of it.

My problem:
I can't seem to find a way to pick "criativos" array and render subrows out of its data objects.
Below is an example of the data object I'll be fetching from the server:

const Campaign = [
{
id: 000242432343,
nome: 'Heineken 2022',
cliente: 'Heineken',
produto: 'Institucional',
status: 'Finalizada',
veiculacao: {
inicio: '2021/12/01',
fim: '2021/12/24'
},
criativos: [{
id: '23432434',
nome: 'Heineken 2022',
cliente: 'Heineken',
produto: 'Institucional',
status: 'Finalizada',
},
{
id: '000112432',
nome: 'Heineken 2024',
cliente: 'Heineken',
produto: 'Institucional',
status: 'Finalizada',
}]
}
]

Thanks a lot in advance 😁

[pmarxbraun]

@rdaud have you found the solution ? I'm struggling as well on this (V8). Thanks

[rdaud]

Hey @pmarxbraun, yes I found the solution. It's quite simple actually.

Inside the hook that you use to initiate the Table component you should add a property called "getSubRows" and pass a callback function that returns the desired property name of the row that you want to turn into a subrow.

I pasted below the code I used on my table. You can simply and copy and paste this function, only substituting "criativos" by your desired property name.

const tableInstance = useTable({ getSubRows: React.useCallback( row => row.criativos || [] ) })