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 defined DataGridAggregate options.

Large Data

By default all aggregate operations are run on in-memory Data. 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="@employeeList" ReadData="@OnReadData" TotalItems="@totalEmployees" AggregateData="@employeeSummary" 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.

On this page