Angular material sortable table - always show sort icons (not only when hovering)

Question

I'm checking the sortable table examples at https://material.angular.io/components/sort/overview

What I don't like is that the sort icons only show when hovering the header of a column.

Is there any way to make them always be there? (not only on hover)

score 3 · Answer 1 · answered Mar 05 '19 at 08:17

3

If a column is not yet sorted, hovering/focusing/longpressing the header will show the sort icon.If a column is sorted, the icon will show until the column becomes unsorted. If you want to show sort icons always, you have to sort one of the column in the table like this:

   <table matSort (matSortChange)="sortData($event)" matSortActive="name" 
   matSortDirection="asc" matSortDisableClear>

answered Mar 05 '19 at 08:17

Keti Kutateladze

51
5

@Keti Kutateladze, I want to show sort icon on multiple columns at the same time. What should be done? – Arpit Kumar Jul 26 '19 at 06:10
How a user will be able to know that column in sortable or not without hovering or focus on it? Thanks – Niral Munjariya Oct 02 '19 at 11:39
Exactly what I was looking for, but how do you avoid hiding the icon? – Royer Adames Aug 06 '22 at 21:18

score 2 · Answer 2 · answered Oct 02 '19 at 12:54

Apply below style globally. It will always show sort icons and also change the icon based on the sort direction.

.mat-table{
  .mat-sort-header-arrow {
    opacity: 0 !important;
    display: none !important;
  }
  th[aria-sort='ascending'] {
    color: #0069c0;
    .mat-sort-header-button {
      &:before {
        border-bottom-color: #0069c0 !important;
      }
      &:after {
        border-top-color: transparent !important;
      }
    }
  }
  th[aria-sort='descending'] {
    color: #0069c0;
    .mat-sort-header-button {
      &:before {
        border-bottom-color: transparent !important;
      }
      &:after {
        border-top-color: #0069c0 !important;
      }
    }
  }
  .mat-sort-header-button {
    transition: all ease-in 300ms;
    &:before,
    &:after {
      border: 4px solid transparent;
      content: '';
      display: block;
      height: 0;
      right: 10%;
      top: 50%;
      position: absolute;
      width: 0;
    }
    &:before {
      border-bottom-color: #ababab;
      margin-top: -10px;
    }
    &:after {
      border-top-color: #ababab;
      margin-top: 1px;
    }
  }
}

Note: It will hide default angular sorting icons.

danil.n · Answer 3 · 2020-02-26T12:17:20.100

You need to apply CSS styles to your .mat-table/table selector:

.mat-sort-header-sorted .mat-sort-header-arrow {
  transform: none !important;
  opacity: 1 !important;
}
.mat-sort-header-arrow {
  transform: none !important;
  opacity: 0.54 !important;
}

Note: in some cases you need to use ::ng-deep before .mat-sort-header... for applying styles

Then you need to disable Angular animation in your table, because you will see small animation on hover, so add this to .mat-table/table selector in template:

    <table
      ...[your inputs]
      [@.disabled]="true"
    >

And the last step - for example your standart sort direction is "asc" then after change one of your sort to "desc" and after that choose another one with sort "asc", you will see that icon of "desc" would not reset to your standart "asc" direction, so the solution is to set CSS styles for icons that have not defined direction:

  th:not([aria-sort]) {
    ::ng-deep .mat-sort-header-indicator {
      transform: translateY(10px) !important;
      .mat-sort-header-pointer-left {
        transform: rotate(45deg) !important;
      }
      .mat-sort-header-pointer-right {
        transform: rotate(-45deg) !important;
      }
    }
  }

score 0 · Answer 4 · edited Jul 11 '19 at 08:41

0

Try this:

.mat-sort-header-arrow {
  opacity: .4!important;
}

edited Jul 11 '19 at 08:41

Adrita Sharma

21,581
10
69
79

answered Jul 11 '19 at 08:11

user3575818

1
1

Angular material sortable table - always show sort icons (not only when hovering)

4 Answers4