●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Grouped data grid for project tasks with server-side reload, paging and sorting.
- Search field with debounce to trigger server reload.
- Group templates that display summary chips (total, status counts, priority counts).
- Toggle switches and buttons for enabling grouping and expanding/collapsing groups.
- Pager component for page navigation.
## Key components
- MudDataGrid<T> (MudDataGrid<ProjectTaskViewModel>)
- PropertyColumn for TaskName, ProjectName, Assignee, Status, Priority, DueDate
- MudTextField (search) with DebounceInterval and @bind-Value:after
- MudChip for group summaries
- MudIcon for group visuals
- MudButton, MudSwitch
- MudDataGridPager
## How it works
- ServerData callback (ServerReload) receives a GridState<ProjectTaskViewModel> and returns GridData<ProjectTaskViewModel>.
- Search uses a bound _searchString; OnSearch calls _dataGrid.ReloadServerData() to refresh results.
- Sorting maps SortDefinitions to an Expression<Func<ProjectTaskViewModel,object>> via GetSortExpression and applies OrderByDirection on the IQueryable.
- Grouping state uses @bind-Grouping, @bind-GroupByOrder and @bind-GroupExpanded on PropertyColumn to control which columns are grouped and their order/expansion.
- GroupTemplate blocks compute aggregates (counts by Status or Priority) from context.Grouping and render MudChip summary elements.
## Styling
- UI uses MudBlazor components and theme primitives.
- Utility classes like d-flex, flex-wrap, gap-2, mr-2, ml-2 appear in GroupTemplate markup for inline layout; these align with MudBlazor/Bootstrap-style utilities used in the demo.
- FixedHeader and responsive Height on MudDataGrid support scrolling; group templates use flexible layout allowing wrap on narrow widths.
## Reuse steps
1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (AddMudServices/AddMudBlazorDialog etc.).
2. Import MudBlazor namespaces in _Imports.razor and add the MudBlazor CSS/JS in index.html/_Host as required.
3. Copy ProjectTaskViewModel and the DataGridPivotView.razor component into the project and adjust namespaces.
4. Replace GetTasks() with a real data service (inject an API client) and implement server-side grouping/sorting if needed.
5. Wire authentication, localization (Spanish labels present), and any application state needed for permissions.
## Limitations & next steps
- This is a single-page demo generated by Instruct UI; backend APIs, authentication and persistence are not implemented.
- Grouping, sorting and paging are simulated client-side; large datasets should move grouping/aggregation to the server for performance.
- Consider adding virtualization, real-time updates (SignalR), export/CSV and column visibility controls for production use.
- Localize strings and validate DateOnly serialization when integrating with JSON APIs.