Blazor Table Component with fixed header and columns

Question

I'm wondering if there's a Blazor component framework just like the Ant design's table component,which has fixed header and columns both sides.

Or can you tell me if there's any method to fix my columns? My table consists several different self-defined components.These components make up the whole table.Part of the code is as follows.(I use two tables to complete the fixed header function.)

<div id="KeyData" class="text-left table-container">
        <div class="head-container text-left">
            <table class="head-table" style="border:2px solid black;font-weight:bold;font-size:12px" cellspacing="0" cellpadding="0" border="1" width="@(1000+200*VarientCount)">
                <tr class="text-center" style="background-color: #99CCFF;">
                    <th width="600" colspan="3" rowspan="2">描述 <br> Description </th>
                    <th width="200" style="background-color: #FFFF99" colspan="@VarientCount">
                        变量 / Variant
                        <MatButton  OnClick="AddVariant">Add</MatButton>
                    </th>

                    <th width="200" rowspan="2">单位  <br> Unit</th>

                    <th width="200" rowspan="2">备注  <br> Comments</th>
                </tr>
                <tr class="text-center" style="background-color: #FFFF99">

                    @for (int i = 0; i < VarientCount; i++)
                    {
                        var iCopy = i;
                        <th width="200">
                            @(i + 1)
                            <MatIconButton Icon="clear" OnClick="@(()=>RemoveVariant(iCopy))" Class="after"></MatIconButton>
                        </th>
                    }
                </tr>
            </table>
        </div>
        <div class="content-container text-left">
            <table class="content-table" style="border:2px solid black;font-weight:bold;font-size:12px" cellspacing="0" cellpadding="0" border="1" width="@(1000+200*VarientCount)">
                <KeyDataSupplierInfo KeyData="@l_VKDTI_TSI" />
                <KeyDataVehicleInfo KeyData="@l_VKDTI_VI" />
                <KeyDataDimension KeyData="@l_VKDTI_DIMENSIONS" />
            </table>
        </div>
    </div>

KeyDataSupplierInfo Component as follows(Part code)

<tr>
    <td style="background-color: #CCFFFF" width="200" class="text-center" rowspan="8">
        Third-party Supplier Info<br>
        第三方供应商信息*
    </td>

    <td style="background-color: #CCFFFF" width="400" class="text-center" colspan="2">
        EMS <br>
    </td>

    @for (int i = 0; i < KeyData.Count; i++)
    {
        int index = i;
        <td width="200" class="text-center bgcolor "  >
            <MatTextField @bind-Value=@KeyData[index].EMS />
        </td>

    }
   
    <td style="background-color: #CCFFFF" width="200" class="text-center">
        -
    </td>

    <td style="background-color: #CCFFFF" width="200" class="text-center" rowspan="8">
        备注：品牌厂商、软件版本号
    </td>
</tr>



<tr>
    <td style="background-color: #CCFFFF" width="400" class="text-center" colspan="2">
        TCU <br>
    </td>

    @for (int i = 0; i < KeyData.Count; i++)
    {
        int index = i;
        <td width="200" class="text-center"  >
            <MatTextField @bind-Value=@KeyData[index].TCU />
        </td>
    }

    <td style="background-color: #CCFFFF" width="200" class="text-center">
        -
    </td>
</tr>

<tr>
    <td style="background-color: #CCFFFF" width="400" class="text-center" colspan="2">
        HCU <br>
    </td>
    @for (int i = 0; i < KeyData.Count; i++)
    {
        int index = i;
        <td width="200" class="text-center"  >
            <MatTextField @bind-Value=@KeyData[index].HCU  />
        </td>
    }
    <td style="background-color: #CCFFFF" width="200" class="text-center">
        -
    </td>
</tr>

Answer 1

There is a Blazor component library for Ant Design: Ant Design Blazor

It includes the exact table component you are referring to here

Example code with a fixed column and header is as follows:

@using System.ComponentModel
<Table DataSource="data" PageSize="50" ScrollX="1300" ScrollY="240px">
    <Column @bind-Field="@context.Name" Width="100" Fixed="left" />
    <Column @bind-Field="@context.Age" Width="100" Fixed="left" />
    <Column Title="Column 1" @bind-Field="@context.Address" />
    <Column Title="Column 2" @bind-Field="@context.Address" />
    <Column Title="Column 3" @bind-Field="@context.Address" />
    <Column Title="Column 4" @bind-Field="@context.Address" />
    <Column Title="Column 5" @bind-Field="@context.Address" />
    <Column Title="Column 6" @bind-Field="@context.Address" />
    <Column Title="Column 7" @bind-Field="@context.Address" />
    <Column Title="Column 8" @bind-Field="@context.Address" />
    <ActionColumn Title="Action" Width="100" Fixed="right">
        <a>action</a>
    </ActionColumn>
</Table>

@code {
    class Column
    {
        [DisplayName("Full Name")]
        public string Name { get; set; }

        public int Age { get; set; }

        public string Address { get; set; }
    }

    Column[] data = new Column[] {
        new()
        {
            Name = "John Brown",
            Age = 32,
            Address = "New York Park"
        },
        new()
        {
            Name = "Jim Green",
            Age = 40,
            Address = "London Park"
        },
    };

}