CODEWITHSUNDEEP
reactjsmaterial-ui
KDM
KDM

Reputation: 13

How can i nest TableRows in TableRowColumn in material ui version 0.20.0 (version is important)?

I have a table in material ui, that has to have two rows in one table row column, it looks like this:

<Table>
    <TableHeader>
        ...Some header
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowColumn>
                <TableRow>            <-------- here is the main issue
                    <TableRowColumn>
                    </TableRowColumn>
                </TableRow>
                <TableRow>
                    <TableRowColumn>
                    </TableRowColumn>
                </TableRow>
            </TableRowColumn>
        </TableRow>
    </TableBody>
</Table>

To be able to place the second row in table i have to use TableRow in TableRowColumn but i get a bunch of error due to that:

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <td>.
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.
Warning: Unknown event handler property `onHoverExit`. It will be ignored.
Warning: Unknown event handler property `onHover`. It will be ignored.
Warning: Received `false` for a non-boolean attribute `hoverable`.
Warning: React does not recognize the `columnNumber` prop on a DOM element.

(different errors in console, not one)

i suppose it is because TableRowColumn is the child of TableRow and writing them in different order just prevents receiving necessary props.

if that is the case, how can i place two rows in one column specifically for material ui version 0.20.0?

Upvotes: 0

Views: 911

Answers (1)

KDM
KDM

Reputation: 13

After all i got the issue solved, material ui version 0 does not have the TableCell component (availbale only in later versions), which could have solved the issue. For that specific version to get rid of the errors, the native html tags need to be used:

<Table>
    <TableHeader>
        ...Some header
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowColumn>
                <table>
                    <tbody>
                        <tr><td>Content</td></tr>
                        <tr><td>Content</td></tr>
                    </tbody>
                </table>
            </TableRowColumn>
        </TableRow>
    </TableBody>
</Table>

In that case it is possible to fit multiple rows in one row.

Upvotes: 1

Related Questions