Confirm?

Are you sure you want to proceed?
F
Felipe De La Maza

Agregar Columnas de Certificaciones y

Clone & Customize via AI

The MudBlazor Products List displays a selectable, paged product table with MudTable sorting and search. It uses MudTextField for filtering and MudMenu for document downloads, built with MudBlazor components.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Product listing table with column sorting, fixed header and pager. - Search/filter input bound to the table filter. - Multi-row selection and checkboxes for bulk selection. - Per-row MudMenu controls to download certifications and technical sheets. - Inline sample data populated in OnInitialized for demo and formatting using CultureInfo (es-ES) for currency. ## Key components - MudContainer, MudGrid, MudItem, MudPaper - MudTable<T> with MudTableSortLabel, MudTablePager, HeaderContent, RowTemplate - MudTextField (search) with @bind-Value - MudButton, MudIconButton, MudMenu, MudMenuItem - MudTd, MudTh, MudText ## How it works - Items property of MudTable is bound to a List<ProductViewModel> populated in OnInitialized; sample data is in-memory. - Search uses MudTextField with @bind-Value to _searchString and MudTable.Filter set to FilterFunc to perform client-side filtering. - Selection uses MultiSelection and @bind-SelectedItems with a HashSet<ProductViewModel> for multi-row selection. - Column sorting uses MudTableSortLabel with lambda SortBy expressions; paging is handled by MudTablePager. - Download menus render MudMenu/MudMenuItem with Href and Target="_blank" for document links. - Price formatting calls ToString("N2", new CultureInfo("es-ES")) in the RowTemplate for locale-aware currency display. ## Styling - UI uses MudBlazor components and theme tokens; minimal inline styles apply to the primary action button and icon buttons. - Layout relies on MudGrid/MudItem for responsive alignment; MudTable uses FixedHeader and a Height calculated as `calc(100vh - 220px)` for full-page behavior. - Icons use Icons.Material.Filled references embedded in components. ## Reuse steps 1. Add the MudBlazor NuGet package and register services (builder.Services.AddMudServices()) and MudBlazor styles in host page. 2. Import MudBlazor namespace in _Imports.razor or component with @using MudBlazor. 3. Copy ProductViewModel and Documento models and adapt fields to match backend DTOs. 4. Replace the in-memory _products population with an injected data service (e.g., IProductService) and call in OnInitializedAsync. 5. Wire create/edit dialogs or navigation for the "Nuevo" button, and secure document URLs via backend storage. ## Limitations & next steps - This sample is a single page with in-memory data; server-side paging, sorting, and filtering are not implemented. - No create/edit forms, validation EditForm, or authentication/authorization wiring is provided. - Document download links are static; replace with secured endpoints or blob storage links in production. - Consider adding EditForm validation, server APIs for large datasets, and localization registration for CultureInfo usage. Secondary keywords: MudTable sorting, MudTextField search, MudMenu downloads.