Вертикальная таблица в Material-UI - PullRequest
Новая
       20

Вертикальная таблица в Material-UI

0 голосов
/ 03 августа 2020

Под вертикальной таблицей я подразумеваю, что первый столбец каждой строки является заголовком. Примерно так: 

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

Проблема в том, что для рендеринга <TableCell /> как <th /> нам нужно обернуть его внутрь <TableHead />, иначе он будет рендерингом <td />. Но <TableHead /> также не может быть помещено в <TableRow />, так как оно отображается как <thead />. Таким образом, следующий код не будет работать: 

<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>

Тогда как я могу достичь первого примера с помощью Material-UI?

1 Ответ

0 голосов
/ 03 августа 2020

Ох, забудь.

Мне не очень хочется видеть свойство variant в документации . Все, что вам нужно сделать, это установить свойство variant для <TableCell /> на 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>
...