Multiple Column Header Rows (3 rows)

updated for version 3.x

Description

Aurelia-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/@slickgrid-universal/common/dist/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

<aurelia-slickgrid 
    grid-id="mygrid" 
    column-definitions.bind="columnDefinitions" 
    grid-options.bind="gridOptions" 
    dataset.bind="dataset">
</aurelia-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;
            }
        }
    }
}