Sort, Filter & Show Data with this Free DataGrid Control for .NET MAUI

A common question that arises among developers is whether or not a data grid is available in .NET MAUI. Well, guess what? There is a free open-source plugin that offers a data grid, and we are going to explore it in this blog post. The plugin is called Maui.DataGrid, developed by Ebu Akgul. It offers a variety of features that you can use in your .NET MAUI projects.

Why is there no Data Grid in .NET MAUI? #

There’s no built-in data grid in .NET MAUI because the definition of a data grid varies depending on who you ask. Some people want a grid just for viewing data, while others also want to edit, filter, and sort data within the grid. In other words, a data grid can be vastly different depending on user requirements, making it a complex control to implement in a framework like .NET MAUI, which is already a very complex framework itself.

That said, there are third-party control vendors like Telerik, Syncfusion, DevExpress and others that offer feature-rich data grids for .NET MAUI. Some of them even have community licenses that provide free access to their data grids for small companies or individual developers.

Getting Started with Maui Data Grid Plugin #

To start using the Maui.DataGrid plugin in your .NET MAUI project, first install it from NuGet. Search for “Maui.DataGrid” and install the Akgul.Maui.DataGrid package.

The next step is to add the XML namespace in your XAML file:

xmlns:dg="clr-namespace:Maui.DataGrid;assembly=Maui.DataGrid"

Now you can use the dg:DataGrid control in your XAML markup. Here’s an example of how to use the Maui.DataGrid plugin with data binding and various customization options. You can find the full code here: https://github.com/jfversluis/MauiDataGridSample

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="70" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  
  <Button Text="Clear Monkeys" Command="{Binding ClearMonkeysCommand}" />
  
  <dg:DataGrid Grid.Row="1" ItemsSource="{Binding Monkeys}"
               SelectionEnabled="True" SelectedItem="{Binding SelectedMonkey}"
               RowHeight="70" HeaderHeight="50"
               PullToRefreshEnabled="True" RefreshCommand="{Binding RefreshCommand}"
               IsRefreshing="{Binding IsRefreshing}" HeaderBackground="Red">
    
    <!-- Empty view to display if there's no data -->
    <dg:DataGrid.EmptyView>
      <Label Text="Nothing to see here!" VerticalOptions="Center" HorizontalOptions="Center" />
    </dg:DataGrid.EmptyView>
    
    <!-- Defining columns for the data grid -->
    <!-- Adjust the PropertyName, and other details as per your dataset -->
    <dg:DataGrid.Columns>
      <dg:DataGridColumn Title="Image" PropertyName="Image" Width="70"
                         SortingEnabled="True">
        <dg:DataGridColumn.CellTemplate>
          <DataTemplate>
            <Image Source="{Binding Image}" Aspect="AspectFill" />
          </DataTemplate>
        </dg:DataGridColumn.CellTemplate>
      </dg:DataGridColumn>

      <dg:DataGridColumn Title="Name" PropertyName="Name" Width="100"
                         SortingEnabled="True" />
                         
      <!-- Add more columns as needed for your dataset -->

    </dg:DataGrid.Columns>
    
    <!-- Defining row color settings -->
    <dg:DataGrid.RowsBackgroundColorPalette>
      <Color>White</Color>
      <Color>LightGray</Color>
    </dg:DataGrid.RowsBackgroundColorPalette>
  </dg:DataGrid>
</Grid>

This example demonstrates how to use the Maui.DataGrid control with data binding, various customization options, and pull-to-refresh support. While the plugin provides many useful features out-of-the-box, developers should be aware that it may not cover all possible use cases, such as editing or filtering data.

If you’re curious to see this control in action, check out the YouTube video I have recorded about it as well.

Conclusion #

The Maui.DataGrid plugin is a valuable addition to your .NET MAUI projects, offering a free and open-source data grid control. While it doesn’t cover all the features you might need – like editing data – it’s still a useful component, especially for data display needs.

Give it a try in your .NET MAUI projects, and, as always, remember to support and thank open-source developers who contribute their time and effort towards building tools like this for the community. If you have any questions or want more in-depth explanations of specific features, please feel free to reach out. Happy coding!