Table is unresponsive, always stuck in CardView

[Micovec]

Hello,

I can't figure out what I'm doing wrong but everytime I use a table it is rendered as CardView. Even in big resolutions, like over 2000 pixels.

I can force the table to be rendered as a table with RenderMode set to TableRenderMode.Table or RenderModeResponsiveWidth to BreakPoint.None but that breaks responsiveness and the table won't go to CardView on small screens (phones for example).

I've attached a basic example from Blazor Web App template with minimalistic set up.

BlazorApp1.zip

[Micovec]

Here's a screenshot of the table. As you can see the table won't convert to regular table even tho there's enough space.

[ArgoZhang]

@Micovec hi. thank you for this. I think you missing some code

Solution 1

<Routes @rendermode="new InteractiveServerRenderMode()" />

Solution 2

1. remove BootstrapBlazorRoot from Routes
2. add BootstrapBlazorRoot into Home

<BootstrapBlazorRoot>
    <Table TItem="Foo" Items="FooItems">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</BootstrapBlazorRoot>

do you have a try?

[Micovec]

Both solutions work, thank you!

But for my original case only the second solution is viable. I was using MAUI Hybrid App template from .NET 9.0 preview with cookie authentication and I couldn't use rendermode on routes because login page needs to be rendered statically.

I have one more follow up question: From my understanding does this mean BootstrapBlazorRoot needs to be used with InteractiveServerRenderMode only otherwise it won't work?

[ArgoZhang]

@Micovec Yes, you are right. BootstrapBlazorRoot must work correctly in SSR mode because it uses javascript invoke technology