CODEWITHSUNDEEP
headerscrollableprimeng-tablep-table
sherin shaf
sherin shaf

Reputation: 153

How to align misaligned p-table headers in angular after enabling the scroll?

I am having a p-table with and body. Before enabling the scroll, checkboxes in header and body and other header alignments were perfect. But after adding [scrollable]=true and scrollHeight="200px" to p-table tag, headers are misaligned with rows.

Below is my code for p-table :

<p-table [columns]="columns" [value]="values" [(selection)]="selectedRowData"
                 [scrollable]="true" scrollHeight="200px">
            <ng-template pTemplate="header" let-gridColumns>
                <tr>
                    <th style="width: 3em">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th *ngFor="let col of gridColumns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-gridColumns="columns">
                <tr>
                    <td>
                        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                    </td>
                    <td *ngFor="let col of gridColumns" style="word-break: break-all; max-width: 100px;">
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-table>

can someone help me aligning the headers with its row? Thanks in advance

Upvotes: 2

Views: 2884

Answers (3)

user22478429
user22478429

Reputation: 1

Actually it's a bug from primeng end, when scrollable height is added to p-table tag and more no.of rows are there then this issue occurs. When only one row then this issue is not there.

SOLUTION: Instead of using scrollable and scroll height, add height to the parent tav of the table. With the below mentioned approach I am able to resolve alignment issues.

Eg:`

<div style ="max-height:60vh;overflow:auto">
<p-table></p-table>
</div>

`

Upvotes: 0

TODO
TODO

Reputation: 35

I had the same issue and my resolution had part of the previous answers but also required min-width to be set. Yours may work without the min-width but mine required it to function properly. We are on PrimeNG "primeng": "11.3.1",

Working example:

#idOfPTableElement {
  th {
    width: 100vw !important;
    min-width: 210px;
  }

  td {
    width: 100vw !important;
    min-width: 210px;
  }
}

Relative to this topic/issue, the header and the body of the p-table are separate tables. In addition, I had to use the following to fix the body (actual table data section/body) alignment issues I experienced. Without it, the lower table was indented looking and was never in alignment with the upper table (header table)

  .p-datatable-scrollable-header-box {
    padding-right: 0px !important;
  }

Upvotes: 0

Malik Zahid
Malik Zahid

Reputation: 755

I faced same issue and in my scenario it was resolved by adding [scrollable]="true" after scrollHeight and add width to columns. like

<p-table [columns]="columns" [value]="values" [(selection)]="selectedRowData" [responsive]="true" 
                scrollHeight="248px" scrollDirection="both" [autoLayout]="true" [scrollable]="true">
            <ng-template pTemplate="header" let-gridColumns>
                <tr>
                    <th style="width: 3em">
                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                    </th>
                    <th style="width: 100vw;" *ngFor="let col of gridColumns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-gridColumns="columns">
                <tr>
                    <td style="width: 3em">
                        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                    </td>
                    <td *ngFor="let col of gridColumns" style="width: 100vw !important; overflow: hidden; text-overflow: ellipsis;">
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-table>

Note:

  • Data is displayed as ellipsis after 100vw
  • Width on th accordingly same as on td

Upvotes: 1

Related Questions