Reorder Table columns Angular 8

Question

I have a table built in Angular 8. I am not using Material UI.

I want to reorder the columns in the table using JSON. Is there any way that could be done?

My Angular table code is like below:

 <table>
   <thead class="thead-light">
      <tr>
         <th *ngFor="let data of tableHeaders">
            {{ data.value }}
         </th>
         
      </tr>
   </thead>
   <tbody>
      <tr *ngFor="let data of transactions ">
         <td>{{ data.firstName }}</td>
         <td>{{ data.regNo }}</td>
         <td>{{ data.course }}</td>
      </tr>
   </tbody>
</table>

My tableheader json:

this.tableHeaders = [
          {
            "id": 'first_name', 
            "value":"Name",
          },
          {
            "id": 'reg_no', 
            "value":"Reg No"
          },
          {
            "id": 'course_name', 
            "value":"Course"
          },
          
        ]

While I am able to change the order of the table headers by setting an id and sorting the array - tableHeaders, but how do I do the same for the td?

Any help would be appreciated.

Answer 1

You need to modify header and content's key to make it relate together something like

Full example: Stackblitz

.ts

this.tableHeaders = [
  {
    "id": 'first_name',
    "value":"Name",
    "key": "firstName"
  },
  {
    "id": 'reg_no',
    "value":"Reg No",
    "key":"regNo"
  },
  {
    "id": 'course_name',
    "value":"Course",
    "key": "course"
  },
]

.html

<table>
  <thead class="thead-light">
  <tr>
    <th *ngFor="let data of tableHeaders">
      {{ data.value }}
    </th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of transactions">
    <td *ngFor="let header of tableHeaders">
      {{ data[header.key] }}
    </td>
  </tr>
  </tbody>
</table>