Header

Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Header is also called Header Row.

Header Row

The Header Row of the DikeGrid is composed of all the column headers.

This initial setup generates the following output:

Header Row

As you can see, the Header Row occupies the entire horizontal extension of the DikeGrid instance.

The highlighted Header Row represents only one column definition in the CSS Grid Layout specification. Therefore, the DikeGrid CSS Grid Layout will have three template columns when defining columns in all panels of the DikeGrid.

See the Panels' structure for more details.

Inside the Header Row comes the actual column headers definitions. The Header Row uses a nested CSS Grid Layout grid.

Column Headers definition

Changing the Header Row height

By default, the column headers will have a height of 60 pixels. However, you can change this height by providing a numeric value to the input property called headerRowHeight.

grid-structure.component.html

<dike-grid id="grid-structure"
    [headerRowHeight]="gridProperties.headerHeight">
</dike-grid>

You can also change the height of the Header by providing the Injection Token called HEADER_ROW_HEIGHT.

In the previous code snippet, we added the headerRowHeight property to the DikeGrid instance and was bound to the gridProperties object.

Open the Floating Configuration Panel, go to the Header group, and type 120 in the Header Height textbox.

Floating Configuration Panel - Header

Changing the Header Row height

Column Groups

Be aware that the Header Row height will be present in every level when grouping columns. Therefore, the total size of the DikeGrid Header will be the sum of every nested group.

Let us define a group named Complete Name. This group will have two child columns: Name and Surname columns.

grid-structure.component.html

<dike-grid>
    <dike-grid-column
        fieldName="completeNameGroup"
        headerText="Complete Name">

        <dike-grid-column
            fieldName="firstName"
            headerText="Name"
            dataType="Text">
        </dike-grid-column>

        <dike-grid-column
            fieldName="lastName"
            headerText="Surname"
            dataType="Text">
        </dike-grid-column>
    </dike-grid-column>
</dike-grid>

Header Row Height - Column Groups

For further details about groups, see Column Grouping.