Material-ui: TableRowColumn Not Wrapping Text

[JasonWeise]

There doesn't appear to be any way (that I can find) to wrap text in a TableRowColumn. I have tried with <p>,<span> and <div> as children of the TableRowColumn and the text never wraps.

At best I can get ... at the end of the text (which appears to be default behaviour) but that doesn't actually allow the user to view the larger text, it only seems to indicate that the text is longer than the column

Is there any way to make text in a TableRowColumn wrap within?

PS. I have tried setting the height of the Rows to something large as well and that still doesn't wrap.

[newoga]

@JasonWeise Could you try applying the following style to the TableRowColumn element?

<TableRowColumn style={{wordWrap: 'break-word', whiteSpace: 'normal'}}></TableRowColumn>

Source: http://stackoverflow.com/questions/1057574/html-td-wrap-text

FYI: It may more appropriate to ask this question on the material-ui stack overflow page.

[JasonWeise]

@newoga Thank you so much, that got it. I was CERTAIN I tried that as I found it on a forum somewhere, but was getting so frustrated that heaven only knows what I ended up trying.
Think I just needed to walk away for a bit... you are a saviour :+1:

[newoga]

No problem @JasonWeise!

@oliviertassinari @alitaheri I know we plan on adding functionality to the Table component at some point based on the roadmap. Do you think this use case should be a configurable prop? I can argue both ways.

[alitaheri]

@newoga It's debatable, I think the use case is valid! but a configuration prop might complex the logic within the component. if we support composability better this would be much easier to implement.

[newoga]

@alitaheri Since Table is already a little composable, we may be able to put this logic in the getStyles() for <TableRowColumn />.

I think we get a way with doing it in one line of code with something like:

      root: {
        fontWeight: 'normal',
        fontSize: 12,
        paddingLeft: theme.spacing,
        paddingRight: theme.spacing,
        height: theme.height,
        textAlign: 'left',
        whiteSpace: this.props.wrap ? 'normal' : 'nowrap', // changed line
        textOverflow: 'ellipsis',
        color: this.getTheme().textColor,
        position: 'relative',
      },


<TableRowColumn wrap={true || false} />

[alitaheri]

That sounds like a good idea :+1: