Edit Table Column Header

Question

I wanted to know if there is any way we can edit the column headers of a mat-table and store the new value in some variable. I haven't found a satisfactory answer anywhere to this.

Answer 1

You can easily edit the column headers of a table and store the new value in some variable as follows:

.html file

<table>
  <tr>
    <th>{{heading1}}</th>
    <th>{{heading2}}</th>
    <th>{{heading3}}</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

.ts file

heading1 = 'Test1';
heading2 = 'Test2';
heading3 = 'Test3';

Now, the table heading will be Test1, Test2 and Test3. So, now if you change the heading1 variable to 'Heading 1'. The Table's first heading will be changed to Heading 1.

---

There are lots of efficient and cleaner way to do the same.
Do read this: https://material.angular.io/components/table/overview