[Table] Sort arrows are not rendered properly in tabs #7291

kevincaradant · 2017-09-25T12:37:19Z

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 #

The text was updated successfully, but these errors were encountered:

andrewseguin · 2017-09-27T22:02:08Z

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 · 2017-09-28T08:02:04Z

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 · 2017-10-01T22:18:01Z

@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 · 2017-10-01T22:23:39Z

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 · 2017-10-01T22:30:15Z

This is the plunker :)

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

Go on the second tab => "family"

andrewseguin · 2017-10-06T23:50:16Z

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 · 2017-11-23T10:51:26Z

Hello, any news about this bug ? :)

andrewseguin · 2017-11-27T19:49:12Z

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 · 2017-11-28T00:59:03Z

@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 · 2018-01-30T10:19:33Z

Still an issue on Angular 5.2.2 and Material 5.1.0

andrewseguin · 2018-01-30T19:48:08Z

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 · 2018-02-10T15:11:53Z

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 · 2018-02-14T13:34:39Z

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 · 2018-02-15T15:39:08Z

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 · 2018-02-22T08:36:56Z

@sielver not working unfortunately

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

sielver · 2018-02-22T09:02:07Z

@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

ruskom · 2018-04-25T09:09:02Z

Thanks @Barbiero

ChristopherFQ · 2018-04-26T08:00:33Z

Thanks @Barbiero this solution works fine

edouardsouan · 2018-05-02T06:34:59Z

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 · 2018-05-08T13:54:23Z

using @Barbiero fix has two issues for me:

if using the opacity:0 than the arrows are hidden
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 · 2018-05-08T21:40:50Z

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

gabaril · 2018-05-15T13:10:26Z

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

gabaril · 2018-05-15T13:32:35Z

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 · 2018-07-05T13:57:16Z

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 · 2018-08-09T21:08:22Z

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 · 2018-08-30T19:28:35Z

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 · 2018-09-20T23:55:17Z

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

SebasWebDev · 2018-10-05T11:32:32Z

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 · 2018-10-16T15:45:57Z

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 · 2018-12-24T19:18:22Z

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 · 2019-01-13T09:39:12Z

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

eddyzhu1980 · 2019-01-16T00:02:48Z

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 · 2019-05-20T08:17:38Z

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 · 2019-07-25T15:51:12Z

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 · 2020-01-24T12:19:43Z

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 · 2020-03-23T08:51:43Z

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

crisbeto · 2024-12-02T14:04:01Z

Fixed in #30057.

angular-automatic-lock-bot · 2025-01-02T00:11:56Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

kevincaradant changed the title ~~BUG: Ugly arrow on sort for data-table (with arrow by default)~~ Ugly arrow on sort for data-table (with arrow by default) Sep 25, 2017

josephperrott assigned andrewseguin Sep 25, 2017

josephperrott added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Sep 25, 2017

donroyco mentioned this issue Sep 25, 2017

Sort arrow pieces appear horizontally rather than vertically. #7304

Closed

andrewseguin mentioned this issue Sep 27, 2017

fix(sort): throw error on invalid direction #7378

Merged

andrewseguin added has pr labels Sep 27, 2017

andrewseguin closed this as completed in #7378 Sep 29, 2017

andrewseguin reopened this Oct 1, 2017

andrewseguin changed the title ~~Ugly arrow on sort for data-table (with arrow by default)~~ [Table] Sort arrows are not rendered properly in tabs Oct 19, 2017

andrewseguin added P2 The issue is important to a large percentage of users, with a workaround and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent mat-table labels Oct 19, 2017

gabaril mentioned this issue May 15, 2018

[Bug] mat-table with matsort in mat-tab rendering arrow issue #11338

Closed

jelbourn added the area: material/table label May 26, 2020

mmalerba removed the has pr label Dec 8, 2022

andrewseguin removed their assignment Jun 3, 2023

crisbeto self-assigned this Dec 2, 2024

crisbeto mentioned this issue Dec 2, 2024

fix(material/sort): simplify animations #30057

Merged

crisbeto closed this as completed Dec 2, 2024

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 2, 2025

[Table] Sort arrows are not rendered properly in tabs #7291

[Table] Sort arrows are not rendered properly in tabs #7291

Comments

kevincaradant commented Sep 25, 2017 • edited Loading

Bug, feature request, or proposal:

What is the current behavior?

What is the expected behavior?

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

Is there anything else we should know?

andrewseguin commented Sep 27, 2017 • edited Loading

kevincaradant commented Sep 28, 2017 • edited Loading

kevincaradant commented Oct 1, 2017 • edited Loading

andrewseguin commented Oct 1, 2017

kevincaradant commented Oct 1, 2017 • edited Loading

andrewseguin commented Oct 6, 2017

kevincaradant commented Nov 23, 2017

andrewseguin commented Nov 27, 2017

kevincaradant commented Nov 28, 2017

alexciesielski commented Jan 30, 2018

andrewseguin commented Jan 30, 2018

androidovshchik commented Feb 10, 2018 • edited Loading

sielver commented Feb 14, 2018

VangelisAlSghir commented Feb 15, 2018 • edited Loading

androidovshchik commented Feb 22, 2018 • edited Loading

sielver commented Feb 22, 2018 • edited Loading

ruskom commented Apr 25, 2018

ChristopherFQ commented Apr 26, 2018

edouardsouan commented May 2, 2018

eyalewin-zz commented May 8, 2018

Maxlmore commented May 8, 2018 • edited Loading

gabaril commented May 15, 2018

gabaril commented May 15, 2018 • edited Loading

SENSEi-Chris commented Jul 5, 2018

stephenautomatik commented Aug 9, 2018 • edited Loading

fknebels commented Aug 30, 2018

eddyzhu1980 commented Sep 20, 2018

SebasWebDev commented Oct 5, 2018 • edited Loading

EasiGregory commented Oct 16, 2018 • edited Loading

EricParks commented Dec 24, 2018

manishvyas1911 commented Jan 13, 2019

eddyzhu1980 commented Jan 16, 2019

IrinaPyl commented May 20, 2019

vzR commented Jul 25, 2019

femtozer commented Jan 24, 2020

MoshinaT commented Mar 23, 2020

crisbeto commented Dec 2, 2024

angular-automatic-lock-bot bot commented Jan 2, 2025

kevincaradant commented Sep 25, 2017 •

edited

Loading

andrewseguin commented Sep 27, 2017 •

edited

Loading

kevincaradant commented Sep 28, 2017 •

edited

Loading

kevincaradant commented Oct 1, 2017 •

edited

Loading

kevincaradant commented Oct 1, 2017 •

edited

Loading

androidovshchik commented Feb 10, 2018 •

edited

Loading

VangelisAlSghir commented Feb 15, 2018 •

edited

Loading

androidovshchik commented Feb 22, 2018 •

edited

Loading

sielver commented Feb 22, 2018 •

edited

Loading

Maxlmore commented May 8, 2018 •

edited

Loading

gabaril commented May 15, 2018 •

edited

Loading

stephenautomatik commented Aug 9, 2018 •

edited

Loading

SebasWebDev commented Oct 5, 2018 •

edited

Loading

EasiGregory commented Oct 16, 2018 •

edited

Loading