Skip to content

Commit

Permalink
refactor(material/table): clean up IE workarounds (#23462)
Browse files Browse the repository at this point in the history
Cleans up the workarounds for IE in the table module.

(cherry picked from commit 3de4ab8)
  • Loading branch information
crisbeto authored and wagnermaciel committed Jan 7, 2022
1 parent 9b96999 commit 6032385
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 26 deletions.
7 changes: 1 addition & 6 deletions src/cdk/table/cell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
9 changes: 0 additions & 9 deletions src/material/table/_table-flex-styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
19 changes: 8 additions & 11 deletions src/material/table/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

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

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

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
Expand Down

0 comments on commit 6032385

Please sign in to comment.