From bf7c7265adad59db5ab2f061ce9e72ebb21dc76c Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Wed, 8 Jan 2020 16:43:09 -0800
Subject: [PATCH] fix(cdk/table): project colgroup and col elements

---
 src/cdk/table/table.spec.ts                | 44 ++++++++++++++++++++++
 src/cdk/table/table.ts                     |  1 +
 tools/public_api_guard/cdk/table.d.ts      |  4 +-
 tools/public_api_guard/material/table.d.ts |  2 +-
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts
index 562f1c05c9a1..84b82095d20c 100644
--- a/src/cdk/table/table.spec.ts
+++ b/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: `
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
index 2fef631e7b9b..f31d7c8ceda4 100644
--- a/src/cdk/table/table.ts
+++ b/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>
diff --git a/tools/public_api_guard/cdk/table.d.ts b/tools/public_api_guard/cdk/table.d.ts
index 04f98f066198..5a167751850f 100644
--- a/tools/public_api_guard/cdk/table.d.ts
+++ b/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]>;
 }
 
diff --git a/tools/public_api_guard/material/table.d.ts b/tools/public_api_guard/material/table.d.ts
index 0e73f53c8f9d..51ebaece0ce4 100644
--- a/tools/public_api_guard/material/table.d.ts
+++ b/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>;
 }