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

huangapple go评论75阅读模式
英文:

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

问题

我正在使用react-grid-layout库来调整图表和material-ui数据表格。问题是,当我单击表格分页箭头时,它不起作用,我必须以更快的速度点击两次才能使其起作用。问题在于第一次单击时,库认为我要拖放表格或调整其大小。我该如何解决这个问题?请查看附带的截图。

这是代码沙盒链接: CodeSandbox链接

英文:

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.
material-ui data grid pagination not working on double clicks due to using react-grid-layout library for resizing

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

答案1

得分: 1

在你当前的实现中,<ResonsiveGridLayout> 内的所有内容都是可拖动的。你可以使用 react-grid-layoutdraggableCancel 属性来禁用特定区域的拖动。它需要一个 CSS 选择器来工作。

所以在你的情况下,前往 Table.js 文件并为 pagination 创建一个类名,类似这样 👇

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

现在,你可以在 Content.js 文件的 <Resposive/> 组件中使用 draggableCancel。在该文件中进行以下更改 👇

<ResponsiveGridLayout
    draggableCancel=".disable-dragging-me"
  >
英文:

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

huangapple
  • 本文由 发表于 2023年2月24日 00:39:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/75547758.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定