docs(material/table): table multiple row example #27621 (#29421)

* docs(material/table): table multiple row example

Added an example of how to use the multiTemplateDataRows template to the docs.

Fixes #27621

* ci: fix formatting issues

---------

Co-authored-by: Miles Malerba <[email protected]>
(cherry picked from commit 4a86a65)

Author: 2 people

src/components-examples/material/table/index.ts

@@ -6,6 +6,7 @@ export {TableFilteringExample} from './table-filtering/table-filtering-example';
 export {TableFooterRowExample} from './table-footer-row/table-footer-row-example';
 export {TableHttpExample} from './table-http/table-http-example';
 export {TableMultipleHeaderFooterExample} from './table-multiple-header-footer/table-multiple-header-footer-example';
+export {TableMultipleRowTemplateExample} from './table-multiple-row-template/table-multiple-row-template-example';
 export {TableOverviewExample} from './table-overview/table-overview-example';
 export {TablePaginationExample} from './table-pagination/table-pagination-example';
 export {TableRowContextExample} from './table-row-context/table-row-context-example';

src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.css

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.html

@@ -0,0 +1,38 @@
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef>No.</th>
+      <td mat-cell *matCellDef="let element">{{element.position}}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <td mat-cell *matCellDef="let element">{{element.name}}</td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef>Weight</th>
+      <td mat-cell *matCellDef="let element">{{element.weight}}</td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef>Symbol</th>
+      <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
+    </ng-container>
+
+    <!-- Secondary Column -->
+    <ng-container matColumnDef="secondary">
+      <td mat-cell [attr.colspan]="displayedColumns.length" *matCellDef="let element">
+        Secondary row for the element {{element.name}}
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: ['secondary'];"></tr>
+  </table>
+</div>

src/components-examples/material/table/table-multiple-row-template/table-multiple-row-template-example.ts

@@ -0,0 +1,47 @@
+import {Component} from '@angular/core';
+import {MatTableDataSource, MatTableModule} from '@angular/material/table';
+
+/**
+ * @title Table with multiple row template
+ */
+@Component({
+  selector: 'table-multiple-row-template-example',
+  styleUrls: ['table-multiple-row-template-example.css'],
+  templateUrl: 'table-multiple-row-template-example.html',
+  standalone: true,
+  imports: [MatTableModule],
+})
+export class TableMultipleRowTemplateExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
+  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
+  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
+  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
+  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
+  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
+  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
+  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
+  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
+  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
+];

src/dev-app/table/table-demo.html

@@ -70,6 +70,9 @@ <h3>Table with sticky footer</h3>
 <h3>Table with sticky header</h3>
 <table-sticky-header-example></table-sticky-header-example>
 
+<h3>Table with multiple rows per data item</h3>
+<table-multiple-row-template-example></table-multiple-row-template-example>
+
 <h3>Table with mat-text-column</h3>
 <table-text-column-example></table-text-column-example>
 

src/dev-app/table/table-demo.ts

@@ -27,6 +27,7 @@ import {
   TableHarnessExample,
   TableHttpExample,
   TableMultipleHeaderFooterExample,
+  TableMultipleRowTemplateExample,
   TableOverviewExample,
   TablePaginationExample,
   TableRecycleRowsExample,
@@ -63,6 +64,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
     TableFooterRowExample,
     TableHttpExample,
     TableMultipleHeaderFooterExample,
+    TableMultipleRowTemplateExample,
     TableOverviewExample,
     TablePaginationExample,
     TableRowContextExample,

src/material/table/table.md

@@ -374,6 +374,8 @@ to resolve this.
 
 When using the `multiTemplateDataRows` directive to support multiple rows for each data object, the context of `*matRowDef` is the same except that the `index` value is replaced by `dataIndex` and `renderIndex`.
 
+<!--- example(table-multiple-row-template) -->
+
 ### Accessibility
 
 By default, `MatTable` applies `role="table"`, assuming the table's contains primarily static