CODEWITHSUNDEEP
blazorblazor-server-sidemudblazor
digi
digi

Reputation: 1

MudBlazor tables with Server Data

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?

Upvotes: 0

Views: 42

Answers (0)

Related Questions