Introducing a New Lightweight DataGrid for Uno Platform

Whether you’re building a desktop dashboard, a web-based admin panel, or a mobile app for field data entry, at some point, you’ll need to display and interact with structured tabular data. And that’s where things can get tricky.

While .NET developers are creating awesome cross-platform apps with the Uno Platform, they might need a good-looking, lightweight, fast, and reliable DataGrid. That’s exactly why I created WinUI.TableView: a customizable, lightweight, and developer-friendly DataGrid control tailored for WinUI 3 and now extended to support the Uno Platform, making it run on almost any platform.

In this article, you’ll learn how to get started with an open-source community project with support for Uno Platform – WinUI.TableView, explore its core features, and see how it can help you build rich, cross-platform data-driven applications using .NET and Uno Platform.

Getting Started

1. Create a New Uno Platform Project

If you don’t already have an Uno Platform project, create one in Visual Studio, VS Code or Rider using the blank template from the Wizard.

2. Install NuGet Package

Install the WinUI.TableView NuGet package into your application using your preferred method. Here is the one using NuGet Package Manager:
				
					Install-Package WinUI.TableView
				
			

3. Add WinUI.TableView to your XAML

In your MainPage.xaml, add the WinUI.TableView control:
				
					<Page x:Class="UnoApp1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:tv="using:WinUI.TableView"      
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Margin="40">
        <tv:TableView AutoGenerateColumns="False"
                      ItemsSource="{x:Bind Items}">
            <tv:TableView.Columns>
                <tv:TableViewTextColumn Header="Name" Width="250" Binding="{Binding Name}" />
                <tv:TableViewNumberColumn Header="Price" Width="100" Binding="{Binding Price}" />
                <tv:TableViewNumberColumn Header="Quantity" Width="100" Binding="{Binding Quantity}" />
                <tv:TableViewDateColumn Header="Purchase Date" Width="140" Binding="{Binding PurchaseDate}" />
            </tv:TableView.Columns>
        </tv:TableView>
    </Grid>
</Page>
				
			

4. Bind Data to 'TableView'

Create a simple model class with properties to be represented in the TableView cells:

				
					public class Item : INotifyPropertyChanged
{
    private string? _name;
    private double _price;
    private int _quantity;
    private DateOnly _purchaseDate;

    public string? Name
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged(nameof(Name));
        }
    }
    public double Price
    {
        get => _price;
        set
        {
            _price = value;
            OnPropertyChanged(nameof(Price));
        }
    }
    public int Quantity
    {
        get => _quantity;
        set
        {
            _quantity = value;
            OnPropertyChanged(nameof(Quantity));
        }
    }
    public DateOnly PurchaseDate
    {
        get => _purchaseDate;
        set
        {
            _purchaseDate = value;
            OnPropertyChanged(nameof(PurchaseDate));
        }
    }

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler? PropertyChanged;
}
				
			

In your MainPage.xaml.cs, set up the data context and bind data to the TableView:

				
					public sealed partial class MainPage : Page
{
    public IList<Item> Items { get; }

    public MainPage()
    {
        this.InitializeComponent();

        Items = Enumerable.Range(1, 20).Select(i => GetRandomItem(i)).ToList();
    }

    private static Item GetRandomItem(int i)
    {
        return new Item
        {
            Name = $"Random Item {i}",
            Price = Math.Round(Random.Shared.NextDouble() * 100, 2),
            Quantity = Random.Shared.Next(1, 100),
            PurchaseDate = DateOnly.FromDateTime(DateTime.Today.AddDays(Random.Shared.Next(-90, 90)))
        };
    }
}
				
			

5. Run Your Application

Build and run your application. You should see the WinUI.TableView populated with the rows and cells from your Items collection.
 
Here is the result when running the app on a desktop platform.

Note:

This is a guest blog post written by an open-source maintainer whose library supports Uno Platform. We’re highlighting great community champions to help them gain visibility and grow contributions to their projects, contributing to a healthy Uno Platform ecosystem, especially in areas with high demand, such as Data Grids.

Please note that Uno Platform makes no warranties regarding the support or maintenance of this library.

Features Overview

WinUI.TableView focuses on delivering the most essential data grid features that developers expect in modern apps, with a clean and extensible design. Here are some of the key capabilities:

Alternate Row Coloring

Improve readability by enabling alternate row backgrounds and foregrounds. This makes it easier to scan rows, especially in dense datasets. The colors are fully customizable using XAML.

				
					AlternateRowBackground="Gray"
AlternateRowForeground="AliceBlue"
				
			

Column Sorting

WinUI.TableView includes built-in support for multi-level column sorting with a simple header click. Users can easily sort data by one or more columns, and developers have full control over the sorting logic.

Sorting is enabled by default but can be toggled globally using the TableView.CanSortColumns property, or controlled per-column using the TableViewColumn.CanSort property, giving you fine-grained flexibility.

Column Filtering

WinUI.TableView offers a built-in, Excel-style column filtering experience to help users quickly narrow down data. Each column header includes a filter button that opens a flyout, allowing users to apply text-based filters interactively.

Filtering is enabled by default but can be disabled for individual columns using the TableViewColumn.CanFilter property. Developers can also toggle filtering globally by setting the TableView.CanFilterColumns property. This feature makes it easy to deliver powerful, user-friendly filtering without writing custom UI.

Grid Lines

Grid lines help visually separate cells and improve the readability of tabular data. WinUI.TableView gives developers full control over grid line visibility and styling. You can choose to display grid lines for headers, cells, or both, and configure them to appear vertically, horizontally, or in both directions. Their thickness and colors are fully customizable to match the visual style of your application.

CSV Export

WinUI.TableView includes built-in support for exporting data to CSV format, making it easy to share or analyze data using tools like Excel.

To enable this feature, simply set the `TableView.ShowExportOptions` property to `true`. Once enabled, two more options will be available by clicking on top-left corner button of the table, allowing for quick and convenient data export with minimal setup.

Cell & Row Context Flyout

WinUI.TableView provides built-in context flyouts for both individual cells and entire rows, enabling users to perform quick actions like copy, edit, or custom commands. These flyouts are fully customizable, allowing you to define your own context menus at the cell level, row level, or both. This makes it easy to offer inline operations without cluttering the UI.
				
					<tv:TableView.RowContextFlyout>
     <MenuFlyout>
         <MenuFlyoutItem Text="Copy" Icon="Copy" />
         <MenuFlyoutItem Text="Copy with Headers" />
         <MenuFlyoutSeparator />
         <MenuFlyoutItem Text="Move Up">
             <MenuFlyoutItem.Icon>
                 <FontIcon Glyph="&#xE70E;" />
             </MenuFlyoutItem.Icon>
         </MenuFlyoutItem>
         <MenuFlyoutItem Text="Move Down">
             <MenuFlyoutItem.Icon>
                 <FontIcon Glyph="&#xE70D;" />
             </MenuFlyoutItem.Icon>
         </MenuFlyoutItem>
         <MenuFlyoutSeparator />
         <MenuFlyoutItem Text="Delete" Icon="Delete" />
     </MenuFlyout>
 </tv:TableView.RowContextFlyout>
 <tv:TableView.CellContextFlyout>
     <MenuFlyout>
         <MenuFlyoutItem Text="Copy" Icon="Copy" />
         <MenuFlyoutItem Text="Copy with Headers" />
         <MenuFlyoutSeparator />
         <MenuFlyoutItem Text="Delete row" Icon="Delete" />
     </MenuFlyout>
 </tv:TableView.CellContextFlyout>
				
			

Auto-Generate columns

WinUI.TableView supports automatic column generation based on the properties of the bound data items. This makes it easy to get started without manually defining columns in XAML, especially during prototyping or when working with dynamic data structures.

Feedback, PRs and Issues

WinUI.TableView is designed to be a powerful and flexible solution for developers building modern, cross-platform apps in .NET with WinUI3 or Uno Platform. To exlore more features please try the WinUI.TableView.SampleApp

I look forward to community feedback, contributions, and ideas for new features!

Next Steps

We encourage you to try WinUI.TableView in your next Uno Platform project. If you have questions or want to share what you’ve built, join the Uno Platform community on Discord and GitHub.

Picture of Waheed Ahmad

Waheed Ahmad

Guest Post contributed by

Tags: Data, TableView, DataGrid

Related Posts

Uno Platform 5.2 LIVE Webinar – Today at 3 PM EST – Watch