I’m new to Blazor Server Apps and just trying to create a component similar to QuickGrid but just have a simpler functionalities as a start.

Here is the sample component

@page "/test-grid-table"

@using System.Data

<TableSourceContext>
    <TableSource Name="EmployeeSource" DataSource="@_employees" />
    <TableSource Name="CountrySource" DataSource="@_countries" />
    <TableNode Title="AccSol Table" DataSource="EmployeeSource">
        <TableColumn DataSource="EmployeeDS" FieldName="ID" Type="TextBox" />
        <TableColumn DataSource="EmployeeDS" FieldName="FirstName" Type="TextBox" />
        <TableColumn DataSource="EmployeeDS" FieldName="MiddleName" Type="TextBox" />
        <TableColumn DataSource="EmployeeDS" FieldName="LastName" Type="TextBox" />
        <TableColumn DataSource="CountryDS" FieldName="CountryID" Type="DropdownList" DisplayFieldName="Name" DisplayFieldValue="ID" />
    </TableNode>
</TableSourceContext>

@code {

    private DataTable _employees = default!;
    private DataTable _countries = default!;
    protected override void OnParametersSet()
    {
        Console.WriteLine("TestAccSolGridTable OnParametersSetAsync");
        // Initialize _employees DataTable
        _employees = new DataTable();
        _employees.Columns.Add("ID", typeof(int));
        _employees.Columns.Add("FirstName", typeof(string));
        _employees.Columns.Add("MiddleName", typeof(string));
        _employees.Columns.Add("LastName", typeof(string));
        _employees.Columns.Add("CountryID", typeof(int));
        _employees.Rows.Add(1, "John", "A.", "Doe", 1);
        _employees.Rows.Add(2, "Jane", "B.", "Smith", 2);

        // Initialize _countries DataTable
        _countries = new DataTable();
        _countries.Columns.Add("ID", typeof(int));
        _countries.Columns.Add("Name", typeof(string));
        _countries.Rows.Add(1, "USA");
        _countries.Rows.Add(2, "Canada");

        base.OnParametersSet();
    }
}

In that example, I want to be able to set the data tables as datasources for my table grid columns. In my TableNode, I want to be able to set as many table columns as I want specifying the source table and the type of component if it is a TextBox or a DropdownList component which are not provided.

Here is the GitHub repository.