fix(cdk/table): project colgroup and col elements (#18135)

Author: jelbourn

src/cdk/table/table.spec.ts

@@ -316,6 +316,22 @@ describe('CdkTable', () => {
     expect(tableElement.firstElementChild).toBe(caption);
   }));
 
+  it('should be able to project colgroup and col', fakeAsync(() => {
+    setupTableTestApp(NativeHtmlTableWithColgroupAndCol);
+    fixture.detectChanges();
+
+    const colgroupsAndCols = Array.from(tableElement.querySelectorAll('colgroup, col'));
+
+    expect(colgroupsAndCols.length).toBe(3);
+    expect(colgroupsAndCols[0].childNodes[0]).toBe(colgroupsAndCols[1]);
+    expect(colgroupsAndCols[2].parentNode!.nodeName.toLowerCase()).toBe('table');
+    expect(colgroupsAndCols.map(e => e.nodeName.toLowerCase())).toEqual([
+      'colgroup',
+      'col',
+      'col',
+    ]);
+  }));
+
   describe('with different data inputs other than data source', () => {
     let baseData: TestData[] = [
       {a: 'a_1', b: 'b_1', c: 'c_1'},
@@ -2390,6 +2406,34 @@ class NativeHtmlTableWithCaptionApp {
   @ViewChild(CdkTable) table: CdkTable<TestData>;
 }
 
+@Component({
+  template: `
+    <table cdk-table [dataSource]="dataSource">
+      <colgroup>
+        <col>
+      </colgroup>
+      <col>
+      <ng-container cdkColumnDef="column_a">
+        <th cdk-header-cell *cdkHeaderCellDef> Column A</th>
+        <td cdk-cell *cdkCellDef="let row"> {{row.a}}</td>
+      </ng-container>
+      <ng-container cdkColumnDef="column_b">
+        <th cdk-header-cell *cdkHeaderCellDef> Column B</th>
+        <td cdk-cell *cdkCellDef="let row"> {{row.b}}</td>
+      </ng-container>
+
+      <tr cdk-header-row *cdkHeaderRowDef="columnsToRender"></tr>
+      <tr cdk-row *cdkRowDef="let row; columns: columnsToRender" class="customRowClass"></tr>
+    </table>
+  `
+})
+class NativeHtmlTableWithColgroupAndCol {
+  dataSource: FakeDataSource | undefined = new FakeDataSource();
+  columnsToRender = ['column_a', 'column_b'];
+
+  @ViewChild(CdkTable) table: CdkTable<TestData>;
+}
+
 @Component({
   // Note that we need the `ngSwitch` below in order to surface the issue we're testing for.
   template: `

src/cdk/table/table.ts

@@ -116,6 +116,7 @@ export const CDK_TABLE_TEMPLATE =
     // element in the table. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption
     `
   <ng-content select="caption"></ng-content>
+  <ng-content select="colgroup, col"></ng-content>
   <ng-container headerRowOutlet></ng-container>
   <ng-container rowOutlet></ng-container>
   <ng-container footerRowOutlet></ng-container>

tools/public_api_guard/cdk/table.d.ts

@@ -27,7 +27,7 @@ export declare const CDK_ROW_TEMPLATE = "<ng-container cdkCellOutlet></ng-contai
 
 export declare const CDK_TABLE: InjectionToken<any>;
 
-export declare const CDK_TABLE_TEMPLATE = "\n  <ng-content select=\"caption\"></ng-content>\n  <ng-container headerRowOutlet></ng-container>\n  <ng-container rowOutlet></ng-container>\n  <ng-container footerRowOutlet></ng-container>\n";
+export declare const CDK_TABLE_TEMPLATE = "\n  <ng-content select=\"caption\"></ng-content>\n  <ng-content select=\"colgroup, col\"></ng-content>\n  <ng-container headerRowOutlet></ng-container>\n  <ng-container rowOutlet></ng-container>\n  <ng-container footerRowOutlet></ng-container>\n";
 
 export declare class CdkCell extends BaseCdkCell {
     constructor(columnDef: CdkColumnDef, elementRef: ElementRef);
@@ -206,7 +206,7 @@ export declare class CdkTable<T> implements AfterContentChecked, CollectionViewe
     updateStickyFooterRowStyles(): void;
     updateStickyHeaderRowStyles(): void;
     static ngAcceptInputType_multiTemplateDataRows: BooleanInput;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<CdkTable<any>, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": "trackBy"; "dataSource": "dataSource"; "multiTemplateDataRows": "multiTemplateDataRows"; }, {}, ["_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption"]>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<CdkTable<any>, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": "trackBy"; "dataSource": "dataSource"; "multiTemplateDataRows": "multiTemplateDataRows"; }, {}, ["_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col"]>;
     static ɵfac: i0.ɵɵFactoryDef<CdkTable<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null]>;
 }
 

tools/public_api_guard/material/table.d.ts

@@ -72,7 +72,7 @@ export declare class MatRowDef<T> extends CdkRowDef<T> {
 
 export declare class MatTable<T> extends CdkTable<T> {
     protected stickyCssClass: string;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatTable<any>, "mat-table, table[mat-table]", ["matTable"], {}, {}, never, ["caption"]>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatTable<any>, "mat-table, table[mat-table]", ["matTable"], {}, {}, never, ["caption", "colgroup, col"]>;
     static ɵfac: i0.ɵɵFactoryDef<MatTable<any>, never>;
 }