docs(material/table): add rowspan example

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

@@ -1,5 +1,6 @@
 export {TableFlexBasicExample} from './table-flex-basic/table-flex-basic-example';
 export {TableBasicExample} from './table-basic/table-basic-example';
+export {TableRowspanExample} from './table-rowspan/table-rowspan-example';
 export {TableDynamicColumnsExample} from './table-dynamic-columns/table-dynamic-columns-example';
 export {TableExpandableRowsExample} from './table-expandable-rows/table-expandable-rows-example';
 export {TableFilteringExample} from './table-filtering/table-filtering-example';

src/components-examples/material/table/table-rowspan/table-rowspan-example.css

@@ -0,0 +1,8 @@
+table {
+  width: 100%;
+}
+
+th,
+td {
+  vertical-align: top;
+}

src/components-examples/material/table/table-rowspan/table-rowspan-example.html

@@ -0,0 +1,38 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z2">
+
+  <!-- Element Column -->
+  <ng-container matColumnDef="element">
+    <th mat-header-cell *matHeaderCellDef>Element</th>
+
+    <!-- Hide repeated cells and apply rowspan to the first occurrence. -->
+    <td
+      mat-cell
+      *matCellDef="let row; let i = index"
+      [attr.rowspan]="getRowSpan('element', i)"
+      [style.display]="getRowSpan('element', i) ? '' : 'none'">
+      {{row.element}}
+    </td>
+  </ng-container>
+
+  <!-- Isotope Column -->
+  <ng-container matColumnDef="isotope">
+    <th mat-header-cell *matHeaderCellDef>Isotope</th>
+
+    <td mat-cell *matCellDef="let row">
+      {{row.isotope}}
+    </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef>Weight</th>
+
+    <td mat-cell *matCellDef="let row">
+      {{row.weight}}
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/components-examples/material/table/table-rowspan/table-rowspan-example.ts

@@ -0,0 +1,66 @@
+import {Component} from '@angular/core';
+import {MatTableModule} from '@angular/material/table';
+
+export interface IsotopeData {
+  position: number;
+  element: string;
+  isotope: string;
+  weight: number;
+}
+
+const ISOTOPE_DATA: IsotopeData[] = [
+  {position: 1, element: 'Hydrogen', isotope: 'Protium', weight: 1.0078},
+  {position: 2, element: 'Hydrogen', isotope: 'Deuterium', weight: 2.0141},
+  {position: 3, element: 'Hydrogen', isotope: 'Tritium', weight: 3.016},
+  {position: 4, element: 'Helium', isotope: 'Helium-3', weight: 3.016},
+  {position: 5, element: 'Helium', isotope: 'Helium-4', weight: 4.0026},
+];
+
+/**
+ * @title Table with merged rows using rowspan
+ */
+@Component({
+  selector: 'table-rowspan-example',
+  styleUrl: 'table-rowspan-example.css',
+  templateUrl: 'table-rowspan-example.html',
+  imports: [MatTableModule],
+})
+export class TableRowspanExample {
+  displayedColumns: string[] = ['element', 'isotope', 'weight'];
+
+  dataSource: IsotopeData[] = ISOTOPE_DATA;
+
+  spans: Record<string, number>[] = [];
+
+  constructor() {
+    this._cacheSpan('element', row => row.element);
+  }
+
+  /** Caches rowspan values for a column. */
+  private _cacheSpan(key: string, accessor: (row: IsotopeData) => string): void {
+    for (let i = 0; i < this.dataSource.length;) {
+      const currentValue = accessor(this.dataSource[i]);
+      let count = 1;
+
+      for (let j = i + 1; j < this.dataSource.length; j++) {
+        if (currentValue !== accessor(this.dataSource[j])) {
+          break;
+        }
+
+        count++;
+      }
+
+      if (!this.spans[i]) {
+        this.spans[i] = {};
+      }
+
+      this.spans[i][key] = count;
+      i += count;
+    }
+  }
+
+  /** Returns the rowspan for an element cell. */
+  getRowSpan(column: 'element', index: number): number | undefined {
+    return this.spans[index]?.[column];
+  }
+}

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

@@ -46,6 +46,9 @@ <h3>Table with multiple headers and footers</h3>
 <h3>Table overview</h3>
 <table-overview-example></table-overview-example>
 
+<h3>Table with rowspan</h3>
+<table-rowspan-example></table-rowspan-example>
+
 <h3>Table row context</h3>
 <table-row-context-example></table-row-context-example>
 

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

@@ -31,6 +31,7 @@ import {
   TableRecycleRowsExample,
   TableReorderableExample,
   TableRowContextExample,
+  TableRowspanExample,
   TableSelectionExample,
   TableSortingExample,
   TableStickyColumnsExample,
@@ -65,6 +66,7 @@ import {
     TablePaginationExample,
     TableVirtualScrollExample,
     TableRowContextExample,
+    TableRowspanExample,
     TableSelectionExample,
     TableSortingExample,
     TableStickyColumnsExample,