A light weight TableView component for WinUI3
MIT License
WinUI.TableView
is a lightweight and fast data grid control made for WinUI apps. It is easy to use, and capable of handling large number of items with a focus on performance. It's derived from ListView
so you will experience fluent look and feel in your project. It comes with all the essential features you need, plus extras like an Excel like column filter, options buttons (for columns and the TableView) and easy data export.
ShowExportOptions = true
.You can install the WinUI.TableView
NuGet package using the NuGet Package Manager or by running the following command in the Package Manager Console:
Install-Package WinUI.TableView
If you don't already have a WinUI 3 project, create one in Visual Studio.
WinUI.TableView
to Your XAMLIn 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:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:tableView="using:WinUI.TableView">
<Grid>
<tableView:TableView x:Name="MyTableView"
ItemsSource="{x:Bind ViewModel.Items}"
AutoGenerateColumns="True" />
</Grid>
</Window>
TableView
In your MainPage.xaml.cs
, set up the data context and bind data to the TableView
:
public sealed partial class MainWindow : Window
{
public MainViewModel ViewModel { get; } = new MainViewModel();
public MainWindow()
{
this.InitializeComponent();
}
}
Create a simple MainViewModel
with a collection of items to display:
public class MainViewModel
{
public ObservableCollection<Item> Items { get; set; }
public MainViewModel()
{
Items = new ObservableCollection<Item>
{
new Item { Name = "Item 1", Price = 10.0, Quantity = 1 },
new Item { Name = "Item 2", Price = 15.0, Quantity = 2 },
// Add more items here
};
}
}
public class Item : INotifyPropertyChanged
{
private string _name;
private double _price;
private int _quantity;
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));
}
}
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
Build and run your application. You should see the TableView
populated with the rows and cells from your ViewModel
.
You can customize the appearance and behavior of the TableView
by modifying its properties, templates, and styles. For example:
<tableView:TableView x:Name="MyTableView"
ItemsSource="{x:Bind ViewModel.Items}"
AutoGenerateColumns="False">
<tableView:TableView.Columns>
<tableView:TableViewTextColumn Header="Name" Binding="{Binding Name}" />
<tableView:TableViewNumberColumn Header="Price" Binding="{Binding Price}" />
<tableView:TableViewTemplateColumn Header="Quantity">
<tableView:TableViewTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Quantity}" />
</DataTemplate>
</tableView:TableViewTemplateColumn.CellTemplate>
<tableView:TableViewTemplateColumn.EditingTemplate>
<DataTemplate>
<NumberBox Value="{Binding Quantity, Mode=TwoWay}" />
</DataTemplate>
</tableView:TableViewTemplateColumn.EditingTemplate>
</tableView:TableViewTemplateColumn>
</tableView:TableView.Columns>
</tableView:TableView>
Contributions are welcome from the community! If you find any issues or have suggestions for improvements, please submit them through the GitHub issue tracker or consider making a pull request.
This project is licensed under the MIT License.