From 6032385afd79dd7372d0217aafeddc145112148c Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 7 Jan 2022 22:08:11 +0200 Subject: [PATCH] refactor(material/table): clean up IE workarounds (#23462) Cleans up the workarounds for IE in the table module. (cherry picked from commit 3de4ab8fecd7717fcfc70f33b036efafb772c415) --- src/cdk/table/cell.ts | 7 +------ src/material/table/_table-flex-styles.scss | 9 --------- src/material/table/table.md | 19 ++++++++----------- 3 files changed, 9 insertions(+), 26 deletions(-) diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index 218d9c5ab709..4aabe6e48985 100644 --- a/src/cdk/table/cell.ts +++ b/src/cdk/table/cell.ts @@ -150,12 +150,7 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick { /** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */ export class BaseCdkCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef) { - // If IE 11 is dropped before we switch to setting a single class name, change to multi param - // with destructuring. - const classList = elementRef.nativeElement.classList; - for (const className of columnDef._columnCssClassName) { - classList.add(className); - } + elementRef.nativeElement.classList.add(...columnDef._columnCssClassName); } } diff --git a/src/material/table/_table-flex-styles.scss b/src/material/table/_table-flex-styles.scss index 6ae1a79dd5d2..8a35b92ad25a 100644 --- a/src/material/table/_table-flex-styles.scss +++ b/src/material/table/_table-flex-styles.scss @@ -26,15 +26,6 @@ $row-horizontal-padding: 24px; border-style: solid; align-items: center; box-sizing: border-box; - - // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo - // element that will stretch the row the correct height. See: - // https://connect.microsoft.com/IE/feedback/details/802625 - &::after { - display: inline-block; - min-height: inherit; - content: ''; - } } mat-cell, mat-header-cell, mat-footer-cell { diff --git a/src/material/table/table.md b/src/material/table/table.md index e3f869bcebe0..2262512db488 100644 --- a/src/material/table/table.md +++ b/src/material/table/table.md @@ -110,17 +110,17 @@ For most real-world applications, providing the table a `DataSource` instance wi manage data. The `DataSource` is meant to serve as a place to encapsulate any sorting, filtering, pagination, and data retrieval logic specific to the application. -A `DataSource` is simply a class that has at a minimum the following methods: `connect` and -`disconnect`. The `connect` method will be called by the table to provide an `Observable` that emits +A `DataSource` is simply a class that has at a minimum the following methods: `connect` and +`disconnect`. The `connect` method will be called by the table to provide an `Observable` that emits the data array that should be rendered. The table will call `disconnect` when the table is destroyed, -which may be the right time to clean up any subscriptions that may have been registered in the -`connect` method. +which may be the right time to clean up any subscriptions that may have been registered in the +`connect` method. Although Angular Material provides a ready-made table `DataSource` class, `MatTableDataSource`, you may -want to create your own custom `DataSource` class for more complex use cases. This can be done by -extending the abstract `DataSource` class with a custom `DataSource` class that then implements the -`connect` and `disconnect` methods. For use cases where the custom `DataSource` must also inherit -functionality by extending a different base class, the `DataSource` base class can be +want to create your own custom `DataSource` class for more complex use cases. This can be done by +extending the abstract `DataSource` class with a custom `DataSource` class that then implements the +`connect` and `disconnect` methods. For use cases where the custom `DataSource` must also inherit +functionality by extending a different base class, the `DataSource` base class can be implemented instead (`MyCustomDataSource extends SomeOtherBaseClass implements DataSource`) to respect Typescript's restriction to only implement one base class. @@ -357,9 +357,6 @@ To do this, add the `sticky` or `stickyEnd` directive to the `ng-container` colu -This feature is supported by Chrome, Firefox, Safari, and Edge. It is not supported in IE, but -it does fail gracefully so that the rows simply do not stick. - Note that on Safari mobile when using the flex-based table, a cell stuck in more than one direction will struggle to stay in the correct position as you scroll. For example, if a header row is stuck to the top and the first column is stuck, then the top-left-most cell will appear jittery as you