react-data-table-component
react-data-table-component copied to clipboard
Add `paginationComponentOptions.minWindowWidth` (defaults to `SMALL == 599`)
Conditional rendering in Pagination causes SSR hydration errors in Next.js apps
- Repro repo runsascoded/react-data-table-hydration-bug
- Live demo (refresh with different windows widths, dev console shows error iff
window.innerWidth ≥ 599). - Local dev mode gives more details:
- The same error is described by #649 and this StackOverflow post.
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.
Deploy Preview for react-data-table-component ready!
| Name | Link |
|---|---|
| Latest commit | 32f5d0228ed722a3bd5885bb49bd63ca464570c8 |
| 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...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
Just noticed #1103, I think this addresses that