How to hide the overflow content in material ui table cell instead of wrapping

Question

I am using the material UI Table component to render a table. I want to show ... ellipsis when the content in a cell over flows. The current behavior is that it wraps text inside the cell. I tried adding CSS styles but it does not work. How do I achieve this?

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

score 10 · Accepted Answer · answered Mar 19 '20 at 07:04

Here you go with a solution

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

import Css from "./styles.css";

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 component="th" scope="row">
                <div className={Css.textContainer}>
                 {row.name}
                </div>
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

.textContainer {
  display: block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

You need to specify a width to a container and then apply ellisis style to it.

I updated the sandbox to include your code. But it's not working. Please take a look at the sandbox — troglodyte07, Mar 19 '20 at 08:03
https://codesandbox.io/s/keen-water-fmn0b - can you go to this link — troglodyte07, Mar 19 '20 at 08:28
How can I do this without giving a fixed width to cell? Can I do it with %width? — troglodyte07, Mar 19 '20 at 10:56
@Sruthi %width will not work, instead use `width: calc(100vh - Xpx);` — Shiladitya, Mar 19 '20 at 13:39

keikai · Answer 2 · 2020-03-19T07:09:51.487

5

Two notice points

You don't need root inside inline-styles, remove it
CSS for ...

  style={{
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    width: "300px",
    display: "block",
    overflow: "hidden"
  }}

Try it online:

Related QA: text-overflow: ellipsis not working

edited Mar 19 '20 at 07:09

answered Mar 19 '20 at 06:51

keikai

14,085
9
49
68

1

Directly applying CSS on `TableCell` as `display: block` might disturb the `TableCell` Css. – Shiladitya Mar 19 '20 at 07:06
@Shiladitya Yeah you are right. I just picked a minimum diff from the demo to explain what's needed. – keikai Mar 19 '20 at 07:09

score 4 · Answer 3 · answered Jun 22 '21 at 07:43

4

To keep the overflowing cell responsive, add table-layout: fixed; to the Table component. If needed TableCell can be given width: auto or a fixed width.

answered Jun 22 '21 at 07:43

FelixRe_

185
1
10

How to hide the overflow content in material ui table cell instead of wrapping

3 Answers3