Persist selection between pagination using fluentui/React in DetailsList - reactjs

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.
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());
}
}));
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]);
bind selection to detaillist by pass selection={selection}