# Header

## Header Row

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

This initial setup generates the following output:

![Header Row](/files/zb6ThBKTFAus11V6dUSo)

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.

{% hint style="info" %}
See the [Panels' structure](/fundamentals/grid-structure/panels.md) for more details.
{% endhint %}

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

![Column Headers definition](/files/0J5b0vMH82gHShQtoDGL)

## 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 <mark style="color:orange;">`headerRowHeight`</mark>.

{% code title="grid-structure.component.html" %}

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

{% endcode %}

{% hint style="success" %}
You can also change the height of the Header by providing the Injection Token called <mark style="color:blue;">`HEADER_ROW_HEIGHT`</mark>.
{% endhint %}

In the previous code snippet, we added the <mark style="color:orange;">`headerRowHeight`</mark> property to the DikeGrid instance and was bound to the `gridProperties` object.

Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Header** group, and type 120 in the **Header Height** textbox.

![Floating Configuration Panel - Header](/files/PVNyydUtdnzdeRwaX9U4)

![Changing the Header Row height](/files/mBCwCw8mvGMk1xFnzLPN)

### 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.

{% code title="grid-structure.component.html" %}

```markup
<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>
```

{% endcode %}

![Header Row Height - Column Groups](/files/gyGZMfHBwy2qycgfwZdB)

{% hint style="success" %}
For further details about groups, see [Column Grouping](/columns/column-grouping.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dikesoft.com/fundamentals/grid-structure/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.