angulartypescriptionic-frameworkngx-datatable

How to only have selected 1 checkbox in a Ngx-datable table?


I have an ngx-datatable witch checkboxes, only 1 checkbox needs should be selected at a time.

I have tried to accesing the event using this:

html

 <ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  (select)='onSelect($event)'>    
  </ngx-datatable> 

But the event only contain what is selected. Would there be a way to unselect everything but the last checkbox clicked?


Solution

  • Swimlane offers an example on how to clear all selections here with a demo here. Notice the "remove" button at the top of the page.

    The main points are utilizing the @Inputs [selected] and updating your @Output (select).

    component.html

     <ngx-datatable 
      class="margin-left bootstrap" 
      [rows]="rows" 
      [loadingIndicator]="'true'" 
      [rowHeight]="'30'"
      [reorderable]="'true'" 
      [scrollbarH]="'true'" 
      [columnMode]="'standard'" 
      [columns]="columns"
      [selectionType]="'checkbox'"
      [selectAllRowsOnPage]="false"
      (select)='onSelect($event)'>    
      </ngx-datatable> 
    

    component.ts

    export class MyComponent {
    
      selected = [];
    
    
      onSelect({ selected }) {
        this.selected = [];
        this.selected.push(...selected);
      }
    
    
    }