Loading another component inside table is expanding my table width unexpectedly in Angular

user_11137041 0
Viewed 154

I am new to angular and trying to make an COVID-19 app in angular where I am showing data in tabular form. I have two components, a state component and district component.

State component is listing all state in table and when I click on any state. It should load all districts listed below that state. But it is expanding my width of my state column of state component which results in unexpected width of table.

Here is my stack blitz link: enter link description here

Here is my expected result link: Expected result

Here is my piece of code

State.component.html

<table>
    <tbody *ngFor="let data of statewisedata;let i=index ">
        <span class="dropdown rotateDownRight ">
            <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round">
                <polyline points="6 9 12 15 18 9 "></polyline>
            </svg>
        </span>

        <tr class="state ">
            <td (click)="OngetState(data.state); showHideData(data) " style="font-weight: 600; ">{{data.state}}</td>
            <td style="color: inherit; ">
                <span *ngIf='DailystateStatus[i]?.confirmed !==0 || DailystateStatus[i]?.confirmed < 0 ;' class="deltas " style="color: rgb(255, 7, 58); ">
                    <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24" fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round ">
                        <line x1="12 " y1="19 " x2="12 " y2="5 "></line>
                        <polyline points="5 12 12 5 19 12 "></polyline>
                    </svg>    
                    {{DailystateStatus[i]?.confirmed}}
                 </span> 
                 {{data.confirmed}}
             </td>

             <td style="color: inherit; ">{{data.active}}</td>
             <td style="color: inherit; ">{{data.recovered}}</td>
             <td style="color: inherit; ">{{data.deaths}}</td>
         </tr>

         <tr app-district *ngIf="data[ 'show'] "></tr>   //here loading list 
    </tbody>
</table>

District.component.html

<tr *ngFor="let data of districtdata|keyvalue" class="district" style="background: rgb(248, 249, 250);">

    <td style="font-weight: 600;"> {{data.key}}</td>
    <td><span class="deltas" style="color: rgb(255, 7, 58);"></span>{{data.value.confirmed}}</td>

</tr>

District.component.ts


@Component({
  selector: '[app-district]',
  templateUrl: './district.component.html',
  styleUrls: ['./district.component.css']
})

If I try to wrap my district component in div instead of tr and If I try to increase width of that div it increase width of my state column in state component

<div *ngFor="let data of districtdata|keyvalue" class="district" style="width:500px">

    <td style="font-weight: 600;"> {{data.key}}</td>
    <td><span class="deltas" style="color: rgb(255, 7, 58);"></span>{{data.value.confirmed}}</td>

</div>
angular css html javascript
2 Answers

I have not worked with angular but after looking at the problem it looked like an issue with the HTML table structure. This is what I did:

<tr>
    <td id="myTableData" app-district *ngIf="data[ 'show']" colspan="4"></td>
</tr>

I added a <td></td> as a child to your <tr></tr> and added the colspan="4" property, also moving down the logic to td so that the new table rows(district data) get rendered in the "myTableData" td.

You can read about the colspan attribute here.

user_108440200

So what you can do is you can add some CSS rules for your table like . Although this is patchwork and you should try to avoid this kinda things but for now you can use this and then go to stackblitz examples where you can find tons of nested table examples

table {
    table-layout: fixed;
}

table td {
    overflow: hidden;
}

component2.css

.district {
    width: 300px;
    display: table;
    margin-left: 25px;
}

.district td{
width:150px;
}
user_91366630
Related