Fabulous.Avalonia.DataGrid

DataGrid for Fabulous.Avalonia

The DataGrid control is a cross-platform view that displays repeating data in a customizable grid. The control can be styled, templated and bound.

The data grid needs to be bound to an observable collection in a view model that can be found in a related data context. Based on AvaloniaUI DataGrid.

How to use

• Add the Fabulous.Avalonia.DataGrid package to your project.
• Open Fabulous.Avalonia at the top of the file where you declare your Fabulous program (eg. Program.stateful).

open Fabulous.Aavalonia

open type Fabulous.Avalonia.View

Using the DataGrid Widget

Now you can use the DataGrid and AutoGeneratedDataGrid widgets in your Fabulous app as follows:

VStack() {
    DataGrid(model.People)

    (CustomDataGrid(model.People) {
        DataGridTextColumn("Name", Binding("Name"))
        DataGridTextColumn(TextBlock("Age"), Binding("Age"))
        DataGridCheckBoxColumn("IsMale", Binding("IsMale"))
    })
        .gridLinesVisibility(DataGridGridLinesVisibility.Horizontal)
        .borderThickness(1.0)
        .borderBrush(SolidColorBrush(Colors.Gray))
}

A full, working example is included in the DataGridPage sample

Other useful links:

• The official Fabulous website
• Get started

Additionally, we have the Fabulous Discord server where you can ask any of your Fabulous related questions.