Getting Started

This guide walks you through setting up and using WinUI.TableView in your WinUI application. Follow the steps below to quickly integrate a powerful and flexible data grid into your project.

1. Create a new WinUI project

If you don't already have a WinUI project, create one in Visual Studio.

2. Install the NuGet package

Install WinUI.TableView NuGet package to your app with your preferred method. Here is the one using NuGet Package Manager:

Install-Package WinUI.TableView

3. Add TableView to your XAML

In your MainWindow.xaml, add the WinUI.TableView control:

<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tv="using:WinUI.TableView"
    mc:Ignorable="d"
    Title="App1">

    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid>
        <tv:TableView ItemsSource="{x:Bind Items}" />
    </Grid>
</Window>

4. Bind data to TableView

Create a simple Model class with properties to represent in 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 MainWindow.xaml.cs, set up the data context and bind data to the TableView:

public sealed partial class MainWindow : Window
{
    public IList Items { get; }

    public MainWindow()
    {
        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 WinUI.TableView populated with the rows and cells from your Items collection. Here is the result running on the Desktop platform.