Introducing TableView: a native data table for WinUI 3 📊

[Pranav Gupta (pranav-gupta-msft)]

Hello WinUI community!

TableView is experimental and still a work in progress. We're sharing it early so the community can try it, find rough edges, and help shape it through feedback and bug reports. APIs and behavior may change. If something doesn't work as expected, please file an issue.

For a long time, the community has asked for data table support in WinUI 3. As a first step in that direction, we're sharing the TableView control as an experimental release.

Windows App SDK 2.5.4-experimental includes TableView, a first-party, Fluent-styled table control in the Microsoft.UI.Xaml.Controls.Tabular namespace. It brings column templates, sorting, filtering, grouping and cell editing together in a native WinUI 3 control.

Work is already in progress to support hierarchical views and app context menus in upcoming iterative updates.

What we built with it

To explore TableView in a realistic scenario, we built Contoso Sales Ledger, a pipeline ledger for a regional sales team. It brings together 5,000 deals and eleven columns, with a strip of KPI cards above the table built from standard WinUI controls.

The full-ledger screenshots include app-defined toolbar controls; these are not built-in TableView UI.

Columns are declared in XAML. Use a TableViewTextColumn for plain values, or a TableViewTemplateColumn when a cell needs real UI. In the ledger, templates render an initials avatar next to the account name, a colored pill for the deal stage and a progress bar for win probability. Rows are virtualized, so the control does not need to create a visual row for every deal at once.

Start with a C# WinUI 3 project named SalesLedger, using the package and resource dictionaries in Project setup below. The excerpts are point-in-time versions: each section includes only the code needed for the feature being introduced. Existing Window tags, C# imports and namespace declarations are omitted.

In MainWindow.xaml, replace the content inside your existing Window with the XAML below. In MainWindow.xaml.cs, keep the imports and namespace, replace the existing MainWindow class, and add Deal alongside it in the same namespace. The code-behind only creates the data and assigns it to the table; it has no sorting, filtering or grouping logic.

MainWindow.xaml - content inside Window

<tv:TableView x:Name="Ledger" Margin="24"
              SelectionMode="Single" IsReadOnly="True"
              CanUserSortColumns="True" Density="Standard"
              GridLinesVisibility="Horizontal">
    <tv:TableView.EmptyTemplate>
        <DataTemplate>
            <TextBlock Text="No deals to display."
                       HorizontalAlignment="Center" Margin="24" />
        </DataTemplate>
    </tv:TableView.EmptyTemplate>
    <tv:TableViewTextColumn Header="Deal" Binding="{Binding Name}"
                            Width="*" MinWidth="220" FrozenEdge="Leading"
                            CellToolTipBinding="{Binding Owner}" />
    <tv:TableViewTemplateColumn Header="Stage" SortMemberPath="Stage" Width="150">
        <tv:TableViewTemplateColumn.CellTemplate>
            <DataTemplate>
                <Border Padding="8,2" CornerRadius="10" Margin="8,0"
                        HorizontalAlignment="Left" VerticalAlignment="Center"
                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
                    <TextBlock Text="{Binding Stage}" />
                </Border>
            </DataTemplate>
        </tv:TableViewTemplateColumn.CellTemplate>
    </tv:TableViewTemplateColumn>
    <tv:TableViewTemplateColumn Header="Amount" SortMemberPath="Amount" Width="150">
        <tv:TableViewTemplateColumn.CellTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding AmountText}" FontWeight="SemiBold"
                           HorizontalAlignment="Right" VerticalAlignment="Center"
                           Margin="12,0" />
            </DataTemplate>
        </tv:TableViewTemplateColumn.CellTemplate>
    </tv:TableViewTemplateColumn>
</tv:TableView>

MainWindow.xaml.cs - data only

public sealed partial class MainWindow : Window
{
    private readonly List<Deal> _deals = new()
    {
        new("Cloud migration", "Maya Chen", "Proposal", 48500),
        new("Office refresh", "Alex Rivera", "Qualified", 9200),
        new("Support renewal", "Jordan Lee", "Won", 18000),
        new("Retail expansion", "Sam Patel", "Negotiation", 72500),
        new("Cloud backup", "Alex Rivera", "Prospecting", 6500),
        new("Security review", "Maya Chen", "Qualified", 12500),
        new("Training rollout", "Sam Patel", "Proposal", 24000),
        new("Network upgrade", "Jordan Lee", "Won", 36000),
        new("Cloud analytics", "Maya Chen", "Negotiation", 54000),
        new("Design workshop", "Alex Rivera", "Prospecting", 4500),
        new("Store launch", "Sam Patel", "Qualified", 28000),
        new("Service extension", "Jordan Lee", "Proposal", 15500),
    };

    public MainWindow()
    {
        InitializeComponent();
        Ledger.ItemsSource = _deals;
    }
}

[Bindable]
public sealed class Deal
{
    public string Name { get; }
    public string Owner { get; }
    public string Stage { get; }
    public double Amount { get; }
    public string AmountText => Amount.ToString("C0", CultureInfo.GetCultureInfo("en-US"));

    public Deal(string name, string owner, string stage, double amount)
    {
        Name = name;
        Owner = owner;
        Stage = stage;
        Amount = amount;
    }
}

Run the app now: it displays twelve deals in their original list order. ItemsSource supplies the rows; the XAML bindings only describe how to display each one. The model contains just the properties used by these columns, including Owner for the Deal tooltip.

↕️ Sorting that understands your data

Click a column header to sort by that column. TableView's built-in header UI sorts one column at a time; choosing another column replaces the current sort.

No additional code-behind is needed for header-click sorting in the example above. CanUserSortColumns is enabled; text columns use their bindings, and template columns use SortMemberPath. Amount sorts by the numeric Amount property rather than the formatted AmountText.

The GIF shows the full ledger demo, including its app-defined sorting controls.

🔎 Filter and group

TableViewSource combines filtering, sorting and grouping. Text matching is implemented by the app's filter predicate, not by a separate TableView search feature. The full ledger combines a text box with a Region picker and updates its KPI cards for matching deals.

For this next step, replace the content inside Window and the MainWindow/Deal class definitions with the matching excerpts below. Keep the existing Window header and C# imports/namespace. Only now do we add a text box, a Clear button and their handlers. The Region property and its sample values are also introduced here, because grouping now needs them. The Amount sort from the preceding step is retained.

MainWindow.xaml - add the filtering controls

<Grid Padding="24" RowSpacing="12">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid ColumnSpacing="12">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <TextBox x:Name="FilterBox" PlaceholderText="Filter by deal or owner"
                 AutomationProperties.Name="Filter by deal or owner"
                 TextChanged="FilterBox_TextChanged" />
        <Button Grid.Column="1" Content="Clear" Click="Clear_Click" />
    </Grid>
    <tv:TableView x:Name="Ledger" Grid.Row="1"
                  SelectionMode="Single" IsReadOnly="True"
                  CanUserSortColumns="True" Density="Standard"
                  GridLinesVisibility="Horizontal">
        <tv:TableView.EmptyTemplate>
            <DataTemplate>
                <TextBlock Text="No matching deals. Try another filter."
                           HorizontalAlignment="Center" Margin="24" />
            </DataTemplate>
        </tv:TableView.EmptyTemplate>
        <tv:TableViewTextColumn Header="Deal" Binding="{Binding Name}"
                                Width="*" MinWidth="220" FrozenEdge="Leading"
                                CellToolTipBinding="{Binding Owner}" />
        <tv:TableViewTemplateColumn Header="Stage" SortMemberPath="Stage" Width="150">
            <tv:TableViewTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Border Padding="8,2" CornerRadius="10" Margin="8,0"
                            HorizontalAlignment="Left" VerticalAlignment="Center"
                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
                        <TextBlock Text="{Binding Stage}" />
                    </Border>
                </DataTemplate>
            </tv:TableViewTemplateColumn.CellTemplate>
        </tv:TableViewTemplateColumn>
        <tv:TableViewTemplateColumn Header="Amount" SortMemberPath="Amount" Width="150">
            <tv:TableViewTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding AmountText}" FontWeight="SemiBold"
                               HorizontalAlignment="Right" VerticalAlignment="Center"
                               Margin="12,0" />
                </DataTemplate>
            </tv:TableViewTemplateColumn.CellTemplate>
        </tv:TableViewTemplateColumn>
    </tv:TableView>
</Grid>

MainWindow.xaml.cs - add filtering and grouping

public sealed partial class MainWindow : Window
{
    private readonly List<Deal> _deals = new()
    {
        new("Cloud migration", "Maya Chen", "West", "Proposal", 48500),
        new("Office refresh", "Alex Rivera", "East", "Qualified", 9200),
        new("Support renewal", "Jordan Lee", "North", "Won", 18000),
        new("Retail expansion", "Sam Patel", "South", "Negotiation", 72500),
        new("Cloud backup", "Alex Rivera", "East", "Prospecting", 6500),
        new("Security review", "Maya Chen", "West", "Qualified", 12500),
        new("Training rollout", "Sam Patel", "South", "Proposal", 24000),
        new("Network upgrade", "Jordan Lee", "North", "Won", 36000),
        new("Cloud analytics", "Maya Chen", "West", "Negotiation", 54000),
        new("Design workshop", "Alex Rivera", "East", "Prospecting", 4500),
        new("Store launch", "Sam Patel", "South", "Qualified", 28000),
        new("Service extension", "Jordan Lee", "North", "Proposal", 15500),
    };
    private TableViewSource? _source;

    public MainWindow()
    {
        InitializeComponent();
        _source = TableViewSource.From(_deals);
        _source.Sort(nameof(Deal.Amount), SortDirection.Descending);
        Ledger.ItemsSource = _source;
    }

    private void FilterBox_TextChanged(object sender, TextChangedEventArgs e)
    {
        // TextChanged can run before the constructor has created the source.
        if (_source is null)
        {
            return;
        }

        string text = FilterBox.Text.Trim();
        if (text.Length == 0)
        {
            _source.ClearFilter();
        }
        else
        {
            _source.Filter(new TableViewPredicate(item =>
                ((Deal)item).Name.Contains(text, StringComparison.OrdinalIgnoreCase) ||
                ((Deal)item).Owner.Contains(text, StringComparison.OrdinalIgnoreCase)));
        }

        // Reapply grouping before sorting, without retaining earlier shaping operations.
        _source.ClearSort();
        _source.ClearGroupBy();
        _source.GroupBy(new TableViewKeySelector(item => ((Deal)item).Region));
        _source.Sort(nameof(Deal.Amount), SortDirection.Descending);
    }

    private void Clear_Click(object sender, RoutedEventArgs e) => FilterBox.Text = string.Empty;
}

[Bindable]
public sealed class Deal
{
    public string Name { get; }
    public string Owner { get; }
    public string Region { get; }
    public string Stage { get; }
    public double Amount { get; }
    public string AmountText => Amount.ToString("C0", CultureInfo.GetCultureInfo("en-US"));

    public Deal(string name, string owner, string region, string stage, double amount)
    {
        Name = name;
        Owner = owner;
        Region = region;
        Stage = stage;
        Amount = amount;
    }
}

Entering Cloud filters the view to three deals across two regions. Clear restores all twelve deals, still grouped by region. Each text change reapplies the filter and grouping, with descending Amount order within each group. No Matches helper or Region picker is needed for this example.

Grouping takes a key selector, and the runnable example uses TableView's built-in group headers. The full ledger adds a GroupHeaderTemplate to present each region with its deal count and open pipeline. TableView supplies the group key and item count; the app calculates the pipeline total. Groups collapse and expand, and the sort order applies within each group.

✏️ Editing with validation

The runnable examples above remain read-only. The editing workflow shown here belongs to the full ledger application.

Set IsReadOnly="False" and give a template column a CellEditingTemplate to make its cells editable. Start an edit with a double-click or F2, commit with Enter, or cancel with Esc.

CellEditEnding lets your app veto a commit. Check that EditAction is Commit, validate the proposed value and set args.Cancel = true to keep the editor open when the value is invalid. Validate the pending editor value rather than assuming it has already reached the data item.

In the ledger, entering a negative amount turns the editor's border red, shows an error icon and opens an InfoBar explaining the rule. The validation rule and feedback UI belong to the app; TableView provides the editing lifecycle.

Frozen columns, density and tooltips

Wide tables are easier to read when the identifying column stays put. With FrozenEdge="Leading", the Deal column stays pinned while you scroll across the rest of the ledger.

Density switches between Compact, Standard and Comfortable with one property. Choose tighter rows for a data-heavy screen or more spacious rows for touch interaction.

HeaderToolTip and CellToolTipBinding add context without cluttering the table, from an explanation of a column's sort order to extra details about a deal.

Try it out

Install Microsoft.WindowsAppSDK 2.5.4-experimental, read the release notes and explore the experimental Tabular API reference.

For this release, use WindowsAppSDKSelfContained=true along with the resource merge to avoid the framework-dependent startup issue reported in #12115. The setup below includes both.

Project setup

Create a C# WinUI 3 app named SalesLedger with Microsoft.WindowsAppSDK 2.5.4-experimental. Keep the template's App.xaml.cs.

• Project: in PropertyGroup, set WindowsAppSDKSelfContained=true, WindowsPackageType=None and EnableMsixTooling=false.
• F5: in Properties\launchSettings.json, use an unpackaged profile with commandName set to Project, and select it in Visual Studio.
• XAML: merge XamlControlsResources and TabularControlsResources in application resources; add xmlns:tv="using:Microsoft.UI.Xaml.Controls.Tabular" to the existing Window.
• C# imports: System, System.Collections.Generic, System.Globalization, Microsoft.UI.Xaml, Microsoft.UI.Xaml.Controls, Microsoft.UI.Xaml.Controls.Tabular and Microsoft.UI.Xaml.Data.

💬 Tell us what you think

TableView is still experimental. There are rough edges, and the examples above aren't a claim that every scenario is ready. Your feedback helps us understand where the control needs more work.

We're grateful to everyone who has already tried TableView and filed reports. From early feedback, we've identified enhancements, and these will be fixed as part of upcoming releases. Please keep the feedback coming.

Here are some of the bugs the community has reported:

• #12358: The TableView's Indicator moves along with the horizontal scrollbar
• #12354: TableView inline editing does not abide any design principles to make it feel like part of a polished control
• #12353: TableView has an extra border on the right side of the table
• #12352: TableView group by functionality is not displaying the group name
• #12351: TableView is missing the bottom border on the header
• #12310: TableView resize edge has wrong cursor
• #12240: TableView: selection indicator different than ListView
• #12115: Experimental TableView crashes in a blank WinUI 3 application

The community has also proposed additional functionality:

• #12221: Proposal: Add extended functionality to select an item programatically to the TableView control

Check existing TableView issues first: if you encounter the same problem, add your reproduction details there; for a different problem, file a new issue. Include the Windows App SDK version, steps to reproduce, what you expected and what happened, and a minimal repro or relevant screenshot where possible. You can also share broader feedback in WinUI discussions.

Pranav Gupta
Team WinUI 💙