How to set column width or column text wrap

[verbeckii]

Is anybody know how to set column width?

Expected Behavior

I have "Description" column and its text can be so long I expected that I can manually set column width and let the text wrap

Current Behavior

Now if "Description" has a long text then it just goes over other columns as if it doesn't have its own border I'm trying to use CustomRender and set CSS white-space but it doesn't work

       customBodyRender: (value) => {
          return (
            <td>
              <p style={{ whiteSpace: 'normal' }}>
                {value}
              </p>
            </td>
          )
        }

Steps to Reproduce (for bugs)

1. pass a long text to the any column
2. see that this text goes over other columns

Your Environment

Tech	Version
Material-UI	4
MUI-datatables	5
React	17
browser	chrome
etc

[ashfaqnisar]

Hey @verbeckii, i tried this I got the same issue. I don't think there is a default option for column width You can fix this by using the setCellProps.

setCellProps: () => ({ style: { maxWidth: "300px", wordWrap: "break-word", display: "inline-block" } }), customBodyRender: () => ( <Typography> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaa Psychic blisses feels most zens. Psychic politics avoids most chaos. BE BRIGHT. Psychic blisses feels most zens. Psychic politics avoids most chaos. BE BRIGHT. Psychic blisses feels most zens. Psychic politics avoids most chaos. BE BRIGHT. Psychic blisses feels most zens. Psychic politics avoids most chaos. BE BRIGHT. Psychic blisses feels most zens. Psychic politics avoids most chaos. BE BRIGHT. </Typography> )

The result would be something like this

[doyinspc]

Any solution yet to column width and text wrapping . Scratch that. Using setCellProps worked