Table Header with Multiple Rows

Question

I am using an ag-grid table in my Angular 7 project and i can't span a header cell text on two rows.

What i have now is a header like:

Preferred Option

And i would like it to be

Preferred 
Option

However, all that i'm getting is either only Preferred word or Preferred...

Here is the CSS applied:

<!--AG-HEADER-ROOT-->
element.style {
    height: 56px;
    min-height: 56px;
}

.ag-header-viewport {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    width: 0px;
    min-width: 0px;
    -ms-flex: 1;
    flex: 1;
}
div { //ag-header-container
    display: block;
}


.ag-theme-material .ag-header-cell, .ag-theme-material .ag-header-group-cell {
    line-height: 56px;
    padding-left: 24px;
    padding-right: 24px;
}

A more hierarchical view is here:

ag-header {
    -ms-flex-direction: row;
        flex-direction: row;
        box-sizing: border-box;
        white-space: nowrap;
        width: 100%;
        display: -ms-flexbox;
        display: flex;
    .ag-header-row {    
        position: absolute;
    }
    .ag-header-cell {
      padding-left: 5px;
      padding-right: 0;
      box-sizing: border-box;
      display: inline-block;
      height: 100%;
      position: absolute;
      vertical-align: bottom;

      .ag-header-cell-text {
        padding-left: 0;
        padding-right: 0;
      }
    }

  }

A straight forward approach detailed in other similar raised issues will still give no result:

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

How can I obtain a two row .ag-header-cell?

[how to wordwrap a header in ag-grid](https://stackoverflow.com/a/34333972/1417185) — Paritosh, Dec 18 '18 at 17:16
Possible duplicate of [how to wordwrap a header in ag-grid](https://stackoverflow.com/questions/33894190/how-to-wordwrap-a-header-in-ag-grid) — Paritosh, Dec 18 '18 at 17:17

score 1 · Accepted Answer · answered Dec 19 '18 at 10:07

For future trouble-finders, i managed to solve my issue by the following:

I set the header text in .ts file as:

 ngOnInit(): void {

    this.columnDefs = [
      {
        headerName: 'Line1\nLine2', field: 'field' 
      }
    ];
}

And applied the following CSS properties:

.ag-header-cell-label{
      white-space: pre;
    }
    .ag-header-cell {
      border: 1px;
      padding-left: 10px;
      padding-right: 0;
      white-space: pre;

      .ag-header-cell-text {
        padding-top: 15px;
        padding-left: 0;
        padding-right: 0;
        white-space: pre;
        display: inline-block;
        line-height:13px;
      }

Please notice the usage of line-height property, which assures that the second line is positioned a bit under the first one, and not hidden somewhere.

Missing a "}", and suggested edit queue is full. – Ben in CA Jan 20 '22 at 17:37 — Ben in CA, Jan 20 '22 at 17:37

Table Header with Multiple Rows

1 Answers1