[Table] Sort arrows are not rendered properly in tabs

[kevincaradant]

Bug, feature request, or proposal:

BUG
Plunker: https://plnkr.co/edit/Idc73Kn0ViLI4Qpsp98g?p=preview

When you set your sort by default as ASC or DESC like that:

@ViewChild(MatSort) mdSort: MatSort;

ngOnInit() {this.mdSort.start = 'desc';}

The arrow is just ugly ( 2 times on 3 ). If you click again on the sort icon, it's pretty :)

BTW: Under IE11 it's always ugly. Same issue or not I don't know

What is the current behavior?

What is the expected behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3
OS: Windows 7 Pro 64 bits
TS: 2.4.1
Material: 2.0.0-beta.11
Browser: Chrome V60

Is there anything else we should know?

Nothing #

[andrewseguin]

I was able to reproduce the issue and I suspect what is happening here is that you are setting an invalid direction (e.g. ascending instead of asc)

Plunker to show issue: https://plnkr.co/edit/vf61Yr6tvDtOlKRr9zeN?p=preview

Can you verify that this was the issue?

Adding PR #7378 that will throw an error if the direction is invalid.

[kevincaradant]

Hi

Good try, but I think it's not the problem.

In fact, I found something interesting. It's when I use a <md-tab> and if my <md-table> is not in the first tab (loaded on the load of the page), the initialization of arrow is bad. Sorry I didn't have the time to do a plunker now ( if you don't understand, I will try to do it begining with yours ) but the idea is something like that:

<mat-tab-group *ngIf="accountExist">
    <mat-tab label="{{'USER' | translate}}">
        <mat-card fxLayout="column">
          <mat-card-content>
            <app-info-user></app-info-user>  // my first <md-table> is inside this component
          </mat-card-content>
        </mat-card>
    </mat-tab>

    <mat-tab label="{{'FAMILY' | translate}}">
        <mat-card fxLayout="column">
          <mat-card-content>
            <app-families-user></app-families-user> // my second <md-table> is inside this component
          </mat-card-content>
        </mat-card>
    </mat-tab>
</mat-tab-group>

The second table "families" will have a ugly arrow even with with a sort "asc" or "desc"

[kevincaradant]

@andrewseguin , Have you seen my previous message, why this issue is closed ?

It's not the same problem, so the solution mentioned in your PR will throw only the error but I will continue to get this error because the name "asc" is correct. For me, it's just link to the <md-table> which is included in a <md-tab> :)

Regards

NB: I will try to do a plunkr

[andrewseguin]

Hey yeah - let's open this back up to figure out what's going on. Sounds like perhaps animations isn't firing off.

Definitely try and get a plunker going so we can dive into this. Thanks

[kevincaradant]

This is the plunker :)

https://plnkr.co/edit/Idc73Kn0ViLI4Qpsp98g?p=preview

Go on the second tab => "family"

[andrewseguin]

Great thanks for the repro. Looks like the states are being set properly but the animations framework isn't animating the arrow. I'll talk to the core animations guy to see if we can dive into this and see why it's not triggering.

[kevincaradant]

Hello, any news about this bug ? :)

[andrewseguin]

Coming soon - looks like this is similar to a wider issue with tabs not playing nice with Angular's content projection. In short, components in tabs are initialized without actually being on the DOM, which breaks for some animations (e.g. expansion panel). Sorry for the wait on this

[kevincaradant]

@andrewseguin, don't be sorry. I just asking the status about the issue even if I'm sure, there are some others issues (high priority) which need to be fixed ASAP.
BTW, thank you for the explanations :)

[alexciesielski]

Still an issue on Angular 5.2.2 and Material 5.1.0

[andrewseguin]

Keep an eye on #8921 for the fix. When it's merged then you can make it so that your tabs load lazily which means Angular animations will work correctly for content in tabs

[androidovshchik]

It's a very very very bad bug for performance (@angular/material^5.2.0)
It occured in mat-tabs, so the single solution is to hide these arrows
why simply not to use images? It's simple and it will work

.mat-sort-header-arrow {
  display: none !important;
}

[sielver]

Using 6.0.0 Beta and lazily-loaded tabs "fixes" the issue but it shouldn't be necessary (also, using lazy tabs is not necessarily wanted depending on the app)...

[VangelisAlSghir]

I found a workaround for this:

The first time I change to the tab with the table, I call a method which does the following:

table.ngOnDestroy();
dataSource = new DataSource(data); // This is needed because ngOnDestroy disconnects the data source.
table.ngOnInit();

Note that table is the MatTable object and dataSource is bound to the table:
<mat-table [dataSource]="dataSource" matSort>

It's not a good solution and kind of a hack, but it works for me. Maybe this helps some other people too.

[androidovshchik]

@sielver not working unfortunately

In gif i have tried to show what is the real problem

[sielver]

@androidovshchik I've had it working on my end. Not an ideal solution but no glitch to be seen.

See here for an example for wrapping tabs within <ng-template matTabContent>.

edit: fixed url

[hoangnguyen208]

Thanks @Barbiero, it works for now while we are all waiting for a stable fix

[mikecabana]

@Barbiero Awesome fix for now!

[ganeshkantu]

@Barbiero this is beautiful and works as expected.

[ganeshkantu]

@Barbiero the css fix seems to break if a default sort order is specified. The sort indicator is missing on the default sort column.

[WaltDaniels]

Thanks @Barbiero, this worked for me as well!

[LautaroLorenz]

@Barbiero solution worked for me, very thanks

[ruskom]

Thanks @Barbiero

[ChristopherFQ]

Thanks @Barbiero this solution works fine

[edouardsouan]

To complete @ganeshkantu sayings, the arrow appears for the active sortable column only on sort action (click on the column).

Turning the opacity to 1 seems to fix the default sort display.
Also I've noticed that the attribute [@arrowOpacity] is set with the function _getArrowViewState().

Does anyone know how this state work ?

[eyalewin-zz]

using @Barbiero fix has two issues for me:

1. if using the opacity:0 than the arrows are hidden
2. when using the transform, the arrows are shown well, but the click isn't changing the direction (asc/desc)
   is that the issue as well for all of you?

my code looks like this:

 <mat-table #table [dataSource]="renderedDataSource" matSort="sort">
        <ng-container *ngFor="let col of columnDefs | columnDefinitionFilter" matColumnDef="{{col.field}}">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{col.headerName}}</mat-header-cell>
            <mat-cell *matCellDef="let row">
                <span>{{someData}}</span>             
            </mat-cell>
        </ng-container>

[Maxlmore]

So even with Version Angular Material 6.0.1, this misbehaviour still occurs :(

[gabaril]

Same here. Can't wait to have an update on this matters. This glitch is killing me!

[gabaril]

Scratch that, lazy-loading the tab content seems to fix the issue.
Try putting <ng-template matTabContent></ng-template> around your tab content to fix the rendering issue.
https://material.angular.io/components/tabs/overview#lazy-loading

[SENSEi-Chris]

tl:dr - Upgrade to Material 6.3.0.

In case anyone is coming up on this bug now - it appears to have been resolved for Material 6.3.0. At the time I post this a lot of new projects (including mine) were starting on Material 6.2.1, as there was/is a bug in the new Angular 6 ng add @angular/material command in combination with Material 6.3.0, meaning one had to fall back on the older version, which still contained the table header bug.

[stephenautomatik]

It's still an issue for me after upgrading, but only noticeable when hovering over sort headings or switching back and forth between tabs.

Currently on ng 6.1.2 and material 6.4.3

Lazy loading the tab content fixes the sort issue, but breaks the dynamicHeight functionality because the content needs to re-render every time you switch tabs...

[fknebels]

Will this be backported to Angular 5 if fixed? I just ran into this in 5.2.5 and we've only got corporate approval for Angular 5.

[eddyzhu1980]

which material version has the fix? so I can upgrade to it.

[SebasWebDev]

I fixed it with default CSS. As the script adds the styling inline, that styling will overwrite the default CSS, so the arrows will show as expected.

.mat-table {
    .mat-header-cell {
      .mat-sort-header-arrow {
        opacity: 0;
        transform: translateY(0px);
        .mat-sort-header-pointer-left {
          transform: rotate(-45deg);
        }
        .mat-sort-header-pointer-right {
          transform: rotate(45deg);
        }
      }
    }
  }

[EasiGregory]

Presently on angular-material v6.3.0

I have multiple tabs that contain sortable tables, this sort arrow render issue only shows as expected on one of the sortable tables, all other tables have this rendering issue. After the initial click of that column header, the arrow is then rendered as expected until the page is reloaded.

Any update on a fix for this issue?

[EricParks]

Still an issue for me in Material 7.2.0. Can't put a sortable table inside of a mat tab group. The table header arrow changes to a "T" after clicking one of the parent tabs.

[manishvyas1911]

The issue was due to mat-table in mat-tab
You just need to lazy load mat-tab.

[eddyzhu1980]

The issue was due to mat-table in mat-tab
You just need to lazy load mat-tab.

Thank you very much. It works perfectly.

[IrinaPyl]

I still have this issue https://gyazo.com/d5b184b83fe43eb58196705ac5d9a4c6 with navigation tabs mat-tab-nav-bar.
Angular: 7.2.15
Material: 7.2.2
Typescript: 3.2.4
Chrome: 74.0.3729.157 (Official Build) (64-bit)
OS: macOS Mojave 10.14.4

[vzR]

same issue present also in the current angular-material documentation https://material.angular.io/components/table/overview#sorting

Chrome: Version 75.0.3770.142 (Official Build) (64-bit)
OS: Windows 10 64-bit

[femtozer]

I still have rendering issues with these arrows :

Angular: 8.3.20
Material: 8.2.3
Typescript: 3.5.3
Chrome: 79.0.3945.117 (Official Build) (64-bit)
OS: macOS Mojave 10.14.6

[MoshinaT]

Scratch that, lazy-loading the tab content seems to fix the issue.
Try putting around your tab content to fix the rendering issue.
https://material.angular.io/components/tabs/overview#lazy-loading

But it is removing the sorting functionality