feat: add an optional summary row to Datagrid

[chucker]

🙋 Feature Request

It would be nice to be able to add an optional summary row which aggregates data from RowsData.

For example, here's a green summary row that summarizes the two rows above:

💁 Possible Solution

One possible design would be to add a property ShowRowSummary="true" on the grid itself, then a property on the columns that configures how cells are aggregated:

    <FluentDataGrid RowsData="@MyBankAccounts.AsQueryable()" ShowRowSummary="true">
        <PropertyColumn Property="@(p => p.Title)" Sortable="true" />

        <PropertyColumn Property="@(p => p.Balance)" Sortable="true" SummaryAggregate="Sum">
    </FluentDataGrid>

SummaryAggregate could then perhaps be one of Sum, Max, Min, Average, Median.

[vnbaaij]

It's a nice idea, but it comes with a lot of additional design details that would need to be decided on (and eventually implemented). Some questions that come to mind:

• When paging is enabled, would this show on every page (or would we need an extra setting for that)
• When you have a lot of data, is this shown at the bottom of the 'viewport' or at the bottom of the list (or do we need a setting for that as well)
  Maybe a solution would be to have a 'sticky footer' (in addition to the sticky header) but that is not something which is implemented in the underlying web component so would need to be added there first.

[vnbaaij]

It's pretty easy already to add the aggerate data itself to the grid in the current (2.0) version. Here is an example of adding the total number of medals to the DataGridTypical sample:

 protected override async Task OnInitializedAsync()
 {
        items = (await Data.GetCountriesAsync()).AsQueryable();
        items = items.Append(new Country("Total", "Total", new Medals
        {
                Gold = items.Sum(x => x.Medals.Gold),
                Silver = items.Max(x => x.Medals.Silver),
                Bronze = items.Min(x => x.Medals.Bronze),
        }));
 }

[chucker]

Yup, for now I'm manually adding that row to the collection and setting a special style:

fluent-data-grid-row:last-of-type {
    background: hsl(92, 58%, 80%);
}

fluent-data-grid-row:last-of-type > fluent-data-grid-cell {
    font-weight: 600;
}

One weakness with that approach is that sortable columns don't take it into account, because the grid doesn't know to always push that row to the bottom. For example, if you sort by Gold, descending, the summary row will be at the top, not the bottom.

[kpolkovnikov]

It's a nice idea, but it comes with a lot of additional design details that would need to be decided on (and eventually implemented). Some questions that come to mind:

• When paging is enabled, would this show on every page (or would we need an extra setting for that)
• When you have a lot of data, is this shown at the bottom of the 'viewport' or at the bottom of the list (or do we need a setting for that as well)
  Maybe a solution would be to have a 'sticky footer' (in addition to the sticky header) but that is not something which is implemented in the underlying web component so would need to be added there first.

At least, just add footer to grid and the ability to place content there under each column.

[vnbaaij]

As said, the underlying web components do not have a notion of a 'grid footer'.

[kpolkovnikov]

Thank you for taking the time to respond. As far as i can see, your grid is based on a combination of flexbox (grid) and css-grid (rows). I can't believe it's a challenge for MS developers to attach a sticky footer to flexbox. Considering that they coped with the header (DataGridRowType.StickyHeader), the same change in the footer part seems trivial.

vnbaaij on Dec 22, 2022 - "Maybe a solution would be to have a 'sticky footer' (in addition to the sticky header) but that is not something which is implemented in the underlying web component so would need to be added there first."

So do it. What's stopping you? Although, given that almost a year and a half has passed since the first message in this topic, a new web technology will likely be released to replace Blazor before we get a footer in this grid.