【MUI】TableコンポーネントのCell内で文字を省略して表示する方法

はじめに

私は元薬剤師で、実務経験9ヶ月のフロントエンドエンジニアです。
React/TypeScriptを使って開発しています👩‍💻

プロダクトでMUIを導入しているのですが、Tableコンポーネントのスタイリングで苦戦しました。
備忘録として実装方法を記録しておきます。

背景

表形式でデータを表示するようなページの実装を任されました。
表のUIは、MUIのTableコンポーネントを使用します。

要件として、cellに表示するテキストが長い場合は、省略記号（...）で省略して表示する必要がありました。

結論

MUIのTableCellコンポーネントで長いテキストを省略して表示するには、TableCell内に<div>要素を作成し、その要素にCSSを指定する必要がある。

{/* cell内にdiv要素を作成してCSSを指定する */}
  <TableCell>
    <div className="textContainer">{row.text}</div>
  </TableCell>

styles.css

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

実装

以下に実装例を示します。
例として、本文のテキストが300pxを超える場合は、「...」で省略してみました。

MUIのTableCellコンポーネントにはいくつかのpropsを渡すことができますが、propsとしてCSSを指定しただけでは、テキストを省略して表示することはできませんでした。

TableCellコンポーネント内にdiv要素を作成し、その要素にテキストを省略して表示するためのCSSを指定する必要があります。

  <TableBody>
      {rows.map((row, key) => (
        <TableRow key={key}>
          <TableCell>{row.author}</TableCell>
          <TableCell>{row.title}</TableCell>
          {/* cell内にdiv要素を追加してCSSを指定する */}
          <TableCell>
            <div className="textContainer">{row.text}</div>
          </TableCell>
        </TableRow>
      ))}
  </TableBody>

/* cell内のdiv要素に指定するCSS */
  .textContainer {
  display: block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

終わりに

そもそもHTMLの<table>を実装したことがなかったので、スタイリングに苦戦しました😭
しっかり覚えておこうと思います！

こちらの記事を参考にしました。