CODEWITHSUNDEEP
angularangular-material
Sankalp
Sankalp

Reputation: 1288

How to change header display text in Angular material table?

I'm trying to follow the Angular material table given here- https://material.angular.io/components/table/overview

I am using ngFor to display all available columns in displayedColumns. So hardcoding the column names isn't an option for me.

While I understand how displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; is there to choose which columns to display, how can I change the display name when the table is rendered? Some of the names in my table are lengthy and are messing up the table render.

Upvotes: 5

Views: 11368

Answers (4)

DevLoverUmar
DevLoverUmar

Reputation: 13933

I solved the same problem as

<table mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="Range" matSortDirection="asc" matSortDisableClear>
    <ng-container *ngFor="let dispCol of displayedColumns; let colIndex = index" matColumnDef="{{dispCol.key}}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{dispCol.header}}</th>
        <td mat-cell *matCellDef="let element" class="mat-column-vinCode">{{element[dispCol.key]}}</td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="displayedColumnsKeys; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsKeys"></tr>
</table>

And in component

export class RawSignalsContainerComponent implements OnInit{
constructor() { }

@Input() dataSource: Array<SignalCount>;
displayedColumns: Array<any>;
displayedColumnsKeys: string[];

ngOnInit() {
  displayedColumns= [
      {
        key: 'range',
        header: 'Range'
      },
      {
        key: 'lowRange',
        header: 'Low Range'
      },
      {
        key: 'highRange',
        header: 'High Range'
      },
      {
        key: 'populationSize',
        header: 'Population Size'
      },
      {
        key: 'populationPerc',
        header: '% of Population'
      }
    ];
  this.displayedColumnsKeys = this.displayedColumns.map(col => col.key);
}

Here, dataSource passed as input to the component is the array of objects with all keys of displayedColumns. i.e., 

export interface SignalCount{
range:string;
lowRange:number;
highRange:number;
populationSize:number;
populationPerc:number;
}

Upvotes: 5

Lars R&#248;dal
Lars R&#248;dal

Reputation: 876

Just create a definition with the necessary data, and loop these. I created a stackblitz for you: https://stackblitz.com/edit/angular-ykrghm

Here are the important parts:

  <ng-container *ngFor="let def of tableDef">
<ng-container [matColumnDef]="def.key">
  <th mat-header-cell *matHeaderCellDef> {{def.header}} </th>
  <td [ngClass]="def.className" mat-cell *matCellDef="let element"> {{element[def.key]}} </td>
</ng-container>

--

  tableDef: Array<any> = [
    {
      key: 'position',
      header: 'Position',
      className: 'something'
    },    {
      key: 'name',
      header: 'Element Name',
      className: 'anElement'
    },    {
      key: 'weight',
      header: 'Weight',
      className: 'number'
    },    {
      key: 'symbol',
      header: 'A long text to display in header',
      className: 'something'
    },
  ]

Upvotes: 9

nks
nks

Reputation: 662

In this case, you have to add one cell renderer method to check the rendered string length in your component, and inside the method, you can do whatever you want. Or you can ellipsis text by CSS property "text-overflow: ellipsis ... ETC"

You can add one tooltip on hover of the cell if you want to display original value.

//HTML

<ng-container matColumnDef="symbol">
  <th mat-header-cell *matHeaderCellDef> Symbol </th>
   // Like checkStringLength() method
  <td mat-cell *matCellDef="let element"> {{checkStringLength(element.symbol)}} </td>
</ng-container>

// Method

 checkStringLength(value:string){
   // Your logic 
   if(value.length < 30){
       Return value
     }else{
       // Here you can write your logic
       Return "Custom Value"
    }
}

Upvotes: 0

Fabian K&#252;ng
Fabian K&#252;ng

Reputation: 6183

As you can see in the first example of the link you posted, you can set the displayed header name easily in the template (here the displayed header name for the column position will be No.):

<!-- Position Column -->
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

Upvotes: 0

Related Questions