mat table column with filter the sort arrows is not visible

Question

I am new to angular... My mat-table is working fine, but when column has filter and sorting functionality the sort arrows is not visible on columns with filter. I was trying to adjust the column wight, but no matter how small or big the column the arrows is not visible. There is sample project that reproduce my issue.

https://stackblitz.com/edit/angular-hbakxo-sdjyya?file=app%2Ftable-filtering-example.ts

Answer 1

It will only be visible for the column width greater than mat form field

and for reducing the width of form field use exact size not %. percentage doesn't change sort header width

.mat-form-field {
    font-size: 13px;
    width: 110px; //put the value you need
  }

here is the slackblitz edit of your link.

Answer 2

setting your column width got it to display

.mat-column-position {
 width: 25%;
}