PrimeNg V12.1.0, frozenColumns Dynamically

UI Components for Angular
Post Reply
RRG1993
Posts: 2
Joined: 17 Mar 2022, 18:53

17 Mar 2022, 19:22

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
Posts: 1
Joined: 26 Oct 2022, 10:45

26 Oct 2022, 10:46

RRG1993 wrote:
17 Mar 2022, 19:22
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
Posts: 1
Joined: 18 Nov 2022, 04:07

18 Nov 2022, 04:10

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

andree23
Posts: 1
Joined: 27 Dec 2022, 10:50

27 Dec 2022, 10:55

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

velcrogrow
Posts: 1
Joined: 04 Jan 2023, 06:43

23 Feb 2023, 05:44

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
Posts: 2
Joined: 28 Feb 2023, 09:53

28 Feb 2023, 10:02

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests