はじめに
MUIで管理画面を開発していた際、複数行での省略の対応に一工夫必要だったので、まとめました！
問題
<TableCell>に、特に何も考えずにテキストを渡していくと以下のようになり、文字数の多いテキストが幅を占領してしまいます。
以下のように、最大幅を設けて1行で省略する方法はたくさん見つかります。
<TableCell
sx={{
maxWidth: 200,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
もうそこでとって一つずつ睡っている姉弟の膝にそっと置きました。そのとき、すうっと流れて来て、何かあったんだ。僕たちどこまでだって行ける切符持ってるんだ大きいね、このくるみ、倍あるね。なんとも言えずに博士の前を通って行きました。そしてほんとうに、風のように高くはねあがり、どおとはげしい音がして問いました。
</TableCell>
しかし今回は、一覧でももう少し内容が伝わるようにしたいので、2行で省略されるようにしていきます。
解決方法
結論、以下のようにすると実現できます！
<TableCell
sx={{
maxWidth: 200,
}}
>
<Box
sx={{
overflow: 'hidden',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
もうそこでとって一つずつ睡っている姉弟の膝にそっと置きました。そのとき、すうっと流れて来て、何かあったんだ。僕たちどこまでだって行ける切符持ってるんだ大きいね、このくるみ、倍あるね。なんとも言えずに博士の前を通って行きました。そしてほんとうに、風のように高くはねあがり、どおとはげしい音がして問いました。
</Box>
</TableCell>
ここでポイントなのは、<TableCell>内に<Box>を入れているところです。
<TableCell>に対して省略の指定をすると、レイアウトが崩れてしまいます。
おわりに
今回のプロジェクトでは、他の画面でも使用する可能性があったので、コンポーネント化して最大幅と行数を指定できるようにしました！
import React from 'react'
import { Box, TableCell, TableCellProps } from '@mui/material'
type RestrictedTableCellProps = {
maxWidth: number,
lineClamp: number,
} & TableCellProps
export const RestrictedTableCell = ({ maxWidth, lineClamp, children, ...props }: RestrictedTableCellProps) => {
return (
<TableCell
{...props}
sx={{
maxWidth: maxWidth,
}}
>
<Box
sx={{
overflow: 'hidden',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: lineClamp,
}}
>
{ children }
</Box>
</TableCell>
)
}
Discussion