[Feature Request]: Add pinned row example (sticky summary)

[SaulcGH]

The problem

When working with data tables containing numerous entries, users frequently need to see aggregated information (like sums, averages, or counts) derived from the data columns. Currently, obtaining these summaries requires manual calculation outside the table or losing sight of the summary information if it's placed at the bottom of a long, scrollable table. This makes it cumbersome to analyze detailed data in the context of overall totals or summaries. This functionality is a standard expectation for data presentation, much like summary rows in spreadsheet applications where calculations on columns are readily available.

The solution

We are requesting the addition of a dedicated "summary row" capability within the data table component. This row would be specifically designed to display calculated or custom summary information based on the data present in the table columns.

Key aspects of this summary row would include:

• Calculation Capabilities: The row should support performing calculations on the data columns above it. This could include built-in functions like sum, average, count, min, and max, applicable based on column data types. The ability to define custom calculation logic per column would also be valuable.
• Content Display: The row's cells would display the results of these calculations or other custom summary content provided by the application. The content should align correctly with the respective data columns.
• Visual Distinction: The summary row should have distinct styling to clearly differentiate it from the standard data rows, making the summary information immediately recognizable.
• Persistence/Visibility: Ideally, this summary row would remain visible within the viewport even when the user scrolls through the main data body (i.e., be "sticky" at the bottom), ensuring the summary is always accessible alongside the detailed data. This persistent visibility is crucial for effective data analysis.

This feature would provide users with integrated, real-time summary insights into the table data, akin to the familiar experience of using summary rows with formulas in spreadsheets, greatly enhancing the usability and analytical capabilities of the Carbon Data Table component.

Examples

https://js.devexpress.com/jQuery/Demos/WidgetsGallery/Demo/DataGrid/GroupSummaries/MaterialBlueLight/
https://js.devexpress.com/jQuery/Demos/WidgetsGallery/Demo/DataGrid/GridSummaries/MaterialBlueLight/
https://docs.wavemaker.com/learn/app-development/widgets/datalive/datatable/summary-row/
http://swimlane.github.io/ngx-datatable/simple-summary

Package

@carbon/react, @carbon/web-components, @carbon/styles, @carbon/colors, @carbon/elements, @carbon/layout, I'm not sure, @carbon/upgrade

Application/PAL

No response

Business priority

Low Priority = release date is not dependent on fix or not upcoming

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[sstrubberg]

@matthewgallo @elycheea Could you weigh in on this enhancement? Does our Tanstack implementation support this?

[tay1orjones]

This is beyond the scope of what DataTable would typically provide. Calculations can be custom and should be left up to the consumer. Content display should be possible already by passing empty TableCells or using column spans. Visual distinction - agreed there isn't a pattern for this and would need to be defined. Persistence is available through Tanstack and would recommend looking at the documented row pinning.

We don't have an example of this Tanstack feature over in the [tanstack-carbon repo[(https://github.com/carbon-design-system/tanstack-carbon/issues) - I'll move this issue to that repo though to consider exploring adding this as an example.

[jlongshore]

Thanks for bringing this up, would you like to contribute an example to the Tanstack-Carbon repo? There is a design for frozen columns that can serve as a reference.