Multiple Column Header Rows (3 rows) - ghiscoding/aurelia-slickgrid GitHub Wiki
3.x
updated for version 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;
}
}
}
}