Я работаю с редактируемой ячейкой primeng. Все работает нормально, но когда я пытаюсь сделать табуляцию, она не работает, это мой код таблицы primeng html:
<p-table #pjoTable [columns]="pjoColumns" id="sinistre-instruction-ouv-pjo-table" [rows]="10"
[scrollable]="true" [responsive]="true" [value]="listPjos">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [ngStyle]="{'width' : col.width}">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header | translate}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-columns="columns">
<tr [pSelectableRow]="rowData">
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<div class="row" style="margin-left: 1px;margin-right: 1px;">
<div class="col-md-8" style="padding: 1px;">
<app-datepicker [dateValue]="rowData.sinpjDatpj"
[disabled]="rowData.datePjrAreValidated || mode === 'READ'"
id="instruction-ouv-pj-date-pj"
(blur)="onBlur(rowData, rowIndex)"
(changeDateValue)="changeValueManuelDatePJ($event, rowData);compareDataChange(rowData)">
</app-datepicker>
</div>
<div class="col-md-4" style="padding: 1px;"
*ngIf="!rowData.datePjrAreValidated">
<button class="btn btn-primary btn-sm" *ngIf="!showGlyficonOKDatePJ"
(click)="changeValueDatePJ(rowData.sinpjDatpj, rowData)"
[disabled]="disableGlyficonOKDatePJ">
<i class="glyphicon glyphicon-ok"></i>
</button>
<button class="btn btn-default btn-sm" *ngIf="!showGlyficonRemoveDatePJ"
(click)="closeUpdateDatePJ(rowData)">
<i class="glyphicon glyphicon-remove"></i>
</button>
</div>
</div>
</ng-template>
<ng-template pTemplate="output">
<div>
<span style="color: #0E70CA"> {{rowData.sinpjDatpj | date: 'dd/MM/yyyy'}} </span>
</div>
</ng-template>
</p-cellEditor>
</td>
<td>
<span class="onoffswitch">
<input type="checkbox" [checked]="rowData.isValidPJ"
(change)="OnCheckboxSelect(rowData, $event);compareDataChange(rowData)"
class="onoffswitch-checkbox" [id]="rowData['id']"
[disabled]="rowData.pjrAreValidated || mode === 'READ'">
<label class="onoffswitch-label" [for]="rowData['id']">
<span class="onoffswitch-inner" data-swchon-text="OUI"data-swchoff-text="NON"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</td>
<td>{{rowData.sinpjUtilValid}}</td>
<td pEditableColumn>
<div>
<p-cellEditor>
<ng-template pTemplate="input">
<div class="row" style="margin-left: 1px;margin-right: 1px;">
<div class="col-md-8" style="padding: 1px;">
<input class="form-control" type="text" id="instruct-ouv-pj-notes"
[disabled]="mode === 'READ'" (focus)="showBtnOKCancel()"
pInputText name="notes-pjo"
[(ngModel)]="rowData.sinpjComValid"
maxlength="245"
(change)="addNote(rowData, $event)"/>
</div>
<div class="col-md-4" style="padding: 1px;" *ngIf="mode !== 'READ'">
<button type="submit" class="btn btn-primary btn-sm"
*ngIf="!showGlyficonOKCom"
(click)="updateComNote(rowData.sinpjComValid,rowData)"
[disabled]="false">
<i class="glyphicon glyphicon-ok"></i>
</button>
<button type="submit" class="btn btn-default btn-sm"
*ngIf="!showGlyficonRemoveCom"
(click)="closeUpdateComNote(rowData)" [disabled]="false">
<i class="glyphicon glyphicon-remove"></i>
</button>
</div>
</div>
</ng-template>
<ng-template pTemplate="output">
<div>
{{rowData.sinpjComValid}}
</div>
</ng-template>
</p-cellEditor>
</div>
</td>
</tr>
</ng-template>
</p-table>
Я пытаюсь сделать табуляция, чтобы сосредоточиться в этом столбце
<td>
<span class="onoffswitch">
<input type="checkbox" [checked]="rowData.isValidPJ"
(change)="OnCheckboxSelect(rowData, $event);compareDataChange(rowData)"
class="onoffswitch-checkbox" [id]="rowData['id']"
[disabled]="rowData.pjrAreValidated || mode === 'READ'">
<label class="onoffswitch-label" [for]="rowData['id']">
<span class="onoffswitch-inner" data-swchon-text="OUI"data-swchoff-text="NON"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</td>
табуляция не работает для этого столбца, как ее решить? и есть ошибка в моем коде для премьер нг редактируемой ячейки? заранее спасибо.