value wrapping in a column

[mlapenna7]

I have an MRT table with columns that sometimes have long values. In some cases, I like how MRT auto expands to the right to contain the wider columns. In other cases, when I have multiple tables on the screen, I prefer to have the column values wrap. I have been using size and maxSize like this:

const personalColumns = useMemo( () =>
[
{ accessorKey: "fieldName", header: "Personal Attribute" },
{ accessorKey: "fieldValue", header: "Attribute Value", size: 400, maxSize: 400 },
], [],
);

The value in question is: zzzzzzzzzzzzzzzzzz, yyyyyyyyyyyyyyyyyy (where the number of Zs is 300 and Ys 300)
But this does not give my desired effect. MRT displays a horizontal scroll bar, and the full value in the cell, unwrapped.

I would prefer to have the value broken at the space or comma and displayed something like this:
zzzzzzzzzzzzzzzzzz,
yyyyyyyyyyyyyyyyyy

Am misusing these settings or am I missing and additional option that needs to be set?
On SO, I saw someone suggest the following, but I feel there must be a simpler way:

const columns = useMemo(

() => [
{
accessorKey: 'firstName',
header: 'First Name',
Cell: ({ cell }) => {
return <Box sx={{
display: 'flex',
alignItems: 'center',
color: "green",
width: "120px",
overflow: "hidden"
}}>{cell.getValue()};
},
},

[KevinVandy]

you should be able to use any flexwrap or whitespace wrap/nowrap css in either you own Cell render like you are, or directly in muiTableBodyCellProps.sx. muiTableBodyCellProps.sx should probably be where you start since some default values are applied based on density state.

[KevinVandy]

In v2, there are some layoutMode behaviors I'm trying to document better too. There are tradeoffs between using the default "semantic" table css, and flexbox/css grid.

See if these documentation is helpful: https://v2.material-react-table.com/docs/guides/column-resizing#layout-modes

[egtalbot]

Kevin helped me with some column issues as well - check out this sandbox he put together: https://codesandbox.io/p/sandbox/infallible-faraday-d6frfy?file=%2Fsrc%2FTS.tsx%3A108%2C5-109%2C24

This may give you some ideas

[mlapenna7]

thanks for sharing this

[bradley329]

hi @egtalbot , i have the same issue as mlapenna, would you please give me permission of this sandbox? i cannot access it unfortunately.

[egtalbot]

It's not my sandbox but I'm pretty sure it was publicly available.

[bradley329]

I actually found it's due to the whiteSpace: nowrap in element that's preventing the word wrap to take effect. you have to disable it before applying word wrap to the cells.

[DigitalGenius-ui]

explain more pleas.