> For the complete documentation index, see [llms.txt](https://docs.dikesoft.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dikesoft.com/fundamentals/grid-structure/header.md).

# 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 %}