Confirm?

Are you sure you want to proceed?
L
Lukas Stoecklein

MudBlazor Table with Tailwind CSS

Clone & Customize via AI

MudBlazor Data Table demonstrating a pageable, filterable MudTable with MudTextField search and row selection. Includes toggles to switch dense, hover, striped and bordered table styles.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - A pageable, filterable data table showing periodic elements. - Client-side search using a MudTextField that filters rows via a FilterFunc. - Row selection bound with @bind-SelectedItem and a selected-item display. - UI switches to toggle dense, hover, striped, and bordered table styles. - Simulated async data loading in OnInitializedAsync. ## Key components - MudTable, MudTablePager - MudTextField (search) and MudSwitch (toggles) - MudPaper, MudTh, MudTd, MudSpacer, MudText - C# model: Element class for table rows ## How it works - Items are provided as an IEnumerable<Element> and populated in OnInitializedAsync (simulated delay). - Search uses a FilterFunc(Element) method; MudTable applies that function via the Filter parameter. - Selection uses @bind-SelectedItem to keep track of the currently selected Element. - UI booleans (_dense, _hover, _striped, _bordered) are bound to MudSwitch components to change table rendering at runtime. - Pagination is handled by MudTablePager embedded in PagerContent; paging state is managed by MudTable. ## Styling - Uses MudBlazor components and theme styling; no Tailwind or Bootstrap classes detected. - Layout uses MudPaper wrapper and MudTable built-in styles; the table is responsive according to MudBlazor's components. ## Reuse steps 1. Add the MudBlazor NuGet package to the project. 2. Register MudBlazor services in Program.cs (AddMudServices or equivalent) and configure the MudBlazor theme if needed. 3. Add @using MudBlazor and import the MudBlazor CSS in index.html/_Host.cshtml. 4. Copy the Element model and the Razor component; adjust the data source to use real services or API calls. 5. Wire selection and events to application state or dialogs as required. ## Limitations & next steps - This is a single self-contained page generated by Instruct UI; it simulates data load rather than calling a real API. - Authentication, API services, and persistence are not included and must be wired by the host app. - Consider adding server-side paging, sorting callbacks, column templates for actions, and unit tests for the FilterFunc when integrating into a larger app.