[Feature Request]: Add Total Row functionality to Table Component

[srp-tom]

Description

In our ERP application, we frequently need to display aggregated data (e.g., sum, average, count) at the bottom of a table. Currently, the Table component in Cloudscape does not provide a built-in way to render a total row.
Developers need to manually append a custom row outside of the component, which makes styling and alignment inconsistent with the rest of the table.

It would be helpful if the Table component supported a Total Row (Footer Row) feature, similar to how many enterprise data grid libraries provide summary rows.

• Option to enable a footer row.
• Ability to define aggregations (sum, average, min, max, custom).
• Consistent styling with table cells, aligned with columns.
• Sticky footer option, similar to sticky header.

Example

<Table
  header={<Header>Purchase Orders</Header>}
  columnDefinitions={[
    { id: 'item', header: 'Item', cell: item => item.name },
    { id: 'qty', header: 'Quantity', cell: item => item.qty },
    { id: 'price', header: 'Price', cell: item => item.price },
  ]}
  items={[
    { name: 'Fabric A', qty: 10, price: 200 },
    { name: 'Fabric B', qty: 5, price: 100 },
  ]}
  totalRow={{
    cells: {
      item: 'Total',
      qty: (items) => items.reduce((sum, i) => sum + i.qty, 0),
      price: (items) => items.reduce((sum, i) => sum + i.price, 0),
    },
    sticky: true
  }}
/>

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[pan-kot]

Hi @srp-tom ,

Thanks for your feature request! Before our team takes it into prioritisation, let me share the available alternatives:

One alternative, is to append an extra table item that provides aggregated values. You can style cell content of the total row to be visually distinct from the rest. Currently, there is no feature to make table rows sticky, but it is possible to make any number of columns from left or right sticky - this can be helpful, especially when not all columns need/define aggregated values.

Another alternative is to use expandable rows feature. This allows to group the rows, and can technically be used to include all data rows, and can be made expanded by default. The parent row in that case can serve the function of total row and display aggregated values. The expandable rows cannot be sticky, too - but at least the total will be shown in the top of the table. The solution can also scale to support grouped data, where each group can have its own "total".

Please let us know if any of the alternatives fits your use case. If not, I am curious to know why - this will then help us with prioritisation.

[srp-tom]

Thank you for suggesting alternatives! I reviewed both options:

Option 1 (Additional Table Row): This is the approach we currently use, but it requires additional logic to exclude that row when sorting data. Furthermore, since it isn't fixed like a typical grand total row, it risks causing visual confusion for users.

Option 2 (Expandable Row): This does not fit our use case, where totals must appear at the bottom, not the top. Furthermore, an expandable structure could confuse users expecting a traditional table layout.

Our specific use case involves financial data tables (invoices, purchase orders, inventory), where users expect totals to consistently appear at the bottom, just as they would in Excel or other systems.

Thank you for considering this feature!