react-data-grid icon indicating copy to clipboard operation
react-data-grid copied to clipboard

Newlines or arbitrary html in column names

Open kovasap opened this issue 3 years ago • 1 comments

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?

kovasap avatar Feb 12 '22 16:02 kovasap

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>

kovasap avatar Feb 13 '22 22:02 kovasap