How to show multi-line header text in .NET MAUI DataGrid?

The .NET MAUI DataGrid (SfDataGrid) allows you to customize the header text for a column using the HeaderText property. However, by default, the grid only displays one line of text in the header, and any longer header text will be clipped and show an ellipsis at the end.

To display longer header text, use the HeaderTemplate property in the DataGridColumn. This property replaces the default header view, and you can use it to display a label with the LineBreakMode property set to WordWrap. This will wrap the header text to the next line. Additionally, use the HeaderRowHeight property to adjust the header row height as needed, depending on the length of your header text.

Refer to the code example below, which illustrates how to show a multiline header in SfDataGrid.

XAML

<ContentPage.BindingContext>
        <local:EmployeeViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name="dataGrid"
                        ItemsSource="{Binding Employees}" HeaderRowHeight="70">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridTextColumn MappingName="EmployeeID">
            <syncfusion:DataGridTextColumn.HeaderTemplate>
                <DataTemplate>
                    <Label Text="Demo For Multi line Text in header"
                TextColor="Black" VerticalOptions="Fill"
                LineBreakMode="WordWrap” />
                </DataTemplate>
            </syncfusion:DataGridTextColumn.HeaderTemplate>
        </syncfusion:DataGridTextColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

 Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to display multi-line header text in the MAUI DataGrid.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!