Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

MudBlazor tables with Server Data

$
0
0

We started a Blazor project using MudBlazor library. And we faced with issues with Server Data usage for filtering/sorting/pagination.

Idealy, we would like to extract table implementations to separate generic MudTable components (one general and one for filtering/pagination on Server side). Is there any implementations or instructions how to achieve this?

We want to achieve something similar as described here:MudBlazor Generic Server Side Table Pagination Issues

Currently, we use implementation without server data:

<MudTable Items="@vm.Users" Context="user" Filter="@FilterFunc" Dense Outlined Square Elevation="0" Class="px-4 py-2"              Loading="vm.Loading" LoadingProgressColor="Color.Primary"><HeaderContent><MudTh><MudTableSortLabel SortBy="new Func<ManageUsersViewModel.User, object>(x=>x.Email)">E-mail Address</MudTableSortLabel></MudTh><MudTh><MudTableSortLabel SortBy="new Func<ManageUsersViewModel.User, object>(x=>x.Role)">Role</MudTableSortLabel></MudTh><MudTh><MudTableSortLabel SortBy="new Func<ManageUsersViewModel.User, object>(x=>x.Active)">Active</MudTableSortLabel></MudTh><MudTh>Actions</MudTh></HeaderContent><RowTemplate><MudTd DataLabel="Email">@user.Email</MudTd><MudTd DataLabel="Role">@user.Role</MudTd><MudTd DataLabel="Active">@(user.Active ? "Yes" : "No")</MudTd><MudTd><MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Edit" Color="Color.Primary" OnClick="(() => EditUser(user))"></MudIconButton></MudTd></RowTemplate><PagerContent><MudTablePager PageSizeOptions="@(new int[]{25, 100})" /></PagerContent><LoadingContent><MudText>Loading...</MudText></LoadingContent><NoRecordsContent><MudText>No matching records found</MudText></NoRecordsContent></MudTable>

So, any examples how to use ServerData with filtering/sorting/pagination?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>