Multiple Column Header Rows (3 rows)

Description

slickgrid-react 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 '@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

Component

export class GridBasicComponent extends React.Component<Props, State> {
  render() {
    return (
      <SlickgridReact gridId="grid1"
        columnDefinitions={this.state.columnDefinitions}
        gridOptions={this.state.gridOptions}
        dataset={this.state.dataset}
        onReactGridCreated={$event => this.reactGridReady($event.detail)}
        onGridStateChanged={$event => this.gridStateChanged($event.detail)}
      />
    );
  }
}

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;
            }
        }
    }
}