“How to fix ‘NGX Data Table Checkbox Issue In Angular?”

Question

I just made the common NGX data table for using in all my index,but whenever i used check boxes in table it's always coming in last column in index.whenever i applied individually its came on first column but i don't want to use it individually as it's using in every index.

------------------------Individually Table---------------------------

 <div class="row">
          <ngx-datatable-footer>
            <ng-template *ngIf="filerData.total>0" ngx-datatable-footer-template let-rowCount="filerData.total"
              let-pageSize="pageSize" let-selectedCount="selectedCount" let-curPage="curPage"
              let-offset="offset">
              <div class="col-md-1 datatable-footer_pagination">
                <select class="form-control" (change)="onPager($event.target.value,curPage)">
                  <option *ngFor="let option of pageLimitOptions" [value]="option.value"
                    [selected]="option.value == 15">
                    {{option.name}}
                  </option>
                </select>
              </div>
              <datatable-pager class="mb-2" [pagerLeftArrowIcon]="'datatable-icon-left'"
                [pagerRightArrowIcon]="'datatable-icon-right'" [pagerPreviousIcon]="'datatable-icon-prev'"
                [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage" [size]="pageSize"
                [count]="filerData.total" (change)="onPager($event,curPage)">
              </datatable-pager>
            </ng-template>
            <ng-template ngx-datatable-footer-template let-rowCount="filerData.total" let-pageSize="pageSize"
              let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
              <div class="col-md-4 datatable-footer_pagination"> No Data To Display
              </div>
            </ng-template>
          </ngx-datatable-footer>
        </div>
      </ngx-datatable>

------------------------ Common Table---------------------------

<app-ws-table [rows]="rows" (onSort)="onSort($event)" [isCheckBox]="true" [columns]="columns"
                [loading]="tableLoading" [rowCount]="filerData.total" [rowOffset]="filerData.current_page"
                [rowLimit]="filerData.per_page" (onPager)='onPager($event)' (rowDelete)="onDeletion($event)"
                (rowEdit)="onEdit($event)" [isClass]="true" [isLocal]="false" (selectedItem)="selectedClasses($event)"
                (onDownload)="onFiles($event)">
              </app-ws-table>

+1 for the fact that I needed to get to this post first to know which component to use in order to trigger the next/previous page in a custom footer. — Jan B., Feb 01 '20 at 02:25

score 0 · Answer 1 · answered Dec 21 '20 at 14:16

This works for me. in html

<ngx-datatable [rows]="rows" 
[columns] = "[
         {name:'select', cellTemplate: checkBox},
         {name:'column one', prop:'one'},
         {name:'column two', prop:'two'},
         {name:'column three', prop : 'three'}
         {name:'column four', prop: 'four'}]">
   <ng-template #checkBox let-row="row" let-value="value">
          <input type="checkbox">                         
   </ng-template>
</ngx-datatable>

this will work. assign data what you want to rows. in TS,
this.rows = data

“How to fix ‘NGX Data Table Checkbox Issue In Angular?”

1 Answers1