react-data-grid
react-data-grid copied to clipboard
Newlines or arbitrary html in column names
I'm interested in having a multi-line column name like this:
| This is |
| My Col |
------------
(rows)
I tried adding newlines/<br/> elements to the "name" field of the column dictionary, but it didn't seem to have any effect. Is there a way to make this work currently or are columns fixed to be one line?
I ended up doing this with this CSS:
/* Vertically center text in column header
* https://stackoverflow.com/a/13515693
*/
[role=columnheader] {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
Using headerRowHeight=60 in my DataGrid invocation, and using this code for my column name:
<div style="line-height=20px">"my text"<br>"second line"</div>