Exploring Column Types in Syncfusion .NET MAUI DataGrid
Tags: maui, datagrid, development, mobile
Published: 2023-02-13 12:18:29

---
title: Exploring Column Types in Syncfusion .NET MAUI DataGrid
published: true
date: 2023-02-13 11:00:00 UTC
tags: maui, datagrid, development, mobile
canonical_url: https://www.syncfusion.com/blogs/post/exploring-column-types-in-syncfusion-net-maui-datagrid.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tw4b8u9bm0o4359bzoj.png
---
The Syncfusion [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid "Syncfusion .NET MAUI DataGrid") control displays and manipulates data in a tabular view. It was built from the ground up in .NET MAUI to achieve the best possible performance, even when loading a huge volume of data. It supports various built-in column types based on the data object bound to it.

The following table shows the supported data types and their corresponding column types.
<table style="width: 100%; height: 429px;" width="552">
<tbody>
<tr style="height: 68px;">
<td style="height: 68px;" width="276">
<p><strong>Data type</strong></p>
</td>
<td style="height: 68px;" width="276">
<p><strong>Column</strong></p>
</td>
</tr>
<tr style="height: 68px;">
<td style="height: 68px;" width="276">
<p>string, object</p>
</td>
<td style="height: 68px;" width="276">
<p><a title="DataGridTextColumn Class of .NET MAUI DataGrid" href="https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridTextColumn.html" target="_blank" rel="noopener">DataGridTextColumn</a></p>
</td>
</tr>
<tr style="height: 89px;">
<td style="height: 89px;" width="276">
<p>Int, float, double, decimal, and their respective nullable types</p>
</td>
<td style="height: 89px;" width="276">
<p><a title="DataGridNumericColumn Class of .NET MAUI DataGrid" href="https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridNumericColumn.html" target="_blank" rel="noopener">DataGridNumericColumn</a></p>
</td>
</tr>
<tr style="height: 68px;">
<td style="height: 68px;" width="276">
<p>DateTime</p>
</td>
<td style="height: 68px;" width="276">
<p><a title="DataGridDateColumn Class of .NET MAUI DataGrid" href="https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridDateColumn.html" target="_blank" rel="noopener">DataGridDateColumn</a></p>
</td>
</tr>
<tr style="height: 68px;">
<td style="height: 68px;" width="276">
<p>Bool</p>
</td>
<td style="height: 68px;" width="276">
<p><a title="DataGridCheckBoxColumn Class of .NET MAUI DataGrid" href="https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridCheckBoxColumn.html" target="_blank" rel="noopener">DataGridCheckboxColumn</a></p>
</td>
</tr>
<tr style="height: 68px;">
<td style="height: 68px;" width="276">
<p>ImageSource</p>
</td>
<td style="height: 68px;" width="276">
<p><a title="DataGridImageColumn Class of .NET MAUI DataGrid" href="https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridImageColumn.html" target="_blank" rel="noopener">DataGridImageColumn</a></p>
</td>
</tr>
</tbody>
</table>

**Note:** For the remaining data types, a [Text Column](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridTextColumn.html "DataGridTextColumn Class of .NET MAUI DataGrid") will be created.

You can generate columns either automatically or manually. The .NET MAUI DataGrid creates columns automatically based on the bindable property [AutoGenerateColumnsMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_AutoGenerateColumnsMode "AutoGenerateColumnsMode property of .NET MAUI DataGrid"). The columns are generated based on the type of individual properties in the underlying collection set in the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_ItemsSource "ItemsSource property of .NET MAUI DataGrid").

For more details, refer to the [different modes of autogenerating columns](https://help.syncfusion.com/maui/datagrid/columns#different-modes-to-auto-generate-columns "Different modes to auto-generate columns in .NET MAUI DataGrid") in .NET MAUI DataGrid documentation.

Let’s explore the different column types in the .NET MAUI DataGrid control with code examples.

## Types of columns

The .NET MAUI DataGrid supports the following built-in column types:

- [Text column](#textcolumn)
- [Checkbox column](#checkboxcolumn)
- [Image column](#imagecolumn)
- [Template column](#templatecolumn)
- [Numeric column](#numericcolumn)
- [Date column](#datecolumn)

Each column has properties to handle different kinds of data. For this demo, we will display business data with the dealer’s name and ID, the shipped date, and more with these column types.

**Note:** If you’re new to our .NET MAUI DataGrid, please refer to its [getting started documentation](https://help.syncfusion.com/maui/datagrid/getting-started "Getting Started with .NET MAUI DataGrid").

### <a name="textcolumn">Text column</a>

The text column hosts the text content in the record cells. Each record cell displays text based on the  **MappingName**  property that associates the column with a property in the data source.

Refer to the following code example to display the dealers’ names.

```xml
<syncfusion:SfDataGrid x:Name="dataGrid"
                         ItemsSource="{Binding DealerInformation}"
                         AutoGenerateColumnsMode="None">
 
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridTextColumn HeaderText="Name"                                      
                                       MappingName="DealerName">
        </syncfusion:DataGridTextColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
```

### <a name="checkboxcolumn">Checkbox column</a>

A checkbox column holds Boolean values in its cells. We will load the .NET MAUI [CheckBox](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/checkbox "Getting started with .NET MAUI Framework CheckBox control") framework control as the content of the record cells and the checkboxes then respond to the Boolean value changes. Based on changes in the data source, the values in the checkbox will be toggled.

Refer to the following code example. We render checkboxes to denote the online status of the dealers.

```xml
<syncfusion:SfDataGrid x:Name="dataGrid"
                         ItemsSource="{Binding DealerInformation}"
                         AutoGenerateColumnsMode="None">
 
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridCheckBoxColumn HeaderText="Is Online"                                       
                                           MinimumWidth="{StaticResource minimumWidth}"                                        
                                           MappingName="IsOnline">
        </syncfusion:DataGridCheckBoxColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
```

### <a name="imagecolumn">Image column</a>

An image column displays images in its record cells. We will load the .NET MAUI [Image](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/image?view=net-maui-7.0 "Getting started with .NET MAUI Framework Image control") framework control to display the grid cell content.

Refer to the following code example to display the dealers’ images.

```xml
<syncfusion:SfDataGrid x:Name="dataGrid"
                         ItemsSource="{Binding DealerInformation}"
                         AutoGenerateColumnsMode="None">
 
 <syncfusion:SfDataGrid.Columns>
  <syncfusion:DataGridImageColumn HeaderText="Dealer"                                       
                                  MappingName="DealerImage"                                       
                                  CellPadding="8">
  </syncfusion:DataGridImageColumn>
 </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

```

### <a name="templatecolumn">Template column</a>

You can display the column values with your desired view using the [CellTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridTemplateColumn.html#Syncfusion_Maui_DataGrid_DataGridTemplateColumn_CellTemplate "CellTemplate property of .NET MAUI DataGrid") property. By default, the underlying record is **BindingContext** for **CellTemplate**. So, we should define the template for each column to display values based on the **MappingName** property.

Refer to the following code example.

```xml
<syncfusion:SfDataGrid x:Name="dataGrid"
                         ItemsSource="{Binding DealerInformation}"
                         AutoGenerateColumnsMode="None">
 
 <syncfusion:SfDataGrid.Columns>
  <syncfusion:DataGridTemplateColumn MappingName="Name" MinimumWidth="200" MaximumWidth="{StaticResource nameColumnWidth}">                           
   <syncfusion:DataGridTemplateColumn.HeaderTemplate>
    <DataTemplate>
     <Label Text="Product Details" FontFamily="Roboto-Medium" FontSize="14" FontAttributes="Bold" HorizontalOptions="Start" VerticalOptions="Center" Margin="{OnPlatform WinUI='0,16,0,15', MacCatalyst='0,16,0,15', Android='10,8,0,7', iOS='10,8,0,7'}"></Label>
    </DataTemplate>
   </syncfusion:DataGridTemplateColumn.HeaderTemplate>
   <syncfusion:DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
     <ContentView VerticalOptions="Start">             
      <StackLayout Orientation="Horizontal">
       <StackLayout HeightRequest="84" Margin="{OnPlatform WinUI='0,8,4,8', iOS='8,8,4,8',Android='8,8,4,8', MacCatalyst='0,8,4,8'}" HorizontalOptions="End" VerticalOptions="Start">
        <Label Margin="0,3,0,1" LineBreakMode="WordWrap" HorizontalTextAlignment="End" FontSize="14" Text="ID :" TextColor="Black">
        </Label>
        <Label LineBreakMode="WordWrap" FontSize="14" VerticalOptions="Start"
               Margin="0,3,0,1"
               HorizontalTextAlignment="End"
               Text="No :"
               TextColor="Black">
        </Label>
        <Label LineBreakMode="WordWrap" FontFamily="Roboto" FontSize="14" VerticalOptions="Start"                               
               Margin="0,3,0,1"
               HorizontalTextAlignment="End"
               Text="Price :"
               TextColor="Black">
        </Label>
       </StackLayout>
       <StackLayout HeightRequest="84"
                     HorizontalOptions="Start"
                     Margin="0,8,0,8"                                      
                     VerticalOptions="Start">
        <Label LineBreakMode="WordWrap" Margin="0,3,0,1"
               Text="{Binding ProductID}"
               TextColor="Black">
        </Label>
        <Label LineBreakMode="WordWrap" Margin="0,3,0,1"
               Text="{Binding ProductNo}"
               TextColor="Black">
        </Label>
        <Label LineBreakMode="WordWrap"                                             
               Margin="0,3,0,1"
               Text="{Binding ProductPrice, StringFormat='{0:C}'}"               
               TextColor="Black">
        </Label>
       </StackLayout>
      </StackLayout>
     </ContentView>
    </DataTemplate>
   </syncfusion:DataGridTemplateColumn.CellTemplate>
  </syncfusion:DataGridTemplateColumn>    
 </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

```

### <a name="numericcolumn">Numeric column</a>

A numeric column displays numeric values in the record cells. To create a numeric column, the property corresponding to the column in the underlying collection must be of type numeric.

Refer to the following code example to display the dealers’ IDs in the DataGrid.

```xml
<syncfusion:SfDataGrid x:Name=”dataGrid”
                        ItemsSource=”{Binding DealerInformation}”
                        AutoGenerateColumnsMode=”None”>
 
 <syncfusion:SfDataGrid.Columns>
  <syncfusion:DataGridNumericColumn Format=”D”                                      
                                    HeaderText=”ID”                                      
                                    MappingName=”ProductID”>
  </syncfusion:DataGridNumericColumn>
 </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
```

### <a name="datecolumn">Date column</a>

With this column type, you can display date information as the content in a column. To create a date column, the property corresponding to the column in the underlying collection must be DateTime.

Refer to the following code example to display shipped dates.

```xml
<syncfusion:SfDataGrid x:Name="dataGrid"
                       ItemsSource="{Binding DealerInformation}"
                       AutoGenerateColumnsMode="None">
 
 <syncfusion:SfDataGrid.Columns>
  <syncfusion:DataGridDateColumn HeaderText="Shipped Date"                                                                                   
                                 MinimumWidth="{StaticResource minimumWidth}"
                                 MappingName="ShippedDate"> 
 </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Displaying-Data-Using-Different-Column-Types-in-.NET-MAUI-DataGrid.png" alt="Displaying Data Using Different Column Types in .NET MAUI DataGrid" style="width:100%">

  <figcaption>Displaying Data Using Different Column Types in .NET MAUI DataGrid</figcaption>

</figure>

## References

For more details, refer to [different column types in the .NET MAUI DataGrid GitHub demo](https://github.com/syncfusion/maui-demos/tree/master/MAUI/DataGrid/SampleBrowser.Maui.DataGrid/Samples/DataGrid/ColumnTypes "Different column types in Syncfusion .NET MAUI DataGrid GitHub demo") and [documentation](https://help.syncfusion.com/maui/datagrid/column-types "Getting Started with .NET MAUI DataGrid").

## Conclusion

Thanks for reading! In this blog, we’ve seen the various column types in the [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid "Syncfusion .NET MAUI DataGrid") with code examples. You can also enjoy the data binding, sorting, filtering, customization, and other features in the .NET MAUI DataGrid. Try them out and leave your feedback in the comments below!

Customers can download the latest Essential Studio version from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and downloads page of Essential Studio") page. If you are not yet a Syncfusion customer, you can always download our [free evaluation](https://www.syncfusion.com/downloads "Free evaluation of Essential Studio") to examine all our controls.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Suppport Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are delighted to help you!

## Related blogs

- [Authenticate a .NET MAUI App with Azure AD](https://www.syncfusion.com/blogs/post/authenticate-the-net-maui-app-with-azure-ad.aspx "Blog: Authenticate a .NET MAUI App with Azure AD")
- [Agenda View in .NET MAUI Scheduler: A Perfect Tool for Modern-Day Office Management](https://www.syncfusion.com/blogs/post/agenda-view-in-net-maui-scheduler-a-perfect-tool-for-modern-day-office-management.aspx "Blog: Agenda View in .NET MAUI Scheduler: A Perfect Tool for Modern-Day Office Management")
- [Achieve Outlook-Like Swiping Using .NET MAUI ListView](https://www.syncfusion.com/blogs/post/achieve-outlook-like-swiping-using-net-maui-listview.aspx "Blog: Achieve Outlook-Like Swiping Using .NET MAUI ListView")
- [Replicating an Invoice Page UI in .NET MAUI](https://www.syncfusion.com/blogs/post/invoice-page-ui-in-net-maui.aspx "Blog: Replicating an Invoice Page UI in .NET MAUI")
- [How to Draw 2D Graphics in .NET MAUI’s GraphicsView](https://www.syncfusion.com/blogs/post/draw-2d-graphics-in-dotnet-maui-graphicsview.aspx "Blog: How to Draw 2D Graphics in .NET MAUI's GraphicsView")