Fluentui Blazor
Build strongly typed Blazor tables with FluentDataGrid columns, sorting, and custom cell templates without fighting the component API.
Overview
Fluentui-blazor is an agent skill for the Build phase that teaches correct FluentDataGrid and column patterns for Blazor table UIs.
Install
npx skills add https://github.com/github/awesome-copilot --skill fluentui-blazorWhat is this skill?
- Documents FluentDataGrid<TGridItem> with PropertyColumn, TemplateColumn, and SelectColumn as child components—not grid p
- Covers Sortable, Format, Comparer, IsDefaultSortColumn, and custom TemplateColumn render fragments with context
- Shows Actions columns with FluentButton and FluentBadge patterns for status cells
- Emphasizes critical rule: columns are declared inside the grid markup, not as C# properties
Adoption & trust: 8.6k installs on skills.sh; 34.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are wiring Blazor data tables but keep misconfiguring FluentDataGrid columns or sorting because the API expects child column components.
Who is it for?
Solo builders adding admin grids, CRUD lists, or dashboard tables in a Blazor + Fluent UI project.
Skip if: Teams on React, Vue, or plain HTML tables with no Blazor/Fluent UI in the stack.
When should I use this skill?
Implementing or refactoring Blazor pages that use FluentDataGrid and column child components.
What do I get? / Deliverables
After using the skill, your agent emits valid Razor with PropertyColumn, TemplateColumn, and action cells that match Fluent UI Blazor conventions.
- Correct FluentDataGrid Razor snippets
- Column definitions with sort and format options
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
How it compares
Component-pattern reference for Blazor grids—not a generic CSS table or AG Grid integration skill.
Common Questions / FAQ
Who is fluentui-blazor for?
Indie and solo developers building .NET Blazor frontends who use Fluent UI components and need authoritative DataGrid column syntax.
When should I use fluentui-blazor?
During Build → frontend when you implement lists, sortable columns, formatted fields, or per-row action buttons in FluentDataGrid.
Is fluentui-blazor safe to install?
Review the Security Audits panel on this Prism page and the upstream repo before adding it to your agent; treat it like any third-party skill package.
SKILL.md
READMESKILL.md - Fluentui Blazor
# FluentDataGrid `FluentDataGrid<TGridItem>` is a strongly-typed generic component for displaying tabular data. ## Basic Usage ```razor <FluentDataGrid Items="@people" TGridItem="Person"> <PropertyColumn Property="@(p => p.Name)" Sortable="true" /> <PropertyColumn Property="@(p => p.Email)" /> <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" /> <TemplateColumn Title="Actions"> <FluentButton OnClick="@(() => Edit(context))">Edit</FluentButton> </TemplateColumn> </FluentDataGrid> ``` **Critical**: Columns are child components, NOT properties. Use `PropertyColumn`, `TemplateColumn`, and `SelectColumn` within the grid. ## Column Types ### PropertyColumn Binds to a property expression. Auto-derives title from property name or `[Display]` attribute. ```razor <PropertyColumn Property="@(p => p.Name)" Sortable="true" /> <PropertyColumn Property="@(p => p.Price)" Format="C2" Title="Unit Price" /> <PropertyColumn Property="@(p => p.Category)" Comparer="@StringComparer.OrdinalIgnoreCase" /> ``` Parameters: `Property` (required), `Format`, `Title`, `Sortable`, `SortBy`, `Comparer`, `IsDefaultSortColumn`, `InitialSortDirection`, `Class`, `Tooltip`. ### TemplateColumn Full custom rendering via render fragment. `context` is the `TGridItem`. ```razor <TemplateColumn Title="Status" SortBy="@statusSort"> <FluentBadge Appearance="Appearance.Accent" BackgroundColor="@(context.IsActive ? "green" : "red")"> @(context.IsActive ? "Active" : "Inactive") </FluentBadge> </TemplateColumn> ``` ### SelectColumn Checkbox selection column. ```razor <SelectColumn TGridItem="Person" SelectMode="DataGridSelectMode.Multiple" @bind-SelectedItems="@selectedPeople" /> ``` Modes: `DataGridSelectMode.Single`, `DataGridSelectMode.Multiple`. ## Data Sources Two mutually exclusive approaches: ### In-memory (IQueryable) ```razor <FluentDataGrid Items="@people.AsQueryable()" TGridItem="Person"> ... </FluentDataGrid> ``` ### Server-side / Custom (ItemsProvider) ```razor <FluentDataGrid ItemsProvider="@peopleProvider" TGridItem="Person"> ... </FluentDataGrid> @code { private GridItemsProvider<Person> peopleProvider = async request => { var result = await PeopleService.GetPeopleAsync( request.StartIndex, request.Count ?? 50, request.GetSortByProperties().FirstOrDefault()); return GridItemsProviderResult.From(result.Items, result.TotalCount); }; } ``` ### EF Core Adapter ```csharp // Program.cs builder.Services.AddDataGridEntityFrameworkAdapter(); ``` ```razor <FluentDataGrid Items="@dbContext.People" TGridItem="Person"> ... </FluentDataGrid> ``` ## Pagination ```razor <FluentDataGrid Items="@people" Pagination="@pagination" TGridItem="Person"> ... </FluentDataGrid> <FluentPaginator State="@pagination" /> @code { private PaginationState pagination = new() { ItemsPerPage = 10 }; } ``` ## Virtualization For large datasets, enable virtualization: ```razor <FluentDataGrid Items="@people" Virtualize="true" ItemSize="46" TGridItem="Person"> ... </FluentDataGrid> ``` `ItemSize` is the estimated row height in pixels (default varies). Important for scroll position calculations. ## Key Parameters | Parameter | Type | Description | |---|---|---| | `Items` | `IQueryable<TGridItem>?` | In-memory data source | | `ItemsProvider` | `GridItemsProvider<TGridItem>?` | Async data provider | | `Pagination` | `PaginationState?` | Pagination state | | `Virtualize` | `bool` | Enable virtualization | | `ItemSize` | `float` | Estimated row height (px) | | `ItemKey` | `Func<TGridItem, object>?` | Stable key for `@key` | | `ResizableColumns` | `bool` | Enable column resize | | `HeaderCellAsButtonWithMenu` | `bool` | Sortable header UI | | `GridTemplateColumns` | `string?` | CSS grid-template-columns | | `Loading` | `bool` | Show loading indicator | | `ShowHover` | `bool` | Hi