[FIXED] To restore size of manually resized table columns in prime-ng p-table

Issue

For a p-table with 'resizableColumns="true"' in primeng, is there any way to restore the widths of the columns to their initial state? I would like to give an option to the user to reset back to the default size.

Solution

Revalidate your table will solve your problem.

Here is an example

HTML

<p-table #dt [columns]="cols" [value]="cars1" [resizableColumns]="isResisable" [loading]="isLoading" *ngIf="!isLoading" >
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

<button (click)="resettable()" >Reset Initial </button>

TS

import { Component, OnInit, ViewChild } from '@angular/core';

import { LazyLoadEvent, DataTable } from 'primeng/primeng';

import { CarService } from './app.service'
import { Car } from './car.model'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('dt') public dataTable: DataTable;

  cars1: Car[];

  isResisable: boolean = true;;

  cols: any[];
  isLoading: boolean;
  constructor(private carService: CarService) { }

  ngOnInit() {

    this.cars1 =
      [
        { "brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff" },
        { "brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345" },
        { "brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr" },
        { "brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh" },
        { "brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34" },
        { "brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj" },
        { "brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr" },
        { "brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34" },
        { "brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5" },
        { "brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s" }
      ]


    this.cols = [
      { field: 'vin', header: 'Vin', width: '25%' },
      { field: 'year', header: 'Year', width: '15%' },
      { field: 'brand', header: 'Brand', width: '35%' },
      { field: 'color', header: 'Color', width: '25%' }
    ];
  }

  resettable() {
    this.isLoading = true;
    this.cars1 = [...this.cars1];
    // this.dataTable.reset();
    setTimeout( () =>{
      this.isLoading =false;
    },3)
  }

}

Answered By – TheParam

Answer Checked By – Terry (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published