Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataTable with virtual scroll and expand mode is not working as expected #11801

Closed
mertsincan opened this issue Aug 9, 2022 · 0 comments
Closed
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@mertsincan
Copy link
Member

Reported By PRO User;

A) In a table with virtual scroll and expand mode, the table expands but the vertical scroll bar is no longer always visible. The columns do not align correctly when the table width is small. Both these things do not happen in a table without virtual scroll.
B) In a table with virtual scroll and set widths, if you shrink a column, there is a double horizontal scrollbar.

Exp;

<div class="card">
<h5>A) Virtual Scroll with Expand Mode</h5>
<p-table [columns]="cols" [value]="cars" [scrollable]="true" [rows]="100" scrollHeight="250px"
    [virtualScroll]="true" [virtualScrollItemSize]="34" styleClass="p-datatable-gridlines"
    [resizableColumns]="true" columnResizeMode="expand">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th pResizableColumn *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr style="height:34px">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>
</div>

<div class="card">
<h5> B) Virtual Scroll with Expand Mode and Wide Widths</h5>
<p-table [columns]="cols" [value]="cars" [scrollable]="true" [rows]="100" scrollHeight="250px"
    [virtualScroll]="true" [virtualScrollItemSize]="34" styleClass="p-datatable-gridlines"
    [resizableColumns]="true" columnResizeMode="expand">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th  style="width:200px" pResizableColumn *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr style="height:34px">
            <td  style="width:200px" *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>
</div>
@mertsincan mertsincan added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Aug 9, 2022
@mertsincan mertsincan added this to the 14.0.1 milestone Aug 9, 2022
@mertsincan mertsincan self-assigned this Aug 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

1 participant