jbetancur / react-data-table-component

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
https://react-data-table-component.netlify.app
Apache License 2.0
2.03k stars 409 forks source link

Add `paginationComponentOptions.minWindowWidth` (defaults to `SMALL == 599`) #1227

Open ryan-williams opened 4 months ago

ryan-williams commented 4 months ago

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[bot] commented 4 months ago

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...

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 commented 3 months ago

Just noticed #1103, I think this addresses that