005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import Avatar from '@mui/joy/Avatar';
|
||
import Box from '@mui/joy/Box';
|
||
import Table from '@mui/joy/Table';
|
||
import Typography from '@mui/joy/Typography';
|
||
import Link from '@mui/joy/Link';
|
||
|
||
export default function TableTextEllipsis() {
|
||
return (
|
||
<Table
|
||
aria-label="table with ellipsis texts"
|
||
noWrap
|
||
sx={{ mx: 'auto', width: 400 }}
|
||
>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th style={{ width: '60%' }}>
|
||
Description (you should see a part of this message)
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||
<Avatar src="/static/images/avatar/1.jpg" />
|
||
<Box sx={{ minWidth: 0 }}>
|
||
<Typography noWrap sx={{ fontWeight: 'lg' }}>
|
||
Morty D Ardiousdellois Addami
|
||
</Typography>
|
||
<Typography noWrap level="body-sm">
|
||
Writer, Youtuber
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</td>
|
||
<td>
|
||
Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at
|
||
velit. Vivamus vel nulla eget eros elementum pellentesque. Quisque porta
|
||
volutpat erat. Quisque erat eros, viverra eget, congue eget, semper
|
||
rutrum, nulla.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Joseph Morriso</td>
|
||
<td>
|
||
<Typography noWrap>
|
||
<Link href="#text-ellipsis" startDecorator="ℹ️">
|
||
In eleifend quam a odio
|
||
</Link>
|
||
. Suspendisse potenti in hac habitasse platea dictumst.
|
||
</Typography>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</Table>
|
||
);
|
||
}
|