MudTable Performance bad when changing data-CodePudding

We use a MudTable to display 100 rows of data. It's not the fastest and initially takes about 2 seconds to load. The problem is, if we change the data, when the user changes the page, it takes about 15 seconds to render the new data.Even if it's still the same amount of rows, it's much slower. We use the ServerData method to retrieve the data. I also removed all other properties from the MudTable to exclude possible issues.

I know MudTable is not the fastest when it comes to rendering, but for me it doesn't make any sense that it takes longer to render data, if the table is not initially rendered.

Does anyone know the cause of this issue and a possible solution?

CodePudding user response：

I found a solution which worked for me. I already posted a way to improve performance here: https://github.com/MudBlazor/MudBlazor/issues/2301#issuecomment-1165473531

For me this seems to improve the most.

@{
RenderFragment<Model> EditLink = context => __builder =>
{
<a href="@context.EditLink"
                    @onclick="...">
                    @context.LinkText
</a>
};
}

<MudTable>
...
<MudTd @onmouseover="!context.RenderColumn1 ? () => context.RenderColumn1 = true : null">
if(context.RenderColumn1)
{
    <MudTooltip Text="@context.TooltipText">
        <ChildContent>
            @EditLink(context)
        </ChildContent>
    </MudTooltip>
}
else
{
    @EditLink(context)
}
</MudTd>
...
</MudTable>

The performance is improved by rendering complex UI elements only when the column is focussed. In this example it's a MudTooltip. This improves initial load and reload performance of the table. Whenever you focus a column, a property (RenderColumn1 ) is changed and with the event the UI is automatically updated. To prevent the UI from updating again, the event is set to null. It's also important the the property is part of the context model. You can also use a Dictionary where you fill in RenderModels which contains the properties for rendering and retrieve it on each row. Or you can also use a composite Model (row data, render info). This can be used for complex elements like MudToolTip, MudMenu etc. The idea is to show placeholders first. For a MudMenu you could just display a simple Icon initially. Of course you should also check this: https://docs.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-6.0 But for me this didn't do a lot about performance. Also virtualization might be laggy, depending on the content of your columns.

With this I was able to improve render time for my table from 13 seconds to nearly 1 second.