New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[data grid] pageSize is reset to zero with enabled autoPageSize and there is enough room on the page for a larger page size #12936
Comments
even though I found a workaround for this issue. This wasn't that easy for me. Here is a workaround const [autoCalculatedPageSize, setAutoCalculatedPageSize] = useState<number | undefined>(undefined);
const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
page: 0,
pageSize: 0
})
const {page} = paginationModel;
const reqParams = {
offset: page * autoCalculatedPageSize,
limit: autoCalculatedPageSize || 0
}
const data = useProductsQuery(regParams, {
enabled: autoCalculatedPageSize != null
})
<DataGrid
// ... other props
rows={data.rows}
rowCount={data.count}
pagination
paginationMode="server"
paginationModel={paginationModel}
onPaginationModelChange={(model) => {
if(model.pageSize !== 0) { // <-- this check is the workaround
setAutoCalculatedPageSize(model.pageSize);
}
setPaginationModel(paginationModel}
}} |
That is a valid approach. |
Is there anything else we can help you with? |
I could live with a workaround but I feel like there is something wrong with my approach. So I think I'll just turn off const [paginationModel, setPaginationModel] = useState({
page: 0,
pageSize: 0
});
const {page, pageSize} = paginationModel;
const reqParams = {
offset: page * pageSize,
limit: pageSize
}
const data = useProductsQuery(regParams, {
enabled: !isFirstRender
})
useLayoutEffect(() => {
return apiRef?.current.subscribeEvent("viewportInnerSizeChange", () => {
const dimensions = apiRef.current.getRootDimensions();
const computedPageSize = Math.floor(
dimensions.viewportInnerSize.height / dimensions.rowHeight,
);
setPaginationModel({
page,
pageSize: computedPageSize,
});
});
}, [apiRef]);
<DataGrid
// ... other props
rows={data.rows}
rowCount={data.count}
pagination
paginationMode="server"
paginationModel={paginationModel}
onPaginationModelChange={setPaginationModel}
/> |
@layerok: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey. |
Steps to reproduce
Link to live example: https://codesandbox.io/p/github/layerok/mui-data-grid-stateful-url/bug-demo?checkout=true&file=%2Fsrc%2FHomePage.tsx%3A266%2C6
Steps:
When page size is zero I simply don't know how many rows I should fetch so I fetch all available rows.
You can see it in the end of the video
incorrect.page.size.mov
Current behavior
page size is reset to zero with enabled autoPageSize even though there is enough room on the page for a page size greater than zero
Expected behavior
page size isn't reset to zero with enabled autoPageSize even when there is enough room on the page for a page size greater than zero
Context
I'm trying to filter, paginate and sort table data server-side with a dynamic page size that depends on the dimensions of the data grid. And also I want to preserve filter, pagination and sort states in the URL so users could share links containing the data grid state
Your environment
No response
Search keywords: autoPageSize server side pagination filtering
Order ID: 74777
The text was updated successfully, but these errors were encountered: