MudBlazor - Blazor Component Library

API

<MudDataGrid>

Default Data Grid

The <MudDataGrid> is used to display and work with small amounts of data up to very large datasets, easily and efficiently. In its simplest form, the data grid is just a table, displaying data from a data source. In its most complex form, the data grid allows filtering, editing, grouping, and much more.

Using the data grid is pretty simple to start with and just requires setting the Items property to a collection of data as IEnumerable, and adding Columns.

Nr0	Sign0	Name0	Position0	Molar mass0
1	H	Hydrogen	0	1.00794
2	He	Helium	17	4.002602
3	Li	Lithium	0	6.941
4	Be	Beryllium	1	9.012182

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudDataGrid Items="@Elements.Take(4)">
    <Columns>
        <PropertyColumn Property="x => x.Number" Title="Nr" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>

@code { 
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}

Column Types

There are two main column types: <PropertyColumn> and <TemplateColumn>. PropertyColumns are typically used to display a single property defined by the parameter, Property. You would use TemplateColumns when you want to display a column without linking it directly to a property in the data source. For example, if you wanted to show a column that has action buttons. TemplateColumn cannot infer things such as Title and SortBy like the PropertyColumn.

You can pass a format string in the Format parameter on PropertyColumn to format the value for the cells.

Name	Position	Years Employed	Salary	Total Earned
Sam	CPA	23	$87,000.00	$2,001,000.00
Alicia	Product Manager	11	$143,000.00	$1,573,000.00
Ira	Developer	4	$92,000.00	$368,000.00
John	IT Director	17	$229,000.00	$3,893,000.00

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudDataGrid Items="@employees" Filterable="false" SortMode="@SortMode.None" Groupable="false">
    <Columns>
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.YearsEmployed" Title="Years Employed" />
        <PropertyColumn Property="x => x.Salary" Format="C" />
        <PropertyColumn Property="x => x.Salary * x.YearsEmployed" Title="Total Earned" Format="C" />
        <TemplateColumn CellClass="d-flex justify-end">
            <CellTemplate>
                <MudStack Row>
                    <MudRating Size="@Size.Small" SelectedValue="@context.Item.Rating" />
                    <MudButton Size="@Size.Small" Variant="@Variant.Filled" Color="@Color.Primary">Hire</MudButton>
                </MudStack>
            </CellTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

@code {
    public record Employee(string Name, string Position, int YearsEmployed, int Salary, int Rating);
    public IEnumerable<Employee> employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee>
        {
            new Employee("Sam", "CPA", 23, 87_000, 4),
            new Employee("Alicia", "Product Manager", 11, 143_000, 5),
            new Employee("Ira", "Developer", 4, 92_000, 3),
            new Employee("John", "IT Director", 17, 229_000, 4),
        };
    }
}