CODEWITHSUNDEEP
c#htmlangularasp.net-core
Arzu Suleymanov
Arzu Suleymanov

Reputation: 691

How to arrange custom table elements in angular?

I have table which I am showing nested json elements in table. Getting data from asp.net core backend. Is it better way way to use this method getting nested elements or not? Issue which I am facing is below.

My HTML looks like:

<table class="table text-center table-hover table-striped mb-3" [hidden]="!isShow" *ngFor="let kc of 
   kubeConfig">
      <thead class="bg-primary text-white">
        <th appBtn [sortKey]="'metadataName'" [data]="kubeConfig">Metadata Name</th>
        <th appBtn [sortKey]="'status'" [data]="kubeConfig">Status</th>
        <th appBtn [sortKey]="'type'" [data]="kubeConfig">Type</th>
        <th appBtn [sortKey]="'reason'" [data]="kubeConfig">Reason</th>
        <th appBtn [sortKey]="'message'" [data]="kubeConfig">Message</th>
      </thead>
      <tbody>       
        <tr>
          <td>{{ kc.metadataName }}</td>         
        </tr>      
        <tr *ngFor="let item of kc.status">
          <td>{{ item }}</td>
        </tr>
        <tr *ngFor="let item of kc.type">
          <td>{{ item }}</td>
        </tr>
        <tr *ngFor="let item of kc.reason">
          <td>{{ item != null ? item : 'null' }}</td>
        </tr>
        <tr *ngFor="let item of kc.message">
          <td>{{ item != null ? item : 'null' }}</td>
        </tr>       
      </tbody>
    </table>

Result is:

enter image description here

I would like to achieve result like this:

enter image description here

ASP.NET CORE Method for fetching data: 

[HttpGet("kubeconfig")]
public IActionResult GetKubeConfig()
{
    var config = KubernetesClientConfiguration.BuildConfigFromConfigFile("project.conf");
    IKubernetes client = new Kubernetes(config);
    var podList = client.ListNamespacedPod("default");           
    var result = from item in podList.Items
                 select new
                 {
                     MetadataName = item.Metadata.Name,
                     Status = item.Status.Conditions.Select(x => x.Status),
                     ...other details                           
                 };
    return Ok(result);
}

Nested json example:

"metadataName": "argocd-application-controller-6dfcdbb676-d56vm",
        "status": [
            "True",
            "True",
            "True",
            "True"
        ],
        "type": [
            "Initialized",
            "Ready",
            "ContainersReady",
            "PodScheduled"
        ],
        "reason": [
            null,
            null,
            null,
            null
        ],
        "message": [
            null,
            null,
            null,
            null
        ],

Upvotes: 0

Views: 67

Answers (3)

Rena
Rena

Reputation: 36705

The reason is that you loop each item surrounded with tr separately.

To fix such issue,change like below:

<table class="table text-center table-hover table-striped mb-3"  *ngFor="let kc of
 kubeConfig">
<thead class="bg-primary text-white">
  <tr>
    <th>Metadata Name</th>
    <th>Status</th>
    <th>Type</th>
    <th>Reason</th>
    <th>Message</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let index of kc.status; index as i">
    <td>{{ kc.metadataName }}</td>
    <td>{{ kc.status[i] }}</td>
    <td>{{ kc.type[i] }}</td>
    <td>{{ kc.reason[i] != null ?  kc.reason[i] : 'null' }}</td>
    <td>{{ kc.message[i] != null ?  kc.message[i] : 'null' }}</td>
  </tr>
</tbody>

Result: enter image description here

Upvotes: 1

Fahad Hassan
Fahad Hassan

Reputation: 811

you are creating multiple table by putting ngFor on table. Which is wrong. Please replace your html form this

<table class="table text-center table-hover table-striped mb-3" [hidden]="!isShow">
  <thead class="bg-primary text-white">
    <th appBtn [sortKey]="'metadataName'" [data]="kubeConfig">Metadata Name</th>
    <th appBtn [sortKey]="'status'" [data]="kubeConfig">Status</th>
    <th appBtn [sortKey]="'type'" [data]="kubeConfig">Type</th>
    <th appBtn [sortKey]="'reason'" [data]="kubeConfig">Reason</th>
    <th appBtn [sortKey]="'message'" [data]="kubeConfig">Message</th>
  </thead>
  <tbody> 
    <tr *ngFor="let kc of kubeConfig">
        <td>{{ kc.metadataName }}</td> 
        <td>{{ kc.status }}</td> 
        <td>{{ kc.type }}</td> 
        <td>{{ kc.reason }}</td> 
        <td>{{ kc.message }}</td> 

    </tr>      
  </tbody>

Upvotes: 0

beanic
beanic

Reputation: 562

You can use Angular Material following the steps in this link https://material.angular.io/components/table/overview

Upvotes: 0

Related Questions