Skip to content

Conversation

@ryan-williams
Copy link

Conditional rendering in Pagination causes SSR hydration errors in Next.js apps

Workaround / Fix

This PR adds the ability to pass paginationComponentOptions={{ minWindowWidth: null }} to DataTable, to always render the "rows per page" and "page range" parts of the pagination footer, which ensures server and client DOMs will match.

@netlify
Copy link

netlify bot commented Apr 15, 2024

Deploy Preview for react-data-table-component ready!

Name Link
🔨 Latest commit 32f5d02
🔍 Latest deploy log https://app.netlify.com/sites/react-data-table-component/deploys/661c8ac73516160008ed1a18
😎 Deploy Preview https://deploy-preview-1227--react-data-table-component.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@ryan-williams ryan-williams changed the title Add paginationComponentOptions.minWindowSize (defaults to SMALL == 599) Add paginationComponentOptions.minWindowWidth (defaults to SMALL == 599) Apr 16, 2024
@ryan-williams
Copy link
Author

ryan-williams commented May 25, 2024

Just noticed #1103, I think this addresses that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant