search

adazzle / react-data-grid

Feature-rich and customizable data grid React component
https://adazzle.github.io/react-data-grid/
Other
6.96k stars 2.18k forks source link

Add top and left to cell editor props back #2664

Open chirayuchiripal opened 3 years ago

chirayuchiripal commented 3 years ago

Use case

The top and left properties were removed (PR #2420) from CellEditorProps which is taking away an important functionality to have custom editor with portal rendered at the cell position. We want to have a custom editor that opens at (right below) the cell position. The top and left properties are useful in positioning the cell editor at desired location when editor is rendered with portal and possibly floating on/below the cell itself.

Proposed solution

  1. Add top and left back to CellEditorProps. OR
  2. When creating editor with portal, use current cell as the portal target (instead of Body) if user does not provide their custom portal target.
chirayuchiripal commented 3 years ago

@amanmahajan7 I want to check if there is any plan for this or I can help make this change and raise a PR or do you have something else in mind for Editors for future?

amanmahajan7 commented 3 years ago

@chirayuchiripal can you provide us more info on the editor that needs the dimensions? If you are using something like a custom dropdown then can you render the input in the cell and the menu in a portal?

chirayuchiripal commented 3 years ago

@amanmahajan7 When we render the custom dropdown in portal, we need to position it below the cell. I couldn't find a way to do that without knowing the top and left attribute of the current cell which is no longer available. Is there any way to calculate it from the given EditorProps?

nstepien commented 3 years ago

Internally we use react-popper to display things like dropdown selects or autocompleters, I highly recommend it: https://popper.js.org/react-popper/ https://github.com/popperjs/react-popper

chirayuchiripal commented 3 years ago

@nstepien I am aware of that library. This not about which library to use for rendering in portal. It is about editor portal target and positioning that with respect to cell position. If I have to ask it differently, is there an example in the demo website where you use a custom editor rendered in portal which is positioned below the cell being edited?

Something like this: https://pasteboard.co/AlqGl16ibgPR.png

mtdewulf commented 2 years ago

I have this same problem. I'm using Popper, but I want the popup to be positioned at the selected cell, not centered in the document body. AFAIK, popper just needs an anchorEl. It seems like it would be easy to pass the selected cell element via the EditorProps?