PrimeNg V12.1.0, frozenColumns Dynamically

[RRG1993]

How should it be declared to show frozen columns, when dynamically loaded, i try it like this but is not working

HTML

Code: Select all

<p-table
	#dt
	[columns] = "cols"
	[frozenColumns] = "frozen"
	[value] = "permisos"
	[autoLayout] = "true"
	[paginator] = "true"
	[rows] = "5"
	[showCurrentPageReport]="true"
	currentPageReportTemplate="{first} - {last} de {totalRecords} Registros"
	selectionMode="single"
	scrollDirection="both"
	[scrollable]="true"
	[rowsPerPageOptions]="[5,10,20]"
	styleClass="p-datatable-sm p-datatable-gridlines"
>
	<ng-template pTemplate="header" let-columns let-row="rowIndex">
		<tr>
			<th *ngFor="let col of cols" [pSortableColumn]="col.field" class="text-center">
				{{ col.header }}
				<p-sortIcon [field]="col.field"></p-sortIcon>
			</th>
		</tr>
		
	</ng-template>
</p-table>

TypeScript

Code: Select all

this.cols = {
	
	{field: 'b' , header: 'b'},
	{field: 'c' , header: 'c'},
	{field: 'd' , header: 'd'}, 
	{field: 'e' , header: 'e'},
	{field: 'f' , header: 'f'},
	{field: 'g' , header: 'g'},
	{field: 'h' , header: 'h'},
}
this.frozen = {
	{field: 'a' , header: 'a'},
}

[sipesaidan]

the backrooms
How should it be declared to show frozen columns, when dynamically loaded, i try it like this but is not working

HTML

Code: Select all

<p-table
	#dt
	[columns] = "cols"
	[frozenColumns] = "frozen"
	[value] = "permisos"
	[autoLayout] = "true"
	[paginator] = "true"
	[rows] = "5"
	[showCurrentPageReport]="true"
	currentPageReportTemplate="{first} - {last} de {totalRecords} Registros"
	selectionMode="single"
	scrollDirection="both"
	[scrollable]="true"
	[rowsPerPageOptions]="[5,10,20]"
	styleClass="p-datatable-sm p-datatable-gridlines"
>
	<ng-template pTemplate="header" let-columns let-row="rowIndex">
		<tr>
			<th *ngFor="let col of cols" [pSortableColumn]="col.field" class="text-center">
				{{ col.header }}
				<p-sortIcon [field]="col.field"></p-sortIcon>
			</th>
		</tr>
		
	</ng-template>
</p-table>

TypeScript

Code: Select all

this.cols = {
	
	{field: 'b' , header: 'b'},
	{field: 'c' , header: 'c'},
	{field: 'd' , header: 'd'}, 
	{field: 'e' , header: 'e'},
	{field: 'f' , header: 'f'},
	{field: 'g' , header: 'g'},
	{field: 'h' , header: 'h'},
}
this.frozen = {
	{field: 'a' , header: 'a'},
}

Hey there, exact same problem too at my end. However, after double-checking, I believe there is nothing amiss. Have there been any updates on this?

[wrestleyielding]

I added a property isFrozenColumn in the column definition like thatspin the wheel and it worked perfectly

[andree23]

I was able to declare the columns visible, my error was fixed.
ovo

[velcrogrow]

Do you mean, non editable? if yes, then you can provide value to cell but in non-edited modedinosaur game. Ex. The pInputText that you used can be in disabled mode on certain conditions.

[hena]

To show frozen columns in a PrimeNG table that is dynamically loaded, you can use the [frozenColumns] input property of the p-table component.
drive mad

[Imithe201]

hello
I want to share here may be helpful for you
It's difficult for me to give a specific answer without more information about the code you're working with and the context in which you're trying to show frozen columns. However, here are some general guidelines for showing frozen columns in dynamically loaded content:

Make sure you're using a compatible plugin or library: Many web frameworks and libraries offer plugins or tools for showing frozen columns in dynamically loaded content. Make sure you're using a plugin or library that is compatible with your web framework and the data you're working with.

Set the appropriate CSS styles: To show frozen columns, you'll need to set appropriate CSS styles on the relevant HTML elements. Typically, this involves setting the position, left, and z-index properties of the columns you want to freeze. Make sure you're setting these properties correctly and that they are being applied to the correct elements.

Handle dynamic loading correctly: If you're dynamically loading content, make sure you're handling the loading process correctly. You may need to use AJAX or other techniques to load the content asynchronously and then update the frozen column styles once the content has loaded.

Test and debug your code: Finally, make sure you're testing your code thoroughly and debugging any issues that arise. Use browser debugging tools to inspect the HTML and CSS properties of the relevant elements and make sure they are set correctly.
Nexus Iceland Login

I hope this helps! If you provide more specific information about the code you're working with and the issues you're encountering, I may be able to give more targeted advice. please give your sugestion