Vertical Table in Material-UI

Question

By vertical table, I mean the first column of each row is a header. Like this:

<table>
    <tr>
        <th>Header 1</th>
        <td>Cell 1</td>
    </tr>
    <tr>
        <th>Header 2</th>
        <td>Cell 2</td>
    </tr>
</table>

The problem is, to render the <TableCell /> to be a <th /> we need to wrap it inside <TableHead />, otherwise it will render to <td />. But <TableHead /> also cannot be placed inside <TableRow /> since it renders to <thead />. So the following code won't work:

<Table>
    <TableRow>
        <TableHead>
            <TableCell>Header 1</TableCell>
        </TableHead>
        <TableCell>Cell 1</TableCell>
    </TableRow>
    <TableRow>
        <TableHead>
            <TableCell>Header 1</TableCell>
        </TableHead>
        <TableCell>Cell 2</TableCell>
    </TableRow>
</Table>

Then, how can I achieve the first example using Material-UI?

Answer 1

Ohh, Nevermind.

I am not keen enough to see the variant property in the documentation. All you need to do is set the variant property of <TableCell /> to head.

<Table>
    <TableRow>
        <TableCell variant="head">Header 1</TableCell>
        <TableCell>Cell 1</TableCell>
    </TableRow>
    <TableRow>
        <TableCell variant="head">Header 1</TableCell>
        <TableCell>Cell 2</TableCell>
    </TableRow>
</Table>