EBlazor Example

You can use direct column by setting field, or use RowTemplate and do whatever you want


#	Name	Number	Mobile	City

Note that you can use auto paging and that means loading all data and dividing them in pages on rendering. And manual paging and that allows you to get divided data from your source on page navigation. If you set OnPageChanged, sou you force DataTable to use manual paging.

The code of this example is like this

<DataTable>
                    <DataTableColumn>
                    <RowTemplate>
                        <span class='text-primary'>@(context.Id)</span>
                    <RowTemplate/>
                    </DataTableColumn>
                    <DataTableColumn/>
                    <DataTableColumn/>
                    <DataTableColumn/>
                    <DataTableColumn/>
</DataTable>



@code{
           class Employee 
          {
             public int Id { get; set;}
             public string EmployeeName { get; set;}
             public string EmployeeNumber { get; set;}
             public double Mobile { get; set;}
             public string CityName { get; set;}
          }
          
        List<Employee> Data => //Getting products data from any source
}

TreeView

Dynamic tree view in hierarchy order. There are two ways to work with this tree

1- Auto load childs. In this way you have to load all data and setting FullList and ParentIdPath
2- Manually loading childs. In this way you will load first level parents only and set ParentsList property and OnLoadChilds too to load childs of clicked parent

Auto loading

<TreeView>
                    <NodeTemplate/>
</TreeView>

Manual loading

<TreeView>
                    <NodeTemplate/>
</TreeView>

Note: Dont forget <NodeTemplate/> even if you will leave it empty

Source code

@code{
                    class Category 
    {
                    public int Id { get; set;}
                    public string Name { get; set;}
                    public int? ParentID { get; set;}
    }

    List<Category> Categories => //Getting products data from any source
}