Blazorise DataGrid: Aggregates
Show aggregate values in the footer of the grid.
Overview
The DataGrid
provider several built-in aggregates for column values. Supported aggregate functions are:
Sum
Calculate total(sum) value of the collection.Average
Calculates the average of the numeric items in the collection.Min
Finds the smallest value in the collection.Max
Finds the largest value in the collection.Count
Counts the elements in a collection.TrueCount
Counts boolean elements with true value.FalseCount
Counts boolean elements with false value.
Examples
Aggregates
DataGrid will automatically generate necessary group cells based on the definedDataGridAggregate
options.
Large Data
By default all aggregate operations are run on in-memoryData
. When working with large datasets that is not possible. So just as in the previous examples for large datasets you need to work with ReadData
and set the AggregateData
property.
<DataGrid TItem="Employee" Data="" ReadData="" TotalItems="" AggregateData="" Responsive> <DataGridAggregates> <DataGridAggregate Field="@nameof( Employee.Email )" Aggregate="DataGridAggregateType.Count"> <DisplayTemplate> @($"Total emails: {context.Value}") </DisplayTemplate> </DataGridAggregate> <DataGridAggregate Field="@nameof( Employee.Salary )" Aggregate="DataGridAggregateType.Sum" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" /> <DataGridAggregate Field="@nameof( Employee.IsActive )" Aggregate="DataGridAggregateType.TrueCount" /> </DataGridAggregates> <DataGridColumns> <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable /> <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> <EditTemplate> <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </DataGridColumns> </DataGrid>
@code{ [Inject] public EmployeeData EmployeeData { get; set; } private List<Employee> employeeList; protected override async Task OnInitializedAsync() { employeeList = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } private int totalEmployees; private List<Employee> employeeSummary; private Task OnReadData( DataGridReadDataEventArgs<Employee> e ) { if ( !e.CancellationToken.IsCancellationRequested ) { List<Employee> response = null; // this can be call to anything, in this case we're calling a fictional api //var response = await Http.GetJsonAsync<Employee[]>( $"some-api/employees?page={e.Page}&pageSize={e.PageSize}" ); if ( e.ReadDataMode is DataGridReadDataMode.Virtualize ) response = employeeList.Skip( e.VirtualizeOffset ).Take( e.VirtualizeCount ).ToList(); else if ( e.ReadDataMode is DataGridReadDataMode.Paging ) response = employeeList.Skip( ( e.Page - 1 ) * e.PageSize ).Take( e.PageSize ).ToList(); else throw new Exception( "Unhandled ReadDataMode" ); if ( !e.CancellationToken.IsCancellationRequested ) { totalEmployees = employeeList.Count; employeeList = new List<Employee>( response ); // an actual data for the current page //var aggregateResponse = await Http.GetJsonAsync<Employee[]>( $"some-aggregate-api/employees" ); employeeSummary = employeeList; //aggregateResponse.Data } } return Task.CompletedTask; } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.