DataGrid header selection checkbox doesn't work with paging

Thank you for the update, Yiheng. In the provided demo the header checkbox value is updated only if all items are selected, while in the paging scenario you are changing the selection only of the items on the first page. You can change the logic applied to the `headerSelectionValue` prop to update the header checkbox if any of the data items are checked (instead of if all items are checked) like follows:

         headerSelectionValue={
            dataState.findIndex((item) => selectedState[idGetter(item)]) != -1
          }

You can test it here:

https://stackblitz.com/edit/react-v7yj55-jepzky?file=app%2Fmain.jsx

Please note that with the sample above the header checkbox will remain checked event if you do not have selected items on the current page, but you have active checkboxes in some other pages. For example, in order to avoid this you can keep the headerChecked value in the state and update based on the items on the current page.

I hope this helps.