Is there a method to reset the column widths of a p-table in primeng that have been set with 'resizableColumns="true"'? I want to provide users with the ability to revert back to the original sizes.
Is there a method to reset the column widths of a p-table in primeng that have been set with 'resizableColumns="true"'? I want to provide users with the ability to revert back to the original sizes.
To resolve the issue, try revalidating your table.
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)
}
}
If you need to adjust the width of your table columns dynamically, you can create a button or event and link it to a function that handles this task effectively. I have personally tested this method and found it to be very successful.
ngOnInit() {
this.list = myservice.getList();
this.adjustColumnWidth();
}
adjustColumnWidth(){
this.cols = [
{ field: 'a', header: 'A', width: '25%'},
{ field: 'b', header: 'B', width: '15%' },
{ field: 'c', header: 'C', width: '35%' },
{ field: 'd', header: 'D', width: '25%' }
];
}
In your html file:
<button pButton type="button" (click)="adjustColumnWidth()" label="Adjust Width"></button>
The p-table feature saves column widths in either localStorage or sessionStorage within an object with the parameter "columnWidths". If you wish to reset the columns width, the easiest way is to delete it.
sessionStorage.removeItem('object name'); or localStorage.removeItem('object name');The object name is specified in the p-table tag using the attribute stateKey="object name"
I currently have a service that retrieves a list of data and displays it within the app.component.html. Below is the code snippet used to display the data: <ul> <li *ngFor="let data of retrieveData"> {{ data.id }} - {{data.title} ...
I've been working with Angular and need to save a portion of JSON data in a variable within a function that is called in an HTML file: <select id="postazione" onchange="postazioneSelezionata()"> <option value="" selected disabled >Cho ...
Whenever I attempted to utilize vue's type assertion, I kept encountering this eslint error. To illustrate, consider the following snippet: data: function () { return { sellerIdToListings: {} as any, // 'as' Unexpected to ...
How can I successfully pass the value from the Ajax code to the database in this program aimed at displaying user details? There seems to be an error in the code for passing the value. What steps should I take to rectify this issue? function showUser() ...
I am currently trying to dynamically validate JSON in AngularJS. Unfortunately, I have encountered an issue with loading fields from the schema onto the page. My understanding of AngularJS is limited as I am still new to it. Although I have managed to cr ...
<!DOCTYPE html> <html> <body> <p>Press the button to generate a File Upload Button.</p> <button onclick="myFunction()">Click here</button> <script> function myFunction() { var x = document.createElemen ...
I am currently working on a vanilla JavaScript project. Within the app.js file, I am making an API call to retrieve specific values. Initially, I tested the API using Postman by including all the necessary headers there and then implemented the code in my ...
I am in the process of developing a telegram bot I have the need to save all my messages as constants My message schema is structured as follows: type MessagesSchema = { [K in keyof typeof MessagesEnum]: string } Here is an example implementatio ...
Is there anyone who can assist me in grasping the concept of utilizing angular2 animations in dart? I have referred to the documentation mentioning an AnimationBuilder class, but I was unable to locate it. ...
Here is the code for my navbar component: <li *ngFor="let item of menu"> <a *ngSwitchCase="'link'" routerLinkActive="active" [routerLink]="item.routerLink" (click)="Navigation(item.title)&q ...
var a = new THREE.Euler( 0, 1, 1.57, 'YXZ' ); var b = new THREE.Vector3( 1, 0, 1 ); var c = b.applyEuler(a); In order to get the value of c using b.applyEuler(a), I am looking for the reverse operation involving applyEuler. Given that the value ...
My Objective I am attempting to display data from a MySQL database in a "ComboChart" using Google Charts. To achieve this, I followed a tutorial, made some modifications, and ended up with the code provided at the bottom of this post. Current Behavior T ...
Within the array of nested objects provided below: [ { "items": [ { "name": "See data", "href": "/data", }, { ...
I have incorporated google-map-react into my React project and I have designed custom markers. The markers are displayed at the correct location but from the top left corner: https://i.sstatic.net/e6lGN.png The red dot indicates the exact location. Howe ...
While attempting to send a blob image, I encountered an Error: Unexpected end of form when using multer with Serverless Framework. Upon checking console.log https://i.sstatic.net/s8VSs.png My understanding is that I need to append it to FormData before s ...
I'm currently working on developing a weather forecasting website using the p5.js framework in JavaScript. One issue I am facing is that the API I am utilizing only provides weather descriptions in lowercase format, whereas I want them to be displayed ...
My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...
My Component includes a form that, upon submission, utilizes Apollo's useLazyQuery to fetch data based on the form values. The form in the component is managed by React Hook Forms, with the handleSubmit controlled by RHF. <FormContainer onSubmit= ...
When using ng-repeat, I am able to display textboxes related to each item. Upon clicking the SaveAll button, I intend to retrieve all textbox values based on ITEM ID and save them to the database. <tr> <td> <table ng-repeat="item in ...
I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...