Search code examples
javascriptreactjsmaterial-uireact-grid-layout

material-ui data grid pagination not working on double clicks due to using react-grid-layout library for resizing

i am using react-grid-layout library to resize charts and material-ui data grid table. The issue is when i click on table pagination next to the arrow it doesn't work i have to click double in speed then it works. The issue is on first click the library think i am going to drag and drop the table or maybe resize it. How i can fix this issue? Look at the attached screenshot. enter image description here

this is code sandbox Link: https://codesandbox.io/s/customizable-react-dashboard-with-chart-fork-forked-rkq93e?file=/src/Content.js

Solution

  • In your current implementation everything inside <ResonsiveGridLayout> is draggable. You can disable dragging in a specific areas using draggableCancel prop from react-grid-layout. It requires a CSS selector to work.

    So in your case go to Table.js file and create a className for pagination. Something like this 👇

    <DataGrid
    componentsProps={{
      pagination: {
        className: "disable-dragging-me"
      }
    }}
  />

    Now you use draggableCancel in the <Resposive/> component of react-grid-layout. Make this change in the Content.js file 👇

    <ResponsiveGridLayout
    draggableCancel=".disable-dragging-me"
  >