row inside a cell

Question

I have the following simple code that generates the location of various records in a table.

 return (
        <TableRow>

            <TableCell >
                // some code_1
            </TableCell>
                
            <TableCell >
                // some code_2
            </TableCell>

            <TableCell>
                <TableRow>  // here I get warning
                    <TableCell>
                        // some code_3
                    </TableCell>
                </TableRow>

                <TableRow>
                    <TableCell >
                        // some code_4
                    </TableCell>
                </TableRow>

                <TableRow>
                    <TableCell >
                        // some code_5
                    </TableCell>
                </TableRow>
            </TableCell>
               
            <TableCell 
                // some code_6
            </TableCell>

        </TableRow >
    );

And as you can guess, when I add more components to the TableCell (in my case I add TableRow ), I get a warning:

Warning: validateDOMNesting(...): tr cannot appear as a child of td.

Tell me how to save this table structure, get rid of warnings

Answer 1

Copied from my comment above:

You can put table rows inside your cells but not directly. They need to be wrapped in their own seperate inner table element. In the rendered html it will look something like ... > td > table > tbody > tr > td > ...

In this examble I have wrapped your table rows in tables with table body elements, but you may want to wrap the top row in a table head element, <TableHead> instead and subsequently the rest in a table body.

Table head and body may not be required so you can try to place the rows directly inside the table element.

Here is the documentation from Material UI https://mui.com/material-ui/react-table/

return (
    <TableRow>
        <TableCell>
            // some code_1
        </TableCell>
        <TableCell>
            // some code_2
        </TableCell>
        <TableCell>
            <Table>
            <TableBody>  
                <TableRow>
                    <TableCell>
                        // some code_3
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell>
                        // some code_4
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell>
                        // some code_5
                    </TableCell>
                </TableRow>
            </TableBody>
            </Table>
        </TableCell>   
        <TableCell> 
            // some code_6
        </TableCell>
    </TableRow>
);