CODEWITHSUNDEEP
react-virtualized
Troy Cosentino
Troy Cosentino

Reputation: 4778

React-Virtualized using cellmeasurer with a maximum width?

Is there any way to use react-virtualized's CellMeasurer with a maximum column width which then made the height expand?

For example, I may have an id field in column one of the grid. This would never grow too large, but I want to size it based on the largest value. Then in column two I have a text field that I am not too sure how large it will be. If it turns out that all of my current data set has a small value in column two, I'd like to size based on the largest value. If it happens to have some larger text (over a certain width) I'd like to use that maximum width, and then expand the row's height to accommodate the lines text.

From what I can see in the docs and code, this type of feature isn't supported. If this is the case, I think my best method would be implementing my own CellMeasurer with a slightly more complex _measure function. Does this sound like the proper course of action?

Upvotes: 1

Views: 1185

Answers (1)

bvaughn
bvaughn

Reputation: 13487

You should be able to do this by adding a style constraint to your rendered cell. CellMeasurer just measures what the browser reports- and CSS controls the browser's max width.

React might freeze the style object too so use spread rather than directly modifying:

style={{
  ...style,
 maxWidth: 300
}}

Upvotes: 2

Related Questions