Btukfyl

I created nested tables (primeNg component) with unknown amout of elements and this is my code:

    <p-table [value]="topicReports" dataKey="topicName">

    <ng-template pTemplate="header">

        <tr>

            <th class="is-header">Topic / Comment / Author </th>

            <th class="is-header">Points</th>

        </tr>

    </ng-template>

    <ng-template pTemplate="body" let-topic>

        <tr >

            <td>{{topic.name}}</td>

            <td >{{topic.point}}</td>

        </tr>

        <td colspan="2">

            <p-table *ngIf="topic.commentReports" [value]="topic.commentReports" dataKey="commentName">

                <ng-template pTemplate="body" let-comment>

                    <tr clas="background-color">

                        <td class="pl-4">{{comment.name}}</td>

                        <td >{{comment.point}}</td>

                    </tr>

                    <td colspan="2">

                        <p-table *ngIf="comment.authorReports" [value]="comment.authorReports" dataKey="authorName">

                            <ng-template pTemplate="body" let-author>

                                <tr *ngIf="author.point > 0" >

                                    <td class="pl-5">{{author.name}}</td>

                                    <td >{{author.point}}</td>

                                </tr>

                            </ng-template>

                        </p-table>

                    </td>

                </ng-template>

            </p-table>

        </td>

    </ng-template>

    <ng-template pTemplate="summary">

        <div style="text-align: right">

            Summary points: {{summaryPoints}}

        </div>

    </ng-template>

</p-table>

And this how it looks like now:

Like in the picture, nested child table have smaller size than parent.
What I try to do is create maybe some kind of CSS to make them same responsive size.

After discussion with @LGSon I'll provide as much text code as it's possible.
But before I even start I need to tell you, that I used PrimeNg table component, this means you probably cannot run this example without PrimeNg installation

So i updated my html file(by removing all non important parts)

This is my .ts file:

export class TopicComponent implements OnInit {



  testCustomerReports: TopicReport = ;

  testCommentReports: CommentReport = ;

  testAuthorReports: AuthorReport = ;

  summaryPoints: number;



  constructor() { }



  ngOnInit() {

    this.summaryPoints = 22;

    this.testAuthorReports = [new AuthorReport("Test topic", 22)];

    this.testCommentReports = [new CommentReport("Test comment", 22, this.testAuthorReports)];

    this.customerReports = [new TopicReport("Test author", 22, this.testCommentReports)];

  }

}

Those are my objects:

import { CommentReport } from "./comment-report";



export class AuthorReport {

  constructor(

    public name: string,

    public points: number,

    public CommentReports: CommentReport

  ) {  }

}



import { AuthorReport } from "./author-report";



export class CommentReport {

  constructor(

    public name: string,

    public points: number,

    public authorReports: AuthorReport

  ) {  }

}



export class AuthorReport {

  constructor(

    public name: string,

    public points: number

  ) {  }

}

My CSS file is clear (totally clear, nothing inside, because all css are probably build-in in p-table component from PrimeNg.

I need to say, that I also tried to inspect by my web browser, but I didn't found anything that could point for any padding property, but I'm not sure if I did it right.
I pressed right on element, than inspect and I was searching for something similar to padding in style view, but didnt found anything. and this is what I found there:

Update 28.11.2018:

Changes suggested by @Kosh Very in his answer made a table look like this:

Now there is a visible table in table in table and I just wanted to make my nested tables to be a row in my first table (like in my first example, but without this indentation).

Second update after comment by @Kosh Very.

Why do I use nested tables?

(I'm not sure if you need to know, but I dont know how many topics are in a table, and I don't know how many comments have single topic, and how many comments have single comment).

I was trying to do it without nested tables as:

<div *ngIf="tableGenerated">

    <div class="pt-4">

        <p-table [value]="topicReports" dataKey="topicName">

            <ng-template pTemplate="header">

                <tr>

                    <th class="is-header"> topic / comment / author</th>

                    <th class="is-header"> points</th>

                </tr>

            </ng-template>

            <ng-template pTemplate="body" let-topic>

                <tr class="background-color">

                    <td>{{topic.name}}</td>

                    <td class="is-number">{{topic.point}}</td>

                </tr>

                <tr class="background-color">

                    <td>{{topic.commentReports.name}}</td>

                    <td class="is-number">{{topic.commentReports.point}}</td>

                </tr>

                <tr class="background-color">

                    <td>{{topic.commentReports.authorReports.name}}</td>

                    <td class="is-number">{{topic.commentReports.authorReports.point}}</td>

                </tr>

            </ng-template>

        </p-table>

    </div>

</div>

But it seems like I cannot do something like: topic.commentReports.authorReports.point Thats why I made nested tables.

Your template code is incorrect:

HTML table cells <td> need to be placed into rows <tr>, but you missed some.

Also, you cannot place <div> into <table> directly.

So you need to wrap it into a cell, then wrap the cell into a row, and then place the row into the table.

Final solution found by @degath:

<p-table [value]="topicReports" dataKey="topicName">

  <ng-template pTemplate="header">

    <tr>

      <th>task / comment / author</th>

      <th>points </th>

    </tr>

  </ng-template>

  <ng-template pTemplate="body" let-topic>

    <tr class="background-color">

      <td>{{topic.name}}</td>

      <td class="is-number">{{topic.workedHour}}</td>

    </tr>

    <ng-template ngFor let-comment [ngForOf]="topic.commentReports">

      <tr class="background-color">

        <td class="pl-4">{{comment.name}}</td>

        <td class="is-number">{{comment.workedHour}}</td>

      </tr>

      <ng-template ngFor let-author [ngForOf]="comment.authorReports">

        <tr class="background-color">

          <td class="pl-4">{{author.name}}</td>

          <td class="is-number">{{author.workedHour}}</td>

        </tr>

      </ng-template>

    </ng-template>

  </ng-template>

</p-table>