# Column Header

FlexGrid allows you to change the column header from its default value.

## Content



FlexGrid allows you to change the column header from its default value. The implementation can se be seen in the example below. The [Header](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Grid/C1.Blazor.Grid.GridColumn.Header.html) property of [GridColumn](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Grid/C1.Blazor.Grid.GridColumn.html) class is used to add reference name to the column headers which will be displayed in the FlexGrid.

![Column headers](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/column-headers.png)

The following **code example** demonstrate how to customize Column Header in FlexGrid.

```razor
@page "/ColumnHeader"
@using C1.Blazor.Core
@using C1.Blazor.Input
@using C1.Blazor.Grid
<h1>Hello, world!</h1>
Welcome to your new app.
<p>
     Checkbox: <C1CheckBox IsChecked="@isActive"></C1CheckBox>
</p>
<p>
     TextBox: <C1TextBox @bind-Text="@country"></C1TextBox>
</p>
<p>
     BoundGrid with AutoGenerateColumns false<br />
     <FlexGrid @ref="grid" AutoGenerateColumns="false" ItemsSource="gridData">
          <FlexGridColumns>
               <GridColumn Header="Country ID" Binding="Id"></GridColumn>
               <GridColumn Header="Country Name" Binding="Country"></GridColumn>
          </FlexGridColumns>
     </FlexGrid>
</p>
Click on Fetch data for AutoGenerateColumns FlexGrid <a href="/fetchdata">AutoGenerateColumns</a>
@code{
     bool isActive = true;
     string country = "India";
     string[] countries;
     object grid = null;
     List<object> gridData = new List<object>();
     protected override void OnInitialized()
     {
          countries = "US,UK,Japan,India".Split(',');
          int i = 0;
          foreach (var item in countries)
          {
               gridData.Add(new
               {
                    Country = item,
                    Id = i
               });
               i++;
          }
     }
}
```