PrimeNG 17.18 table - Be able to save column widths and load them back (custom implementation)

I have an Angular 18 web application that uses PrimeNG 17.18 components.

I'm making a save table state which saves multiple preferences to a database.

My issue is that there is not a lot of documentation regarding to getting and setting column widhts in a table in PrimeNG (and binding to it). I've been able to get the column widths from a private variable in the PrimeNG table component (which is not the best solution, so if you know a better way to get them, please let me know) like son:

let tableColWidths=(this.dt as any)._initialColWidths || [];


Because the table has columnResizeMode as "expand", tableColWidths could be undefined until the user changes a dimension of a column with the drag and drop feature. In this scenario, the columns will have an auto width.

With tableColWidths I'm able to retrieve the widht in pixels of each column.

The issue comes when I have to load the information back. I've tried to do as follows in the .html file:

[ngStyle]="{'width': col.width > 1 ? col.width + 'px' : 'auto'}"


Since I'm mapping to the columns the "width" value on load. If no changed have been made, columns will have a width of 0. If a redimension of the column took place, the value will be greater than 0.

Becasue the columnResizeMode is "expand", if the columns are more than the width of the screen, it doesn't load them back as expected.

Is there a proper solution to achieve my goal of properly saving column widhts + table width and then loading them back?

Continue reading...