MudBlazor: How to create a custom table with MudTable using colspan and rowspan?

Question

I Would like to convert my previous html table below to MudTable. But I can't figure out how to actually do it using the MudBlazor library. In HTML, I used rowspan and colspan to achieve the table below. I'm new using Mudblazor library but I searched a lot to find a solution for this but I couldn't find. Hope someone can help me.

Target Table

My attempt

<MudTable Items="@selectedDriver.Capability.cActions"
      Class="mt-5"
      Dense="@true" Hover="@true" Bordered="@true" Striped="@true" ReadOnly="@dronly" CanCancelEdit="@true"
      RowEditPreview="BackupActionItem"
      RowEditCancel="ResetActionItemToOriginalValues"
      RowEditCommit="ActionItemHasBeenCommitted"
      CustomHeader="@true"
      @ref="actionTable">
<HeaderContent>
    <MudTHeadRow>
        <MudTh>No.</MudTh>
        <MudTh>Action</MudTh>
        <MudTh colspan="2">Parameters</MudTh>
        <MudTh>Return Type</MudTh>
    </MudTHeadRow>
</HeaderContent>

<RowTemplate>
    @foreach (var item in context.Parameters.Select((value, i) => new { i, value }))
    {
        var index = item.i;
        var parameter = item.value;
        var paramCount = context.Parameters.Count();

        @if (index == 0)
        {
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="No.">*</MudTd>
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="Name">@context.Name</MudTd>
        }

        <MudTd DataLabel="Parameter">@parameter.Name</MudTd>
        <MudTd DataLabel="Type">@parameter.Type.ToString()</MudTd>

        @if (index == 0)
        {
            <MudTd rowspan="@(paramCount)" scope="row" DataLabel="Name">@context.ReturnType.ToString()</MudTd>
        }
    }
</RowTemplate>

Result

Answer 1

I suggest you embed another <table> in the row template. Here is a fiddle for you to play around with: https://try.mudblazor.com/snippet/ckGPPbwepSPTlFpg

It looks like this:

Complete example:

<MudTable Items="@actions"
      Class="mt-5"
      Dense="@true" Hover="@true" Bordered="@true" Striped="@true"  CanCancelEdit="@true"
      CustomHeader="@true"
      >
<HeaderContent>
    <MudTHeadRow>
        <MudTh>No</MudTh>
        <MudTh>Action</MudTh>
        <MudTh>Parameters</MudTh>
        <MudTh>Return Type</MudTh>
    </MudTHeadRow>
</HeaderContent>

<RowTemplate>
    <MudTd DataLabel="No">@context.No</MudTd>
    <MudTd DataLabel="Action">@context.Action</MudTd>
    <MudTd DataLabel="Parameters">
        <table>
            @foreach (var p in context.Params)
            {
               <tr  style="border: 1px solid silver;  border-collapse: collapse;">
                   <td class="pa-1">@p.No</td>
                   <td class="pa-1">@p.Name</td>
                   <td class="pa-1">@p.Type</td>
               </tr>     
            }
        </table>
    </MudTd>
    <MudTd DataLabel="ReturnType">@context.ReturnType</MudTd>
</RowTemplate>

</MudTable>

@code {
    public class MyAction {
        public int No {get; set;}
        public string Action {get; set;}
        public List<Param> Params {get; set;} = new List<Param>();
        public string ReturnType {get; set;} = "void";
    }
    public class Param {
        public int No {get; set;}
        public string Name {get; set;}
        public string Type {get; set;}="string";
    }

    List<MyAction> actions = new List<MyAction>() {
        new MyAction { No = 1, Action="HelloWorld",  },
        new MyAction { No = 2, Action="SomeFunction",  Params=new List<Param> {
                new Param { No=1, Name="param1", },                
                new Param { No=2, Name="param2", },                
                new Param { No=3, Name="param3", },                
                new Param { No=4, Name="param4", },                
            },
        },
    };
}