DataGrid

DataGrid is a feature-rich data grid modeled on MudBlazor’s DataGrid. On Blazor it’s a generic DataGrid<TItem> that renders a semantic HTML <table>; on MAUI it’s a pure cross-platform composite — a Grid header over a virtualized CollectionView, with no per-platform native handlers — so it looks and behaves identically on iOS, Android, Windows, and Mac.

• 
• 

Frameworks

.NET MAUI

Blazor

Features

• Typed & template columns — PropertyColumn (expression-bound, auto title/format) and TemplateColumn (custom cell/edit/header/footer content)
• Sorting — click headers; single or multi-sort with order badges
• Filtering — per-column filter menu, an inline filter row, or a toolbar quick-search; type-aware operators (string/number/date/bool/enum)
• Grouping — group by a column with expandable group rows
• Aggregates — footer and per-group Count / Sum / Average / Min / Max / Custom
• Selection — single or multiple with checkboxes and select-all
• Inline editing — cell and form edit modes with commit/cancel and edit events
• Paging — built-in pager with page-size selection
• Virtualization — for large datasets (free on MAUI via CollectionView)
• Column resize & reorder, sticky header, loading + empty states
• Server-side data via a ServerData delegate (GridState → GridData)
• Theming — surface/text/outline/primary colors follow the theme tokens (light/dark aware)

Blazor

DataGrid<TItem> is generic; declare columns as child components inside <Columns>. TItem cascades to the columns, so PropertyColumn only needs its Property expression.

<DataGrid TItem="Person" Items="people"
          SelectionMode="DataGridSelectionMode.Multiple"
          SortMode="DataGridSortMode.Multiple"
          FilterMode="DataGridFilterMode.Menu"
          Groupable="true"
          EditMode="DataGridEditMode.Form"
          Dense="true" Striped="true" Hover="true" Bordered="true"
          FixedHeader="true" Height="420px"
          ColumnResizeMode="DataGridColumnResizeMode.Column"
          DragDropColumnReordering="true"
          CommittedItemChanges="OnSaved">
    <Columns>
        <PropertyColumn Property="x => x.FirstName" Title="First" />
        <PropertyColumn Property="x => x.Age" Format="N0" />
        <PropertyColumn Property="x => x.Salary" Format="C0">
            <FooterTemplate>Total: @people.Sum(p => p.Salary).ToString("C0")</FooterTemplate>
        </PropertyColumn>
        <TemplateColumn Title="Status" Sortable="false" Filterable="false">
            <CellTemplate>
                <Pill Text="@(context.Item.Active ? "Active" : "Inactive")"
                      Type="@(context.Item.Active ? PillType.Success : PillType.Caution)" />
            </CellTemplate>
        </TemplateColumn>
    </Columns>
    <PagerContent>
        <DataGridPager TItem="Person" />
    </PagerContent>
</DataGrid>

Key grid parameters: Items, ServerData, SelectionMode, SelectedItem/SelectedItems, SortMode, FilterMode, QuickFilter, Groupable, Virtualize, EditMode, EditTrigger, ReadOnly, RowsPerPage, FixedHeader, Height, Dense/Striped/Bordered/Hover/Outlined, Loading, ColumnResizeMode, DragDropColumnReordering, and the edit events StartedEditingItem/CommittedItemChanges/CanceledEditingItem.

Paging is enabled by placing a <DataGridPager TItem="..." /> inside <PagerContent>.

MAUI

Use shiny:DataGrid with shiny:DataGridColumn / shiny:DataGridTemplateColumn children. Items are object (XAML-friendly, no generics); bind a column with PropertyName, and template cells bind to the data item directly.

<shiny:DataGrid ItemsSource="{Binding People}"
                SelectionMode="Multiple"
                SortMode="Multiple"
                FilterMode="Menu"
                Groupable="True"
                PageSize="20"
                EditMode="Form"
                AllowColumnResize="True"
                AllowColumnReorder="True"
                Striped="True" Bordered="True">
    <shiny:DataGridColumn Title="First" PropertyName="FirstName" Width="*" />
    <shiny:DataGridColumn Title="Age" PropertyName="Age" Width="Auto" />
    <shiny:DataGridColumn Title="Salary" PropertyName="Salary" StringFormat="{}{0:C0}" Width="*">
        <shiny:DataGridColumn.Aggregate>
            <shiny:DataGridAggregateDefinition Type="Sum" Format="C0" />
        </shiny:DataGridColumn.Aggregate>
    </shiny:DataGridColumn>
    <shiny:DataGridTemplateColumn Title="Status" Width="Auto" Editable="False">
        <shiny:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <shiny:PillView Text="{Binding StatusText}" Margin="12,8" />
            </DataTemplate>
        </shiny:DataGridTemplateColumn.CellTemplate>
    </shiny:DataGridTemplateColumn>
</shiny:DataGrid>

Key grid properties: ItemsSource, ServerData, SelectionMode, SelectedItem/SelectedItems, SortMode, FilterMode, Groupable, PageSize (0 = no paging), EditMode, EditTrigger, ReadOnly, AllowColumnResize, AllowColumnReorder, Dense/Striped/Bordered, ShowColumnHeaders, IsLoading, EmptyText, RowHeight, plus SelectionChanged and the edit events.

Behavior & platform nuances

• Sorting cycles ascending → descending → none on header tap; multi-sort shows order badges.
• Filtering: Menu opens a per-column popup with type-aware operators; Row shows inline inputs under the header; Toolbar shows a single quick-search box matching any column.
• Editing: on Blazor, Cell edits a single cell (commit on blur/Enter, cancel on Escape) and Form edits the whole row with Save/Cancel. On MAUI, both modes use inline-row editing (editors for the editable columns plus a Save/Cancel bar) — the natural touch model.
• Reorder: Blazor uses native HTML drag-and-drop on headers (DragDropColumnReordering); MAUI uses ‹ › reorder arrows (AllowColumnReorder).
• Virtualization: Blazor opt-in via Virtualize (best with FixedHeader + Height); MAUI is virtualized by default through CollectionView.

Note

MAUI string-path columns read values via reflection (the same trade-off MAUI’s own string bindings make). For full trimming / NativeAOT, set a column’s ValueGetter/ValueSetter/Comparer to avoid reflection entirely.

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install controls@shiny

View controls Plugin