[v8] Expanding rows. How to render custom component that spans all columns?

[dcworldwide]

Hi,

I have followed the row expanding example.

When expanded, It allows me to render a custom component within a single cell.

When expanded, how can I render a custom component that spans all columns of a row?

Note: in my case, subrows contains a single child object... not an array. So i'm wrapping the child in an array

getSubRows: row => {

        let subRows = expandKey && row?.[expandKey as string]

        if (!subRows) {
            return []
        } else if (subRows instanceof Array) {
            return subRows
        } else {
            return [row?.[expandKey as string]]
        }
    },

[writes-of-spring]

I found subrows more geared towards when the expanded rows followed the same shape as the parent,

so rather than using row.getToggleExpandedHandler() I used row.toggleExpanded() which means you don't have to fake a sub row for the toggle to work as expected.

Then I would conditionally display a table row with one cell that's col width is colSpan={props.table.getAllLeafColumns().length}

[dcworldwide]

Thanks Peter, with your feedback. I have the following working

const renderRow = (row: Row<T>) => {

        const renderedRow = <StyledTableRow key={row.id}>
            {row.getVisibleCells().map(cell => {
                return (
                    <StyledTableCell
                        key={cell.id}
                        width={cell.column.getSize()}>
                        {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext()
                        )}
                    </StyledTableCell>
                )
            })}
        </StyledTableRow>

        if (row.getIsExpanded()) {
            return <>
                {renderedRow}
                <StyledTableRow key={row.id}>
                    <StyledTableCell colSpan={table.getAllLeafColumns().length}>
                        <SubComponent {...{ row }} />
                    </StyledTableCell>
                </StyledTableRow>
            </>
        } else {
            return renderedRow
        }
    }
    

Where SubComponent is passed in as a prop 

[nelsonmandeladev]

@dcworldwide This also works for me; thanks for the work done guys. It saves my day