You can think of using a section in the grid footer.
Refer the shopping cart demo in the UI Gallery. To be precised, check the section, pxUIGalleryShoppingList and see how they have configured the list of items and then used grid footer to show the total amount
Using OOTB grid configuration, I couldn't find out a way to fix the issue. However, we may achieve this requirement by keeping the column width fixed(say X px).
Lets say the width of first and second column has been set to x and y px respectively. So for the grid footer, we have to apply the same configuration i.e. x px width for first grid footer and y px width for second grid footer.
Please let me know, if you need any clarification on above.
Yes, i didn't exactly understood what Pankaj said..
If he is referring to add an extra row in the source of the grid itself then that would be an issue because source of the grid could be a datapage/report definition/clipboard page. We cannot adding a row to each of the sources because it does not allow to append a page always.
I have the exact same requirement. Simply shows totals at the bottom of the grid, in such a way that the total values stay aligned with the columns when resizing the screen (so fixed widths are not an option).