Ngx-datatable: Ability to deselect row in single select mode

[nickhellmich]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Once a row is selected, it can't be deselected by using ctrl + click as with multi select.

Expected behavior
User can select a single row and deselect it.

Reproduction of the problem
http://swimlane.github.io/ngx-datatable/#single-selection

What is the motivation / use case for changing the behavior?
I'd like a user to be able to clear their selection without having to provide an extra button. I have a ui where the user will load the grid per a selection in a drop down. To proceed, they will either select a child item in the grid or just keep their option from the drop down. If the user selects something from the grid but changes their mind, they have to reset their selection by changing their selection in the drop down. Yes, this is a fairly specific use case, however the ability to deselect a single row seems reasonable and in line with the other selection modes.

• Table version: 7.0.0
  

• Angular version: 4.1.3
  

• Browser: [all ]

• Language: [TypeScript 2.3.2]

[dalelotts]

Actually, this feature is easy to implement yourself.

Add this to the data table

[selectCheck]="singleSelectCheck"

Then define the function in your class.

  singleSelectCheck (row:any) {
     return this.selected.indexOf(row) === -1;
  }

One thing to know about the selectCheck implementation is that at runtime the this context is bound to the DataTableSelectionComponent class instance. There are two ways to deal with this:

1. No matter what your local selected array is named, reference this.selected, which may confuse the typescript compiler. (I didn't try to find a way for the compiler to accept this if the local variable has a different name)
2. (preferred) bind the selectCheck function to your component instance by adding this.singleSelectCheck = this.singleSelectCheck.bind(this); to the constructor.

The following definition of singleSelectCheck will eliminate the need to bind the function in the constructor:

  singleSelectCheck = (row:any) => {
     return this.selected.indexOf(row) === -1;
  }

[nickhellmich]

@dalelotts Thank you, that works great! It would be nice to see this in the demo.

[amcdnl]

@dalelotts - Thanks for providing that solution! Would you mind PR'n this to the docs for others?

[chalecki]

@dalelotts thanks for solution buddy 👏 💪 !

[dalelotts]

@amcdnl Sorry, just seeing this now - sure, I can do that! Is it still needed?

@chalecki You're welcome!

[byhoratiss]

@dalelotts Thanks for the hint, I didn't realize that this could be done this way!