CODEWITHSUNDEEP
angularangular-materialangular-material2
GeForce RTX 4090
GeForce RTX 4090

Reputation: 3498

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

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)

Upvotes: 1

Views: 8852

Answers (4)

danil.n
danil.n

Reputation: 21

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;
      }
    }
  }

Upvotes: 2

Niral Munjariya
Niral Munjariya

Reputation: 1381

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.

Upvotes: 2

user3575818
user3575818

Reputation: 1

Try this:

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

Upvotes: 0

Keti Kutateladze
Keti Kutateladze

Reputation: 51

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>

Upvotes: 3

Related Questions