Display a table based on an array without using table elements but using display properties

Question

Hi I have created a table using display properties, now i have an array and i want to iterate through that array and pring the value of column and rows, here is my code : - html:=

<div id='table'>
  <!-- table head -->
  <div id="thead">
<div class="table-row">
  <div class="table-cell">head 1</div>
  <div class="table-cell">head 2</div>
</div>
    </div>
    <!-- table body -->
    <div id="tbody">
      <div class="table-row">
        <div class="table-cell">cell 1.1</div>
        <div class="table-cell">cell 1.2</div>
      </div>
      <div class="table-row">
        <div class="table-cell">cell 2.1</div>
        <div class="table-cell">cell 2.1</div>
      </div>
    </div>
    <!-- table foot -->
    <div id="tfoot">
      <div class="table-row">
        <div class="table-cell">foot 1</div>
        <div class="table-cell">foot 2</div>
      </div>
    </div>
    <!-- table end -->
  </div>

css:

div {
         padding: 5px;
      }
  #table {
    margin: 0 auto;
    display: table;
    border: 1px solid green;
  }

  .table-row {
    display: table-row;
  }

  .table-cell {
    width: 150px;
    text-align: center;
    display: table-cell;
    border: 1px solid black;
  }

  #thead {
    display: table-header-group;
    color: white;
    background-color: red;
  }

  #tbody {
    display: table-row-group;
    background-color: yellow;
  }

  #tfoot {
    display: table-footer-group;
    color: white;
    background-color: blue;
  }

ts file :=

auditViews : any = [
{
  "id" : "log1",
  "name" : "Audit log 1",
  "description" : "Descrition of audit log 1",
  "status" : "active"
},
{
  "id" : "log2",
  "name" : "Audit log 2",
  "description" : "Descrition of audit log 2",
  "status" : "active"
},
{
  "id" : "log3",
  "name" : "Audit log 3",
  "description" : "Descrition of audit log 3",
  "status" : "active"
}];

This is static, somehow i need the column header be id, name, description and status and below that the values.

Answer 1

HTML

<div id='table'>
  <!-- table head -->
  <div id="thead">
    <div class="table-row">
      <div class="table-cell" *ngFor='let data of auditViews[0] | keyvalue'>{{data?.key}}</div>
    </div>
    </div>
    <!-- table body -->
    <div id="tbody">
      <div class="table-row" *ngFor='let data of auditViews'>
        <div class="table-cell">{{data?.id}}</div>
        <div class="table-cell">{{data?.name}}</div>
        <div class="table-cell">{{data?.description}}</div>
        <div class="table-cell">{{data?.status}}</div>
      </div>
    </div>
    <!-- table foot -->
    <div id="tfoot">
      <div class="table-row">
        <div class="table-cell">foot 1</div>
        <div class="table-cell">foot 2</div>
      </div>
    </div>
    <!-- table end -->
  </div>

Working Example

PS: If you change the way of format for your JSON you could avoid double loop/iteration which is optimized version to this solution.

Optimized version

HTML

<div id='table'>
  <div id="thead">
    <div class="table-row" *ngFor='let data of auditViews; let i = index'>
      <ng-container *ngFor='let data of data | keyvalue'>
        <div *ngIf='!i' class="table-cell" >{{data?.key}}</div>
        <div *ngIf='i' class="table-cell" >{{data?.value}}</div>
      </ng-container>
    </div>
  </div>
</div>

In this version, I have added extra object in the array for the Header section.

Answer 2

TS file:

auditViews : any = [
{
  "id" : "log1",
  "name" : "Audit log 1",
  "description" : "Descrition of audit log 1",
  "status" : "active"
},
{
  "id" : "log2",
  "name" : "Audit log 2",
  "description" : "Descrition of audit log 2",
  "status" : "active"
},
{
  "id" : "log3",
  "name" : "Audit log 3",
  "description" : "Descrition of audit log 3",
  "status" : "active"
}];

headings: Array<string> = Object.keys(auditViews[0])
footerElement: Array<string> = [];

HTML file:

<div id='table'>
  <!-- table head -->
  <div id="thead">
   <div class="table-row">
    <ng-template *ngFor="let heading of headings">
     <div class="table-cell">{{ heading }}</div>
    </ng-template>
   </div>
  </div>
    <!-- table body -->
  <div id="tbody">
      <ng-template *ngFor="let row of auditViews">
       <div class="table-row">
         <ng-template *ngFor="let field of row">
          <div class="table-cell">{{ field }}</div>
         </ng-template>
       </div>
      </ng-template>
  </div>
  <!-- table foot -->
  <div id="tfoot">
   <div class="table-row">
      <ng-template *ngFor="let footerElement of footer">
       <div class="table-cell">{{ footerElement }}</div>
      </ng-template>
   </div>
  </div>
    <!-- table end -->
</div>

Currently, I assigned the footer elements with an empty array if there are elements. you can assign them to "footerElement" array.