how to show row data dynamically for table in angular 7

Question

I have an HTML page in which I want to create a table. The columns in this table are dynamic which means that they are fetched from the server into a variable in the component using any[] type. The data in this table is also dynamic which means that at the time of programming I don't know which columns and data will come to get bound in the table.

I have tried below code but it doesn't seem to work or give any error. It just creates empty td in the tbody. Expense.component.html

    <div id="invoice-items-details" class="pt-2">
     <div class="row">
         <div class="table-responsive col-sm-12">
           <table class="table">
             <thead>
             <tr>
              <th class="text-left" *ngFor = "let column of displayColumns">
                {{column.name}}
              </th>                                                                        
             </tr>
       </thead>
     <tbody>
           <tr *ngFor="let list of userInfoList ; let i=index">
              <td *ngFor="let key of list | keyvalue" > 
               {{key.value}}
             </td>
           </tr>
    </tbody>                                    
    </table>
    </div>
    </div>                                                    
  </div>

my dynamic columns list is displayColumns =

[ 
{name: "S.No", value: "sNo"}
{name: "Customer", value: "CustomerName"}
{name: "Quantity", value: "Quantity"}
{name: "Weight", value: "Weight"}
{name: "TotalAmount", value: "TotalAmount"}
{name: "TotalOrders", value: "TotalOrders"}
] 

- this array will come dynamically ... and my row data is

userInfoList =[ 
{CustomerName: "bindu", Quantity: "4232", Weight: "8970.9700", TotalAmount: "28810924.31", TotalOrders: "135", sNo =1}
{CustomerName: "hima", Quantity: "54", Weight: "104.0000", TotalAmount: "168268.00", TotalOrders: "3", sNo:2}
{CustomerName: "testby bindu", Quantity: "23", Weight: "12.0000", TotalAmount: "20076.00", TotalOrders: "1", sNo:3}
{CustomerName: "Bindu", Quantity: "23", Weight: "33.0000", TotalAmount: "51870.00", TotalOrders: "1", sNo:4}
 {CustomerName: "test", Quantity: "117", Weight: "282.0000", TotalAmount: "974760.72", TotalOrders: "9", sNo:5}

this array also come dynamically..

im loading data also but order missing with respect column so colud u please suggest me the slotion bellow the what i getting data it was missing order through column name.

Answer 1

here you can check the live working example:

In this dynamic data is showing in table row in Angular 9 and with this youtube video, you will get easily.

Dynamic data in table row angular 9

Thank you

Answer 2

You could build a pipe to convert your data.

You can take a look at this Stackblitz demo.

interface ColumnMetaData {name: string;value: string;}

@Pipe({name: "fixColumnOrder"})
export class FixColumnOrderPipe implements PipeTransform {
  transform(value: any, columns?: ColumnMetaData[]): any[] {
    return columns.map((c: ColumnMetaData) => value[c.value]);
  }
}

Then you could use it like this:

<tr *ngFor="let user of userInfoList">
  <td *ngFor="let columnData of (user | fixColumnOrder: displayColumns)">
    {{columnData}}
  </td>
</tr>

[SIDE NOTE]: Sometimes, when you're concerned about performance (re-executing the pipe over and over again for every data), you can use a memoization technique to avoid it, or just use a library to do that, like memo-decorator. Unfortunately, in this case, it won't help that much, because each row has a different data, but it's nice to know there's such a library available.

npm install --save memo-decorator

import memo from 'memo-decorator';

interface ColumnMetaData {name: string;value: string;}

@Pipe({name: "fixColumnOrder"})
export class FixColumnOrderPipe implements PipeTransform {
  @memo()
  transform(value: any, columns?: ColumnMetaData[]): any[] {
    return columns.map((c: ColumnMetaData) => value[c.value]);
  }
}

Answer 3

One quick workaround would be to access the properties directly using the value property of displayColumns variable. Try the following

<div id="invoice-items-details" class="pt-2">
  <div class="row">
    <div class="table-responsive col-sm-12">
      <table class="table">
        <thead>
          <tr>
            <th class="text-left" *ngFor="let column of displayColumns">
              {{column.name}}
            </th>                                                                        
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let list of userInfoList; let i=index">
            <td *ngFor="let column of displayColumns">
              {{ list[column['value']] }}
            </td>
          </tr>                                                                        
        </tbody>                                    
      </table>
    </div>
  </div>                                                    
</div>