PrimeNG Table - Column Width Adjust based on content

Post Reply
omilypro
Posts: 1
Joined: 26 May 2020, 11:50

23 Nov 2021, 14:37

Hi,
I added following code in p-table which allows me to set width on th and td, but when we use column chooser and hide column the width is still usable for that column which shows a blank space in our table. We want an option in primeng table which automatically adjust the columns in a way where the value are not overlapped over each other, also we can manually set the width as we did below, but it forces us to set a width in such way that it takes full width, if we set less width it does not uses full width as width is set manually.

<p-table .,.. [scrollable]="isScrollable" scrollDirection="both" columnResizeMode="expand">

<th *ngFor="let col of selectedColumns" [ngStyle]="{'width': col.width,'text-align': 'center' }" >.......</th>
<td *ngFor="let col of selectedColumns" [ngStyle]="{'width': col.width,'text-align': 'center' }" > .. </td>
</p-table>


We want a feature that works with variable width for columns and has scroll option horizontal and if we use column chooser it adjusted width of column automatically if we add new column in table or remove.

yigitfindikli
Posts: 421
Joined: 08 Aug 2018, 14:09

30 Nov 2021, 09:19

omilypro wrote:
23 Nov 2021, 14:37
Hi,
I added following code in p-table which allows me to set width on th and td, but when we use column chooser and hide column the width is still usable for that column which shows a blank space in our table. We want an option in primeng table which automatically adjust the columns in a way where the value are not overlapped over each other, also we can manually set the width as we did below, but it forces us to set a width in such way that it takes full width, if we set less width it does not uses full width as width is set manually.

<p-table .,.. [scrollable]="isScrollable" scrollDirection="both" columnResizeMode="expand">

<th *ngFor="let col of selectedColumns" [ngStyle]="{'width': col.width,'text-align': 'center' }" >.......</th>
<td *ngFor="let col of selectedColumns" [ngStyle]="{'width': col.width,'text-align': 'center' }" > .. </td>
</p-table>


We want a feature that works with variable width for columns and has scroll option horizontal and if we use column chooser it adjusted width of column automatically if we add new column in table or remove.
Hi,

Use headergrouped template like this;

https://stackblitz.com/edit/primeng-tab ... onent.html

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest