diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts index 7bab50b5a2a6..3ca918f03ac5 100644 --- a/src/cdk/table/table.spec.ts +++ b/src/cdk/table/table.spec.ts @@ -327,6 +327,16 @@ describe('CdkTable', () => { ]); }); + it('should be able to project a caption', fakeAsync(() => { + setupTableTestApp(NativeHtmlTableWithCaptionApp); + fixture.detectChanges(); + + const caption = tableElement.querySelector('caption'); + + expect(caption).toBeTruthy(); + expect(tableElement.firstElementChild).toBe(caption); + })); + describe('with different data inputs other than data source', () => { let baseData: TestData[] = [ {a: 'a_1', b: 'b_1', c: 'c_1'}, @@ -2182,6 +2192,27 @@ class NativeHtmlTableApp { @ViewChild(CdkTable) table: CdkTable; } +@Component({ + template: ` + + + + + + + + + +
Very important data
Column A {{row.a}}
+ ` +}) +class NativeHtmlTableWithCaptionApp { + dataSource: FakeDataSource | undefined = new FakeDataSource(); + columnsToRender = ['column_a']; + + @ViewChild(CdkTable) table: CdkTable; +} + function getElements(element: Element, query: string): Element[] { return [].slice.call(element.querySelectorAll(query)); } diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index 4919071119b9..c59255f44a7a 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -106,10 +106,15 @@ export class FooterRowOutlet implements RowOutlet { * material library. * @docs-private */ -export const CDK_TABLE_TEMPLATE = ` +export const CDK_TABLE_TEMPLATE = +// Note that according to MDN, the `caption` element has to be projected as the **first** element +// in the table. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption +` + - `; + +`; /** * Interface used to conveniently type the possible context interfaces for the render row. diff --git a/tools/public_api_guard/cdk/table.d.ts b/tools/public_api_guard/cdk/table.d.ts index 74812cae49f1..cb14dade32c1 100644 --- a/tools/public_api_guard/cdk/table.d.ts +++ b/tools/public_api_guard/cdk/table.d.ts @@ -30,7 +30,7 @@ export declare type CanStickCtor = Constructor; export declare const CDK_ROW_TEMPLATE = ""; -export declare const CDK_TABLE_TEMPLATE = "\n \n \n "; +export declare const CDK_TABLE_TEMPLATE = "\n \n \n \n \n"; export declare class CdkCell extends BaseCdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef);