Skip to content

Commit 3de4ab8

Browse files
authored
refactor(material/table): clean up IE workarounds (#23462)
Cleans up the workarounds for IE in the table module.
1 parent faf4b16 commit 3de4ab8

File tree

3 files changed

+9
-26
lines changed

3 files changed

+9
-26
lines changed

src/cdk/table/cell.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -150,12 +150,7 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
150150
/** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
151151
export class BaseCdkCell {
152152
constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
153-
// If IE 11 is dropped before we switch to setting a single class name, change to multi param
154-
// with destructuring.
155-
const classList = elementRef.nativeElement.classList;
156-
for (const className of columnDef._columnCssClassName) {
157-
classList.add(className);
158-
}
153+
elementRef.nativeElement.classList.add(...columnDef._columnCssClassName);
159154
}
160155
}
161156

src/material/table/_table-flex-styles.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,6 @@ $row-horizontal-padding: 24px;
2626
border-style: solid;
2727
align-items: center;
2828
box-sizing: border-box;
29-
30-
// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
31-
// element that will stretch the row the correct height. See:
32-
// https://connect.microsoft.com/IE/feedback/details/802625
33-
&::after {
34-
display: inline-block;
35-
min-height: inherit;
36-
content: '';
37-
}
3829
}
3930

4031
mat-cell, mat-header-cell, mat-footer-cell {

src/material/table/table.md

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -110,17 +110,17 @@ For most real-world applications, providing the table a `DataSource` instance wi
110110
manage data. The `DataSource` is meant to serve as a place to encapsulate any sorting, filtering,
111111
pagination, and data retrieval logic specific to the application.
112112

113-
A `DataSource` is simply a class that has at a minimum the following methods: `connect` and
114-
`disconnect`. The `connect` method will be called by the table to provide an `Observable` that emits
113+
A `DataSource` is simply a class that has at a minimum the following methods: `connect` and
114+
`disconnect`. The `connect` method will be called by the table to provide an `Observable` that emits
115115
the data array that should be rendered. The table will call `disconnect` when the table is destroyed,
116-
which may be the right time to clean up any subscriptions that may have been registered in the
117-
`connect` method.
116+
which may be the right time to clean up any subscriptions that may have been registered in the
117+
`connect` method.
118118

119119
Although Angular Material provides a ready-made table `DataSource` class, `MatTableDataSource`, you may
120-
want to create your own custom `DataSource` class for more complex use cases. This can be done by
121-
extending the abstract `DataSource` class with a custom `DataSource` class that then implements the
122-
`connect` and `disconnect` methods. For use cases where the custom `DataSource` must also inherit
123-
functionality by extending a different base class, the `DataSource` base class can be
120+
want to create your own custom `DataSource` class for more complex use cases. This can be done by
121+
extending the abstract `DataSource` class with a custom `DataSource` class that then implements the
122+
`connect` and `disconnect` methods. For use cases where the custom `DataSource` must also inherit
123+
functionality by extending a different base class, the `DataSource` base class can be
124124
implemented instead (`MyCustomDataSource extends SomeOtherBaseClass implements DataSource`) to
125125
respect Typescript's restriction to only implement one base class.
126126

@@ -357,9 +357,6 @@ To do this, add the `sticky` or `stickyEnd` directive to the `ng-container` colu
357357

358358
<!--- example(table-sticky-columns) -->
359359

360-
This feature is supported by Chrome, Firefox, Safari, and Edge. It is not supported in IE, but
361-
it does fail gracefully so that the rows simply do not stick.
362-
363360
Note that on Safari mobile when using the flex-based table, a cell stuck in more than one direction
364361
will struggle to stay in the correct position as you scroll. For example, if a header row is stuck
365362
to the top and the first column is stuck, then the top-left-most cell will appear jittery as you

0 commit comments

Comments
 (0)