I'm looking to utilize Material UI to set a maximum height of 500px for the TableBody within my Table. If there are rows that exceed this height, I want the TableBody to scroll vertically while keeping the TableHead fixed in place.
https://i.sstatic.net/TRHJB.png
Below is the code snippet:
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;
Here's a live demo: https://codesandbox.io/s/y03vmkkkqj
Can you help me achieve this functionality using Material UI? Don't forget to fork from my example and share a link to your solution.