Tables: Explore how we might be able to group rows

[benjamincharity]

Product is exploring ways to show related content within tables. Part of this exploration is around an expandable row that shows more rows when expanded.

NOTE: This could be as simple as usage docs - it seems possible from the consumer side.

• Does this require nested tables?
• Can this be done by generating more rows on the fly with a larger indent?
• Sub-row columns should still align with the parent columns

We will allow the consumer to handle all grouping as this StackBlitz demonstrates: https://stackblitz.com/edit/angular-material-table-row-grouping-t91pqv?file=src/app/app.component.ts

We need to expose helpers for summary rows (see #1675 )

Requirements

TODO

• [ ] Each group has it's own summary header
  • [ ] Group summary rows have a lighter background than table summary
  • [ ] ~4px solid gray border above group summary row
  • [ ] Text is bold
• [ ] Clicking a groups summary row toggles the expanded state
  • [ ] We should expose public methods to allow programatic control

Resources

• Best:
  • https://stackblitz.com/edit/angular-material-table-row-grouping
  • https://stackblitz.com/edit/ng-table-dynamic-groupby?file=app/table-basic-example.ts
• Look into CDK: multiTemplateDataRows
• https://stackoverflow.com/questions/52217179/angular-material-mat-table-row-grouping
  • https://stackblitz.com/edit/angular-mattable-with-collapsible-groupheader
• https://github.com/StephenWTurner/mat-table-groupby

[benjamincharity]

Currently on hold. Waiting for eng/prod to nail down data/api issues.