primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.49k stars 4.6k forks source link

p-table selectionMode with single value doesn't working (primeng version 12.2) #12121

Closed ybenarbiaBBI closed 2 years ago

ybenarbiaBBI commented 2 years ago

Describe the bug

Hello everyone,

i'm using p-table component in my java / angular web project.

this my table component

`<p-table

dt

          [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
                >&nbsp;<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.

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.

ybenarbiaBBI commented 2 years ago

sorry i've forget that [pSelectableRow]="currency" on the html component of the body ...