CODEWITHSUNDEEP
angularprimeng
Suresh Negi
Suresh Negi

Reputation: 422

primeng table p-table column and data overlapping issue on browser window resizing

I am using primeng p-table in my angular application. On running application my table look like below: enter image description here

On resizing the browser window(say decreasing the width of window), table headers and data are overlapped.See the below screen shot:

enter image description here

You can refer the code from below stackblitz link to reproduce the issue:

stackblitz code link

I have tried the below workaround using css:

.ui-table-scrollable-header{  min-width: 300px !important;}
 .ui-table-scrollable-body{ min-width: 300px !important;}
 th{  word-break: break-all;}

What you think about the above workaround. Link with above workaround implemented:

I have tried this, workaround using CSS

Upvotes: 3

Views: 15399

Answers (2)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24406

primeng table is a component full of feature two of theme can solve this problem , column resize so depend on user preference can change the column width to see extra information and the other is responsive so the table can support small size screen like mobile.

template 

<p-table [columns]="columnDefinitions" [value]="dataSet" [resizableColumns]="true" [responsive]="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                              <span class="ui-column-title">{{col.name}}</span>

                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

small screen preview

Column Resize,responsive

check the live demo 🚀

Update 💣

we can set the columns to be resizable and set tinital state of the columnd with with these options [resizableColumns]="true" columnResizeMode="expand" , the main problem is resize happen at run time so we will set the initial state of the columns size with table state feature like this 

localStorage.setItem(
 'statedemo-local',
 '{"columnWidths":"250,200,400,250"}'
);

this will set the columns width size and because we set the resize to expand we will see a horizontal scroll bar.

<p-table [columns]="columnDefinitions" [value]="dataSet" [resizableColumns]="true" columnResizeMode="expand" stateStorage="local" stateKey="statedemo-local">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                              <span class="ui-column-title">{{col.name}}</span>

                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

demo 🚀🚀

Upvotes: 4

Layera
Layera

Reputation: 234

What do you want to happen on resize? You can either set the font-size using vw (viewport width) to make the font grow/shrink on resize, or you can set the overflow property to hide or scroll or whatever you think fits best, example add this to your css-file: 

th, td{
    overflow: hidden;
}

Or you can use word-break if you want to break the word at any character to prevent overflow.

td, th{
    word-break: break-all;
}

For horizontal scrolling add: 

th, td {
    overflow-x: auto;
}

Upvotes: 3

Related Questions