I am using the Material-UI framework for React to display a table. I would like to use a sticky header; however, I do not want to set a height on my table, as I’d like it to scroll with the page. The following snippet does not stick the header unless I set a height on the TableContainer.
https://codesandbox.io/s/winter-firefly-5wlx2?file=/src/App.js
import React from "react"; import { TableContainer, Table, TableHead, TableRow, TableCell } from "@material-ui/core"; import "./styles.css"; export default function App() { return ( <TableContainer> <Table stickyHeader> <TableHead> <TableRow> <TableCell>Value</TableCell> </TableRow> </TableHead> { Array(100).fill("Test").map((e) => <TableRow><TableCell>{e}</TableCell></TableRow>) } </Table> </TableContainer> ); }
Advertisement
Answer
Get rid of the TableContainer
overflow-x: auto
and it should work
const useStyles = makeStyles({ customTableContainer: { overflowX: "initial" } }) export default function App() { const classes = useStyles(); return ( <TableContainer classes={{root: classes.customTableContainer}}> <Table stickyHeader> ...
Reference: https://css-tricks.com/dealing-with-overflow-and-position-sticky/