DataGrid

Overview

The DataGrid control renders tabular data with a Material Design 3.0 aesthetic using SkiaSharp. It supports column headers, sortable columns by clicking headers, row selection with single and multi-select modes, and both vertical and horizontal scrolling. The grid is rendered entirely through SkiaSharp draw calls with no underlying data-bound grid framework — rows and columns are virtualized for performance with large data sets.

Cells are rendered using the DrawCell virtual method, which subclasses can override for custom cell painting (progress bars, icons, color swatches, etc.). Alternating row colors, grid lines, and header styling all follow the active Material theme.

Properties

DataGridColumn Model

Cell Rendering

By default, cell values are rendered as text using BodyMedium typography. The cell background alternates between Surface (selected/odd) and SurfaceVariant (even) when AlternateRowColor is enabled. Selected rows are highlighted with a translucent Primary state layer at 8% opacity.

For custom cell rendering, assign a CellRenderer delegate to a column. The delegate receives the canvas, the cell's bounding rectangle (already clipped), and the raw cell value. Use canvas transforms and save/restore within the delegate.

var progressColumn = new DataGridColumn
{
    HeaderText = "Progress",
    DataField = "PercentComplete",
    Width = 150,
    CellRenderer = (canvas, rect, value) =>
    {
        float percent = Convert.ToSingle(value) / 100f;
        float barWidth = rect.Width * percent;

        using var bgPaint = new SKPaint { Color = SKColors.LightGray };
        canvas.DrawRect(rect.Left, rect.Top + 8, rect.Width, rect.Height - 16, bgPaint);

        using var fillPaint = new SKPaint { Color = SKColors.Green };
        canvas.DrawRect(rect.Left, rect.Top + 8, barWidth, rect.Height - 16, fillPaint);
    }
};

Scroll Support

The DataGrid supports both vertical and horizontal scrolling when the content exceeds the control's visible area. Scroll behavior is controlled by these properties:

Scroll is handled by the InputManager. The grid responds to MouseWheel events for vertical scroll and Shift+MouseWheel for horizontal scroll. Touch scrolling with inertia is supported when the hosting application provides touch input.

Code Example

var data = new List<Dictionary<string, object>>
{
    new() { ["Id"] = 1, ["Name"] = "Alice", ["Dept"] = "Engineering", ["Salary"] = 95000 },
    new() { ["Id"] = 2, ["Name"] = "Bob",   ["Dept"] = "Design",      ["Salary"] = 82000 },
    new() { ["Id"] = 3, ["Name"] = "Carol", ["Dept"] = "Engineering", ["Salary"] = 105000 },
    new() { ["Id"] = 4, ["Name"] = "Dave",  ["Dept"] = "Marketing",   ["Salary"] = 78000 },
    new() { ["Id"] = 5, ["Name"] = "Eve",   ["Dept"] = "Design",      ["Salary"] = 91000 }
};

var grid = new DataGrid
{
    X = 20,
    Y = 60,
    Width = 700,
    Height = 400,
    SelectionMode = SelectionMode.Single,
    AlternateRowColor = true,
    Columns = new List<DataGridColumn>
    {
        new() { HeaderText = "ID",       DataField = "Id",     Width = 60,   Alignment = SKTextAlign.Center },
        new() { HeaderText = "Name",     DataField = "Name",   Width = 180 },
        new() { HeaderText = "Department", DataField = "Dept", Width = 200 },
        new() { HeaderText = "Salary",   DataField = "Salary", Width = 120,  Alignment = SKTextAlign.Right, FormatString = "C0" }
    },
    Rows = data.Cast<object>().ToList()
};

grid.Initialize();

grid.SelectedIndexChanged += (s, idx) =>
{
    if (idx >= 0)
    {
        var row = (Dictionary<string, object>)grid.Rows[idx];
        Console.WriteLine($"Selected: {row["Name"]}");
    }
};

drawingManager.AddComponent(grid);
drawingManager.RequestRedraw();

public record Employee(int Id, string Name, string Department, decimal Salary);

var employees = new List<Employee>
{
    new(1, "Alice", "Engineering", 95000m),
    new(2, "Bob",   "Design",      82000m),
    new(3, "Carol", "Engineering", 105000m)
};

var grid = new DataGrid
{
    X = 20, Y = 60,
    Width = 700, Height = 250,
    Columns = new List<DataGridColumn>
    {
        new() { HeaderText = "ID",   DataField = "Id", Width = 60 },
        new() { HeaderText = "Name", DataField = "Name", Width = 200 },
        new() { HeaderText = "Dept", DataField = "Department", Width = 200 },
        new() { HeaderText = "Salary", DataField = "Salary",
                Width = 120, Alignment = SKTextAlign.Right, FormatString = "C0" }
    },
    Rows = employees.Cast<object>().ToList()
};

grid.Initialize();
drawingManager.AddComponent(grid);