Allow Column Headers to Wordwrap in React
Sometimes you may have text in a column header that takes up more space than is granted by FlexGrid. Fortunately, the grid comes with two properties that will allow for the grid to properly display text within column headers; wordWrap and autoSizeRow.
Steps to Complete:
This section should display a list of tasks that will need to be complete to implement the feature outlined in the article (if applicable).
1. Set the wordWrap property to true
2. Assign a method to the initialized property so that the height can be set when the grid is initialized
3. Call the autoSizeRow so that the row height for the column headers is auto adjusted
Set the wordWrap property to true
First, we'll need to set the wordWrap property to true in the markup. This will allow the column with the property set on it to have text go to the next line if the text is too long for the header.
Assign a method to the initialized property so that the height can be set when the grid is initialized
Second, we'll need a way to apply changed to the FlexGrid when its created, so we'll use the initialized property to call an event when the grid has been initialized.
Call the autoSizeRow so that the row height for the column headers is auto adjusted
Finally, inside of the method tied to the initialized property, we'll call the autoSizeRow method. We'll pass it the arguments 0 and true, so that it auto sizes the first row in the grid (the column header row).
You can find a live sample of this project here: https://stackblitz.com/edit/wijmo-knowledgebase-react-flexgrid-column-header-wrapping