I have a table inside a table card and i have a problem on its TableCell. If the word is too long it is overflowing horizontally. How would i break it to the next line? Pls see the "code" there because its overflowing
Pls see my codesandbox here CLICK HERE
<TableBody>
<TableRow>
<TableCell variant="head">Date</TableCell>
<TableCell variant="body">{order.date}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Code</TableCell>
<TableCell variant="body">{order.code}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Time</TableCell>
<TableCell variant="body">{order.time}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Product</TableCell>
<TableCell variant="body">{order.product}</TableCell>
</TableRow>
</TableBody>
Use word-break: break-word
const useStyles = makeStyles({
wrapTableCell: {
wordBreak: "break-word"
}
});
<TableCell
classes={{ root: classes.wrapTableCell }}
variant="body"
>
{order.code}
</TableCell>