как установить фиксированную ширину ячейки таблицы material-ui для усечения содержимого

Question

Я показываю таблицу настроек пользователей с бесконечной прокруткой. Первый столбец содержит имя пользователя разной длины. При этом размер таблицы увеличивается по мере того, как список расширяется при прокрутке вниз для большего количества пользователей. Поэтому я хочу установить фиксированную ширину для этого столбца и соответственно обрезать столбец имени.

Я пытался сделать это так, но это не работает. Ячейка таблицы подстраивается под другие ячейки и распределяет ширину страницы.

<Table>
    <TableBody>
        <TableRow>
            <TableCell style={{ width: '20%' }}>
                <Typography noWrap>SomeveeeeeeeeeeeeeryLoooooooooongNaaaaaame</Typography>
            </TableCell>
        </TableRow>
    </TableBody>
</Table>

Как этого добиться?

Answer 1

Создайте стиль многоточия и используйте его в своем компоненте Typography.

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  ellipsis: {
    maxWidth: 200, // percentage also works
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
});

...
const classes = useStyles();

<Table>
    <TableBody>
        <TableRow>
            <TableCell>
                <Typography className={classes.ellipsis}>
                    SomeveeeeeeeeeeeeeryLoooooooooongNaaaaaame
                </Typography>
            </TableCell>
        </TableRow>
    </TableBody>
</Table>

codeandbox