Data Grid pagination

[Dayshawn21]

Hello,
is there a way to pagination the Data grid react component: https://react.fluentui.dev/?path=/docs/preview-components-datagrid--default ?

Any ideas would be highly appreciated

[Ismael-Cruz]

I am using pagination from react-js-pagination (https://www.npmjs.com/package/react-js-pagination). You need to integrate it with the DataGrid by managing the "current items" that you pass to the items property of the DataGrid, but manageable.

The only issue I found is for the select/multiselect, since you change the items, the selection is really a headache which I am still struggling with.

It would be great to have a pagination feature in this component.

[m0jimo]

I've solved paging and multiselect using a guid for each row and following Data Grid properties:

...
getRowId={(item) => item.guid}
onSelectionChange={(e, data) => updateSelectedItems(data.selectedItems)}`
selectedItems={selectedItems ?? new Set()}
...

with ...

const updateSelectedItems = (itemsToSelect: Set<TableRowId>): void => {
        setSelectedItems(new Set(itemsToSelect));
    };