Search code examples
responsivemudblazor

How to prevent Mudblazor Mudtable to wrap table into card view on mobile phone

How can I prevent ModTable to automatically change the table view to a "card" view when displaying on a mobile phone. I would love to scroll horizontally through the table instead of having it as cards scrolling vertically.

enter image description here

enter image description here

Sorry for describing it so badly, it seems I'm missin the right terms.

Best regards radi5

Solution

  • From the docs

    The default table displays your data in simple rows and is responsive, it breaks into mobile layout on Breakpoint.Xs unless changed. Add the DataLabel property to your MudTd cells to properly display the column label when the table has changed to mobile layout.

    The table can be prevented from breaking into mobile layout by setting the Breakpoint to Breakpoint.None.

    So you will need to set the Breakpoint property to none.

    <MudTable Items="@Elements.Take(4)" Breakpoint="Breakpoint.None">
    <!-- table content -->
</MudTable>

    MudBlazor snippet