I have been trying to use the material UI Table component in order to display a table. The issue I am facing is that when the content in a cell exceeds the allotted space, instead of showing ellipses (...), the text wraps within the cell. I attempted to apply CSS styles but without success. How can I achieve the desired behavior?
import React from "react";
// import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData(
"Ice cream sandwich dsdadsads dsadsadsadsa dsadasdsadsa dsadsadsa dsadsads asdsadsadsadsa",
237,
9.0,
37,
4.3
),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9)
];
export default function SimpleTable() {
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow key={row.name}>
<TableCell style={{root:{overflowX: 'hidden', textOverflow: "ellipsis"}}} className="overflow-test" component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
.overflow-test {
overflow-x: hidden !important;
text-overflow: ellipsis !important;
}
https://codesandbox.io/s/modern-resonance-hme4s?fontsize=14&hidenavigation=1&theme=dark