How to get selected items on Fluent UI DetailsList component

Question

I want to use DetailsList component https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist and select items. As I understand, the component doesn't provide us a prop to get selected items. I only see onActiveItemChanged prop which is only giving me single item but not all selected items.

• I checked the question below, but it seems the answer doesn't work

Getting selected items in Fluent UI DetailsList

• I wanted to create a state with an empty array and push or filter selected items into it, but there is also another problem. Scenario:

1. Click checkbox on header to select all items
2. If I click an item's checkbox, then it becomes unselected and other items still selected
3. If I click an item's any field instead of checkbox, then other items become unselected, and the one I clicked become selected.

Because of this reason -maybe I can also have other problem in the future-, I couldn't use state, as well.

I will be very glad if I can get current selected checkboxes on DetailsList component.

Answer 1

I found the answer.

• import Selection from @fluentui/react
• Add selection={selection} to DetailsList props
• and then do this before returning the component:

const selection = new Selection({
  onSelectionChanged: () => {
    const selectedItems = selection.getSelection();
    // Do something with the selected items'
    console.log(selectedItems, "ewgergre");
  },
});