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

Question

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?

Z. Bagley · Accepted Answer · 2020-09-17T22:32:47.530

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);
  }


}

score 0 · Answer 2 · answered Jun 23 '23 at 21:50

Use the value radio instead of checkbox. Example:

<ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'radio'"
  [selectAllRowsOnPage]="false">    
  </ngx-datatable>

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

2 Answers2