mardi 6 juin 2017

ngx-datatable show checkbox in a column

I have a problem because I can't show a checkbox properly in the table.

Here is my ts file

  export class ClientsViewComponent implements OnInit, OnDestroy {

  @ViewChild(DatatableComponent) table: DatatableComponent;
  private subClientList: Subscription;
  clientList: IClient[];


  constructor(
    private notificationService: NotificationService,
    private clientService: ClientService,
    private modalService: NgbModal
  ) { }

    /**
     * Inits custom list data
     */
  ngOnInit() {
     this.clientService.getClients();
     this.subClientList = this.clientService.clientLists$.subscribe(
       res => {
         this.clientList = res;
       },
      err => {
        this.notificationService.handleError(err);
      }
       );
  }
// More stuff

And here my IClient.ts

created_at: string;
updated_at: string;
code: string;
name: string;
enabled: boolean;

And here my html file

<ngx-datatable [rows]="clientList" [limit]="10" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'"
  class="dark" [sorts]="[{prop: 'code', dir: 'asc'}]" [loadingIndicator]="true" #table>

  <ngx-datatable-column prop="code" name="Code"></ngx-datatable-column>
  <ngx-datatable-column prop="name" name="Name"></ngx-datatable-column>
  <ngx-datatable-column prop="enabled" name="Enabled"></ngx-datatable-column>
  <ngx-datatable-column prop="updated_at" name="Update At"></ngx-datatable-column>
  <ngx-datatable-column prop="option" name="Options">
    <ng-template let-row="row" ngx-datatable-cell-template>
      <button type="button" class="btn btn-icon btn-info mr-2 mb-2" (click)="openModal(row)"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    </ng-template>
  </ngx-datatable-column>

</ngx-datatable>

My question is simple, I have a table where shows info about clients and it shows enabled client property as string (true,false) and I want to show it as a checkbox but after search info about it, only can see that datatable-column has a property called checkboxable but it adds a new checkbox near client.enabled property. The datatable is only for show info, no inline editing etc.. To add and edit I work with another modal component.

Here is a table screenshot:

Table screenshot

Someone can help me?

Thanks!




Aucun commentaire:

Enregistrer un commentaire