Displaying data column-wise in angular 7

Question

I need implement a table in angular 7 application that will display records column-wise instead of row-wise like seen in the screenshot below. So far its been data displaying in the grid but on this occasion its different.

For example in the first row below of the screenshot Class Id - The values are coming from Id field of the FundClassDetailsViewModel array. So basically the structure of the object that is passed to the component is FundClassViewModel -> FundDetailsViewModel -> FundClassDetailsViewModel

The FundClassDetailsViewModel contains the Id , Description etc

How will I display those values horizontally

I tried as per the suggestion below but cant see values printed. Is there an issue with the loop

Could somebody show me an example on doing it

Here the fields are as follows

Class Id - TextBox
Legal Fund Class - Dropdownlist
Inception Date - Datetime picker
Invested Amount - Text box
Vehicle Type - Dropdownlist
Closure Status - Dropdownlist
Is Side Pocket - Checkbox
Is Thematic - Checkbox
Cogency Class - Dropdownlist

The columns will depend on number of records hence paging needs to be considered.

This is how the structure of the JSON looks like

The actual JSON

{"FundDetailsViewModel":[{"CogencyClasses":[{"Id":0,"FundId":0,"ShareClass":"Assign Cogency Fund First","LocalCurrency":null,"Name":"Assign Cogency Fund First "}],"FundClassDetailsViewModel":[{"Id":250033,"Description":"Class B","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11166,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":5508},{"Id":100541,"Description":"Class A","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11167,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":5508}],"PrimaryLegalFundClasses":[{"Id":5508,"Description":"Class A","ClassType":1},{"Id":5508,"Description":"Class B","ClassType":1}]},{"CogencyClasses":[{"Id":1121,"FundId":652,"ShareClass":"Class B","LocalCurrency":"USD","Name":"Class B USD"}],"FundClassDetailsViewModel":[{"Id":250028,"Description":"Class A","InvestedAmount":23732600,"InceptionDate":null,"LegalFundClassId":13713,"DataReference":null,"CogencyClassId":1121,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250032,"Description":"Class D","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13714,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250031,"Description":"Class C","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13715,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250030,"Description":"Class B1","InvestedAmount":null,"InceptionDate":"2014-05-01T00:00:00","LegalFundClassId":13716,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250029,"Description":"Class B","InvestedAmount":119307314,"InceptionDate":null,"LegalFundClassId":13717,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146}],"PrimaryLegalFundClasses":[{"Id":237146,"Description":"Class A","ClassType":3},{"Id":237146,"Description":"Class B","ClassType":3},{"Id":237146,"Description":"Class B1","ClassType":3},{"Id":237146,"Description":"Class C","ClassType":3},{"Id":237146,"Description":"Class D","ClassType":3}]}],"VehicleTypes":[{"Spf":false,"Name":"Secondaries","SortOrder":null,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Co-Investment (non-SPF)","SortOrder":1,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":false,"Name":"FX Trade","SortOrder":2,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Listed ETF","SortOrder":3,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Listed Security","SortOrder":4,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Mutual Fund","SortOrder":5,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Offshore Fund","SortOrder":6,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Onshore US - 40 Act Fund","SortOrder":7,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Onshore US Non - 40 Act Fund","SortOrder":8,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"EnTrustPermal Product","SortOrder":9,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF - Standard","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF – 40 Act","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF – UCITS","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF - Blocker","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF - Co-Investment","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":true,"Name":"EnTrustPermal SPF - Special Sit","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":false,"Name":"Private Equity","SortOrder":11,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Spf":false,"Name":"Side-Pocket","SortOrder":12,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Spf":false,"Name":"Special Situation (non-SPF)","SortOrder":13,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":false,"Name":"Third Party Fund of Funds","SortOrder":14,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"UCITS","SortOrder":15,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Other","SortOrder":50,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false}],"ClosureStatuses":[{"Id":110,"Name":"Hard Closed","IsActive":true,"SortOrder":null},{"Id":111,"Name":"Open","IsActive":true,"SortOrder":null},{"Id":112,"Name":"Soft Closed","IsActive":true,"SortOrder":null},{"Id":1,"Name":"Open - to all","IsActive":true,"SortOrder":1},{"Id":2,"Name":"Open - to Permal only","IsActive":true,"SortOrder":2},{"Id":3,"Name":"Closed - hard","IsActive":true,"SortOrder":3},{"Id":104,"Name":"Closed - with wait list","IsActive":true,"SortOrder":4},{"Id":100,"Name":"Closed - but will reopen","IsActive":true,"SortOrder":5},{"Id":21,"Name":"Closed - but replacing redemptions","IsActive":true,"SortOrder":6},{"Id":101,"Name":"Redemptions Gated","IsActive":true,"SortOrder":7},{"Id":102,"Name":"Redemptions Suspended","IsActive":true,"SortOrder":8},{"Id":103,"Name":"In Liquidation","IsActive":true,"SortOrder":9}]}

FundClassess component

export class FundClassesComponent implements OnInit {


    @Input() FundClasses;

    constructor() {
    }

    ngOnInit() {
            this.init();
    }

    init() {

    }
}

FundClasses component

   <style>

   th,
    td {
        padding: 7px;
    }

    .fundClassesTable {
        margin: 0 auto;
        font-size: 11px;
    }

    .tableItem {
        text-align: center;
        border-left: solid 1px lightgrey;
        border-top: solid 1px lightgrey;
        border-right: solid 1px lightgrey;
        border-bottom: solid 1px lightgrey;
        width: 100px
    }

    .rowItem:hover {
        background-color: #f5f7f7;
    }




    label[for=element-toggle] {
  cursor: pointer;
  color: red;
}
#element-toggle {
  display: none;
}

#element-toggle:checked ~ #toggled-element tr {
  display: block;
  float: left;
}
#element-toggle:checked ~ #toggled-element th,
#element-toggle:checked ~ #toggled-element td {
  display: block;
}
</style>



<label for="element-toggle">Transpose</label>
<input id="element-toggle" type="checkbox" />

<div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">
    <!-- <div *ngIf="fundClassKeys">  -->
    <!-- {{fundClassKeys.length}} -->
    <table class="fundClassesTable" id="toggled-element">

        <tr>
            <td class="tableItem bold">Accounting Class Name</td>
            <td class="tableItem bold">Class ID</td>
            <td class="tableItem bold">Legal Fund Class</td>
            <td class="tableItem bold">Inception Date</td>
            <td class="tableItem bold">Invested Amount</td>
            <td class="tableItem bold">Vehicle Type</td>
            <td class="tableItem bold">Closure Status</td>
            <td class="tableItem bold">Is Side Pocket?</td>
            <td class="tableItem bold">Is Thematic?</td>
            <td class="tableItem bold">Cogency Class?</td>
        </tr>

        <div *ngFor="let fundClass of FundClasses.FundDetailsViewModel" >
            <tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
                <td class="tableItem">{{ f.value.Description}}</td>
                <td class="tableItem">{{f.value.Id}}</td>
                <td class="tableItem">{{ f.value.LegalFundClassId}}</td>
                <td class="tableItem">{{f.value.InceptionDate}}</td>
                <td class="tableItem">{{ f.value.InvestedAmount}}</td>
                <td class="tableItem">{{f.value.ClosureStatusId}}</td>
                <td class="tableItem">{{ f.value.Description}}</td>
                <td class="tableItem">{{f.value.IsSidePocket}}</td>
                <td class="tableItem">{{ f.value.IsThematic}}</td>
                <td class="tableItem">{{f.value.CogencyClassId}}</td>
            </tr>
        </div>


    </table>
</div>

Screenshot of how the screen looks like after trying to implement the solution suggestion

Answer 1

The solution of your implementation looks like that because you have a single div which is treated as a single cell and inside that, it has the entire row.

To fix that, bring the entire row outside the div, but in your case, it will mess up the ngFor data as it require a loop inside a loop.

To make it simpler, store the all required data in a single array and then use single ngFor for display.

example

/*declaring a variable */
  fundClassDetailsViewModelData = [];

/* storing all the value in that variable */
   this.FundClasses.FundDetailsViewModel.filter(
      data =>
        (this.fundClassDetailsViewModelData = [
          ...this.fundClassDetailsViewModelData,
          ...data.FundClassDetailsViewModel
        ])
    );

and then html will become

/*remove the outer div and change the ngfor variable*/    
<tr *ngFor="let f of fundClassDetailsViewModelData | keyvalue ">
    <td class="tableItem">{{ f.value.Description}}</td>
    <td class="tableItem">{{f.value.Id }}</td>
    <td class="tableItem">{{ f.value.LegalFundClassId }}</td>
    <td class="tableItem">{{f.value.InceptionDate }}</td>
    <td class="tableItem">{{ f.value.InvestedAmount}}</td>
    <td class="tableItem">{{f.value.ClosureStatusId}}</td>
    <td class="tableItem">{{ f.value.Description}}</td>
    <td class="tableItem">{{f.value.IsSidePocket}}</td>
    <td class="tableItem">{{ f.value.IsThematic}}</td>
    <td class="tableItem">{{f.value.CogencyClassId }}</td>
</tr>

For the transpose of the table, you can use the solution provided by @nullptr.t

tr { display: block; float: left; }
th, td { display: block; }

I have created a working example of the same here: codesandbox link

Answer 2

You can transpose your table with a couple of simple css rules

tr { display: block; float: left; }
th, td { display: block; }

Here is a full working example:

label[for=element-toggle] {
  cursor: pointer;
  color: red;
}

#element-toggle {
  display: none;
}

#element-toggle:checked~#toggled-element tr {
  display: block;
  float: left;
}

#element-toggle:checked~#toggled-element th,
#element-toggle:checked~#toggled-element td {
  display: block;
}

<label for="element-toggle">Transpose</label>
<input id="element-toggle" type="checkbox" />

<table id="toggled-element">
  <tbody>
    <tr>
      <td>(1,1)</td>
      <td>(1,2)</td>
      <td>(1,3)</td>
      <td>(1,4)</td>
    </tr>
    <tr>
      <td>(2,1)</td>
      <td>(2,2)</td>
      <td>(2,3)</td>
      <td>(2,4)</td>
    </tr>
    <tr>
      <td>(3,1)</td>
      <td>(3,2)</td>
      <td>(3,3)</td>
      <td>(3,4)</td>
    </tr>
  </tbody>
</table>