Multiple Column Header Rows (3 rows)

Description

Angular-Slickgrid by default will use 2 rows to display each Column Headers, in some cases you might want to change that.

Using SASS variable

If you use SASS, you can simply change the $slick-header-row-count variable and you're good to go. However, please note that this affects all your grids. If that is not what you want then keep reading.

Example:

$slick-header-row-count: 2;
@import '../node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';

Change x rows for only 1 grid

In the case that you want to change the number of rows used to display each Column Headers, you will have to use a little bit more SASS code and the gridId of your grid.

For example, let say your grid as the gridId of mygrid, with the following code

<angular-slickgrid
    gridId="mygrid"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset">
</angular-slickgrid>

You have to copy the id mygrid into the SASS code shown below (replace mygrid to your need). You also need to adjust the height in pixels, for 3 rows 55px seems to be a good number to use. You can also move the sort indicators as shown below.

#slickGridContainer-mygrid {
    .slickgrid-container .slick-header-columns {
        .slick-header-column {
            height: 55px;

            .slick-sort-indicator, .slick-sort-indicator-numbered {
                top: 40px;
            }
        }
    }
}

Also note that if you use a stylesheet attached to your component (or inline), you might need to change the encapsulation to use the ViewEncapsulation.None, like this:

@Component({
  selector: 'demo',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./demo.component.scss'],
  templateUrl: './demo.component.html'
})