Footer in md-table

[patoncrispy]

Bug, feature request, or proposal:

Feature Request.

What is the expected behavior?

Allow developers to be able to specify table footer content.

What is the current behavior?

This feature is not available (AFAIK).

What is the use-case or motivation for changing an existing behavior?

A lot of my tables work with numbers for which it would be great to be able to provide totals for.

[andrewseguin]

This will be possible when we introduce a when predicate for rows. You can append a data row to the data provided to the table #5887

[patoncrispy]

Hey @andrewseguin, just noticed #5887 is closed. I'm still getting my head around how the cdk-table works, so I was wondering if there will be documentation on how to use the new when predicate to create a tfoot in a table? Ideally for doing totals, etc...

[willshowell]

@patoncrispy untested shot in the dark, but I think something like this would work

<md-row *cdkRowDef="let row; columns: itemColumns;"></md-row>
<md-row *cdkRowDef="let row; columns: totalColumns; when:isLastRow"></md-row>

itemColumns = ['valA', 'valB'];
totalColumns = ['totalA', 'totalB'];

isLastRow = (data, index) => this.completeDataset.length === index - 1;

// This is obviously pseudo code, but make sure you append a final item
// to your data source array that contains the data needed for the last row.
this.dataSource.use([...this.completeDataset, { totalA: 123, totalB: 234 }]);

[patoncrispy]

Thanks, @willshowell. That makes sense!

[timwright35]

@willshowell Interesting, though I have not been able to get something like you mentioned working. Would anyone have a more complete working example?

[andrewseguin]

Check out the duplicate issue for more details, we'll track this there

[pantonis]

@andrewseguin Without totals I can't use the datatable for my projects. Is there any workaround until this feature is implemented?

[andrewseguin]

@pantonis The solution depends on the type of UX you are looking for. Do you have pagination? Is the footer meant to be sticky?

[pantonis]

Yes it has pagination and needs to be sticky

[andrewseguin]

Here's one workaround that places a row in your data that creates a separate .totals-row that uses sticky positioning. All browsers except IE11 will support it, so it may not be a valid solution for you.

https://stackblitz.com/edit/angular-rkmynk?file=app%2Ftable-basic-example.ts

[pantonis]

Do you think this is something that will be embedded in datatable's functionality natively?

[pantonis]

Thanks for the example by the way. You guys are doing great job!

[andrewseguin]

I think it'll be something we add in but it's not as high priority as other features for the table, so it might be some time. Thanks for the support, hope the example helps out a bit

[pantonis]

@andrewseguin The workaround you posted only works when there is no paginator. When paginator is added in table, totals row is not shown.

[rain01]

With the workaround, also when sorting the totals pop to the top :/

[andrewseguin]

Good news, we have a PR open for this :) #10330

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}