Closed ybenarbiaBBI closed 2 years ago
Hello everyone,
i'm using p-table component in my java / angular web project.
this my table component
`<p-table
[columns]="currencies" [value]="currencies" [lazy]="true" selectionMode="single" responsiveLayout="scroll" [totalRecords]="totalElements" [paginator]="true" [alwaysShowPaginator]="false" (onRowSelect)="true" [rows]="10" [(selection)]="selectedCurrency" (onLazyLoad)="loadCurrenciesLazy($event)" > <ng-template pTemplate="header"> <tr> <!-- <th [style.width.px]="50">Etat</th> --> <th pSortableColumn="nameCurrency"> name <p-sortIcon field="nameCurrency"></p-sortIcon> <input pInputText (click)="$event.stopPropagation()" placeholder="Filtrer" class="form-control form-control-sm" type="text" (input)="dt.filter($event.target.value, 'nameCurrency', 'contains')" /> </th> <th pSortableColumn="codeCurrency"> Code <p-sortIcon field="codeCurrency"></p-sortIcon> <input pInputText (click)="$event.stopPropagation()" placeholder="Filtrer" class="form-control form-control-sm" type="text" (input)="dt.filter($event.target.value, 'codeCurrency', 'contains')" /> </th> <!-- <th> E-mail <input pInputText (click)="$event.stopPropagation()" placeholder="Filtrer" class="form-control form-control-sm" type="text" (input)="dt.filter($event.target.value, 'email', 'contains')" /> </th> --> <!-- <th> Applications </th> --> <th>Actions</th> </tr> </ng-template> <ng-template pTemplate="body" let-currency> <tr> <!-- <td class="text-center"> <button type="button" (click)="changecurrenciestatus(currency)" class="btn btn-sm" [class.btn-success]="currency.active" [class.btn-default]="!currency.active" pTooltip="Modifier l'état" tooltipPosition="top" > <i class="fa" [class.fa-toggle-on]="currency.active" [class.fa-toggle-off]="!currency.active"></i> </button> </td> --> <td>{{ currency.nameCurrency }}</td> <td>{{ currency.codeCurrency }}</td> <!-- <td>{{ currency.email }}</td> <td> <span class="badge badge-primary" *ngFor="let app of currency.applications"> {{ app.name }} </span> </td> --> <td> <button type="button" (click)="editCurrency(currency)" class="btn btn-sm btn-warning" pTooltip="Modifier" tooltipPosition="top" > <i class="fa fa-cog text-white"></i></button > <button type="button" (click)="deleteCurrency(currency)" class="btn btn-sm btn-danger" pTooltip="Supprimer" tooltipPosition="top" > <i class="fa fa-times"></i> </button> </td> </tr> </ng-template> <ng-template pTemplate="paginatorleft"> <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button> </ng-template> <ng-template pTemplate="paginatorright"> <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button> </ng-template> </p-table>`
but Even if i've set selectionMode attribute with single value my table selection is not working, if i click it doesn't highlight any row.
Visual Studio code, front angular with java spring boot backend. "dependencies": { "@angular-devkit/build-angular": "^13.3.4", "@angular/animations": "^13.3.5", "@angular/cdk": "13.3.5", "@angular/common": "^13.3.5", "@angular/compiler": "^13.3.5", "@angular/core": "^13.3.5", "@angular/forms": "^13.3.5", "@angular/platform-browser": "^13.3.5", "@angular/platform-browser-dynamic": "^13.3.5", "@angular/router": "^13.3.5", "@coreui/angular": "2.12.0", "@coreui/coreui": "2.1.16", "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1", "@coreui/icons": "0.3.0", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", "angular-sweetalert-service": "2.0.2", "chart.js": "^3.3.2", "font-awesome": "^4.7.0", "moment": "^2.29.1", "ngx-bootstrap": "^5.6.1", "ngx-scrollbar": "8.0.0", "primeicons": "^4.0.0", "primeng": "12.2.2", "rxjs": "^6.6.3", "simple-line-icons": "^2.5.5", "sonarqube-scanner": "^2.8.1", "sweetalert2": "10.9.1", "tslib": "^2.0.0", "zone.js": "~0.11.4", "backbone": "^1.4.1", "diagram-js": "^8.7.1", "jointjs": "^3.5.5", "jquery": "^3.6.0", "lodash": "^4.17.21" }, "devDependencies": { "@angular-eslint/builder": "13.2.1", "@angular-eslint/eslint-plugin": "13.2.1", "@angular-eslint/eslint-plugin-template": "13.2.1", "@angular-eslint/schematics": "13.2.1", "@angular-eslint/template-parser": "13.2.1", "@angular/cli": "^13.3.5", "@angular/compiler-cli": "^13.3.5", "@angular/language-service": "^13.3.5", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.8", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.17.0", "@typescript-eslint/parser": "5.17.0", "eslint": "^8.12.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "^6.3.20", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "^2.2.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "karma-parallel": "^0.3.1", "karma-sonarqube-unit-reporter": "0.0.23", "karma-spec-reporter": "0.0.34", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.6.4", "@types/backbone": "latest", "@types/jointjs": "^2.0.0", "@types/jquery": "latest", "@types/lodash": "^3.10.1" }, "engines": { "node": ">= 10.13", "npm": ">= 5.6.0" }, "peerDependencies": { "tslib": "1.10.0" }
No response
13.3.4
12.2.2
TypeScript
16.15.0
Google Chrome
i want just when the user click any row it highlight it.
sorry i've forget that [pSelectableRow]="currency" on the
Describe the bug
Hello everyone,
i'm using p-table component in my java / angular web project.
this my table component
`<p-table
dt
but Even if i've set selectionMode attribute with single value my table selection is not working, if i click it doesn't highlight any row.
Environment
Visual Studio code, front angular with java spring boot backend. "dependencies": { "@angular-devkit/build-angular": "^13.3.4", "@angular/animations": "^13.3.5", "@angular/cdk": "13.3.5", "@angular/common": "^13.3.5", "@angular/compiler": "^13.3.5", "@angular/core": "^13.3.5", "@angular/forms": "^13.3.5", "@angular/platform-browser": "^13.3.5", "@angular/platform-browser-dynamic": "^13.3.5", "@angular/router": "^13.3.5", "@coreui/angular": "2.12.0", "@coreui/coreui": "2.1.16", "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1", "@coreui/icons": "0.3.0", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", "angular-sweetalert-service": "2.0.2", "chart.js": "^3.3.2", "font-awesome": "^4.7.0", "moment": "^2.29.1", "ngx-bootstrap": "^5.6.1", "ngx-scrollbar": "8.0.0", "primeicons": "^4.0.0", "primeng": "12.2.2", "rxjs": "^6.6.3", "simple-line-icons": "^2.5.5", "sonarqube-scanner": "^2.8.1", "sweetalert2": "10.9.1", "tslib": "^2.0.0", "zone.js": "~0.11.4", "backbone": "^1.4.1", "diagram-js": "^8.7.1", "jointjs": "^3.5.5", "jquery": "^3.6.0", "lodash": "^4.17.21" }, "devDependencies": { "@angular-eslint/builder": "13.2.1", "@angular-eslint/eslint-plugin": "13.2.1", "@angular-eslint/eslint-plugin-template": "13.2.1", "@angular-eslint/schematics": "13.2.1", "@angular-eslint/template-parser": "13.2.1", "@angular/cli": "^13.3.5", "@angular/compiler-cli": "^13.3.5", "@angular/language-service": "^13.3.5", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.8", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.17.0", "@typescript-eslint/parser": "5.17.0", "eslint": "^8.12.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "^6.3.20", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "^2.2.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "karma-parallel": "^0.3.1", "karma-sonarqube-unit-reporter": "0.0.23", "karma-spec-reporter": "0.0.34", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.6.4", "@types/backbone": "latest", "@types/jointjs": "^2.0.0", "@types/jquery": "latest", "@types/lodash": "^3.10.1" }, "engines": { "node": ">= 10.13", "npm": ">= 5.6.0" }, "peerDependencies": { "tslib": "1.10.0" }
Reproducer
No response
Angular version
13.3.4
PrimeNG version
12.2.2
Build / Runtime
TypeScript
Language
TypeScript
Node version (for AoT issues node --version)
16.15.0
Browser(s)
Google Chrome
Steps to reproduce the behavior
No response
Expected behavior
i want just when the user click any row it highlight it.