Data Grid

Use the datagrid to connect to any data source and add sorting and paging. The grid menu can add any content to include feature such as filtering as well.

Getting Started

Hook into the DataLoaded event callback to load up your data. The event include the data such as the current page and page size so you can filter the returned data.

<DataGrid @ref="PeopleDataGrid" Items="People" TItem="Person" DataLoaded="OnDataLoad" Title="Customers" RowClicked="OnRowClicked">
    <GridMenu>
        <button class="btn btn-primary" @onclick="New"><i class="fi fi-add"></i> New</button>
    </GridMenu>
    <GridColumns>
        <GridColumn TItem="Person" Field="(x => x.Id)" IsDefaultSortColumn="true" InitialSort="desc"></GridColumn>
        <GridColumn TItem="Person" Field="(x => x.Name)"></GridColumn>
        <GridColumn TItem="Person" Field="(x => x.Company)"></GridColumn>
        <GridColumn TItem="Person" Field="(x => x.Title)" IsVisible="false"></GridColumn>
        <GridColumn TItem="Person" Field="(x => x.Birthday)" Title="DOB"></GridColumn>
        <GridColumn TItem="Person" Field="(x => x.Email)"></GridColumn>
        <GridColumn TItem="Person" Field="(x => x.IsDeleted)" Title="Disabled"></GridColumn>
        <GridPager TItem="Person"></GridPager>
    </GridColumns>
</DataGrid>
 
@code {
    private DataGrid<Person> PeopleDataGrid { get; set; }
    private IEnumerable<Person> People { get; set; }
    private List<Person> PeopleData { get; set; }

    protected override Task OnInitializedAsync()
    {
        PeopleData = SampleData.GetPeople().ToList();
        return base.OnInitializedAsync();
    }

    private async Task OnDataLoad(DataGrid<Person> e)
    {
        People = PeopleData.Skip(e.PageSize * e.CurrentPage).Take(e.PageSize).OrderBy(x => e.SortedColumn.Field);
        e.TotalItems = PeopleData.Count();

        StateHasChanged();
    }

    private async Task OnRowClicked(Person item)
    {
    }

}

Result