Пользовательский интерфейс материала: задайте TableBody максимальную высоту и сделайте его вертикально прокручиваемым
Используя Material UI, я хочу, чтобы TableBody моего Table имел максимальную высоту 500 пикселей. Если есть какие-либо строки, которые не помещаются в пределах высоты TableBody, тогда TableBody должен вертикально прокручиваться, пока TableHead фиксируется на месте (замораживается).
Вот мой код:
import React from "react";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
const data = ["1", "1","1","1","1","1","1","1","1","1","1","1","1","1"];
class Demo extends React.Component {
render() {
return (
<div>
<Table>
<TableHead>
<TableRow style = {{ 'backgroundColor': '#f5f5f5', "height": '35px' }}>
<TableCell>Column 1</TableCell>
<TableCell>Column 2</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key = {n}>
<TableCell>{n}</TableCell>
<TableCell>{n}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
);
}
}
export default Demo;
Рабочий пример: https://codesandbox.io/s/y03vmkkkqj
Как это можно сделать в пользовательском интерфейсе материала?
Пожалуйста, ответьте на мой пример и предоставьте ссылку на рабочее решение.
Ответы 3
Я сделал таблицу прокручиваемой, установив max-height для ее родительского div, но для фиксированного заголовка таблицы это зависит от ваших столбцов, а стиль имеет проблемы с material-ui, я больше не проверял, но вы можете дополнительно изучить это здесь :
Фиксированные заголовки: https://codepen.io/tjvantoll/pen/JEKIu, http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm
CodeSandBox: https://codesandbox.io/s/x92qwnko
Пришлось вытащить головку стола из основного стола, чтобы тело могло прокручиваться, но вот что я в итоге сделал. Некоторый CSS был необходим, чтобы сделать тело прокручиваемым.
https://codesandbox.io/s/8kw39m1278
Вы можете использовать опору stickyHeader в компоненте Table и передать maxHeight в TableContainer.
<TableContainer style = {{ maxHeight: 150 }}>
<Table stickyHeader>
<TableHead>
<TableRow style = {{ 'backgroundColor': '#f5f5f5', "height": '35px' }}>
<TableCell>Column 1</TableCell>
<TableCell>Column 2</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key = {n}>
<TableCell>{n}</TableCell>
<TableCell>{n}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
Вот официальный демонстрация из документации material-ui.
Почти готово, Стивен. Можете ли вы убедиться, что все столбцы выровнены по левому краю с заголовками столбцов? Второй столбец в вашем ответе оправдан правильно. Это лучше демонстрирует проблему: codeandbox.io/s/ly8vvm5o19