Persist selection between pagination using fluentui/React in DetailsList

Question

How to Persist selection between pagination in DataList in fluentui/React

  <DetailsList        
    items={items}
    compact={true}
    columns={columns}
    selectionMode={SelectionMode.multiple}
    getKey={getKey}
    setKey="none"
    layoutMode={DetailsListLayoutMode.justified}
    isHeaderVisible={true}
    onItemInvoked={onItemInvoked}                         
  />   

Answer 1

I have manage the selection between some other re-render events, I think the solution should be compatible.

The basic idea is to store the selected items by myself, and when the selection changes or grid re-render due to data change, set the selection manually.

1. define the state to cache selected item, and store selected item in change event:

    const [selectedItems, setSelectedItems] = useState<Array<IObjectWithKey> | undefined>(undefined)
    const [selection] = useState(new Selection({
        onSelectionChanged: () => {
            setSelectedItems(selection.getSelection());
        }
    }));
   

2. manually set the selected item after any re-render trigger, remember to switch off event to avoid infinite loop:

    useEffect(() => {
        var preSelected = getSelectedChildren(selectedItems);
        if (preSelected.length > 0) {
            selection.setChangeEvents(false);
            itemList.forEach(item => {
                selection.setKeySelected(item.key.toString(), 
                   preSelected.findIndex(s => s.key === item.key) >= 0, true);
            });
            selection.setChangeEvents(true);
        }
        reloadState(getSelectedChildren(selectedItems));
    }, [itemList, selectedItems]);
   

3. bind selection to detaillist by pass selection={selection}