search

TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://tanstack.com/table
MIT License
25.23k stars 3.08k forks source link

MultiSelect Dropdown (react-select) options appears below the table #2945

Closed nitishnivedan closed 2 years ago

nitishnivedan commented 3 years ago

Hi,

I am using Multi select dropdown (importing Select from "react-select") in one of the columns of react table and the dropdown appears below the table. issue with the css part.

I am attaching the screenshot.

image

instead of dropdown options going over the table, it goes down the table and as a result vertical scroll appears. have tried z-index and stuff but no luck as of now. Kindly help. thanks in advance.

datner commented 3 years ago

This is unrelated to react-table, it's just how html works. please refer to react-select and search their documentation how to use portals

nitishnivedan commented 3 years ago

@datner - yeah, I have checked portals, still no luck. may be portal works well with react-select when used in react table version 6, not the version 7. Anyways thanks for your suggestion.

If any one else has faced this issue while using react-select (multiple dropdown) in react-table, then please do suggest. Any lead is appreciated. Thanks

datner commented 3 years ago

react-table 7 is headless and does not render Dom at all, I can't even think where to begin

nitishnivedan commented 3 years ago

Agreed. but portal isnt the solution in this case.

datner commented 3 years ago

Why not? Protals exist for that exact reason, z-index can't help you here

nitishnivedan commented 3 years ago

@datner - applied portals and the dropdown menu is appearing completely outside the table. Please see my screenshot.

image

Some piece of code I am attaching here:-

(MultiSelectDropdown Component)

<Select

  value={selectedOptions}
  onChange={onChangeHandler}
  options={options}
  isMulti={true}
  styles={customStyles}
  menuPortalTarget={document.body}
/>

The below code is for one particular column to render the above multi select dropdown in each column { Header: () => (

WBSE * 
),
accessor: "WBSE",
disableFilters: true,
canGroupBy:false,
Cell: ({row}) => {
  return <WBSE rowno={row.index}  />;
},

},

datner commented 3 years ago

I have to say I no idea why you would think this is related to react-table, and I don't really understand anything from the pictures. So to lay this issue to rest, here is a codesandbox example of how you can make react-select exist above the table

note that First Name is without a portal, the Last Name is with a portal. Everything is working as expected

nitishnivedan commented 3 years ago

@datner - i really dont understand why u keep saying its not related to react-table if u can fix it. anyways not convinced by the cosmetic look of the table u have given in first place.

To end this issue, i have shared the link below in codesandbox. Have added u in code sandbox and modify it if u r abe to fix it.Appreciate ur time.

https://codesandbox.io/s/hopeful-thompson-trs9f

datner commented 3 years ago

there you go, fixed. My change is @ Columns.js:29

nitishnivedan commented 3 years ago

@datner Not so easy bro. I have added some more columns. try to scroll while the dropdown is open, u will find the issue. But appreciate your effort.

image

datner commented 3 years ago

again, completely unrelated to react-table. Please follow this issue if you want more help

nitishnivedan commented 3 years ago

@datner - haan related/unrelated, separate thing. But its not fixable with your portal thing. right? :D .

nitishnivedan commented 3 years ago

@datner - one request. sorry if i am being rude but you should refer the documentations after you go through it once. the above link which u just shared,has the limitiation of scrolling not happening within once you apply the workaround, menuShouldBlockScroll={true}.

ProtestSoftware commented 3 years ago

This is unrelated to react-table, it's just how html works. please refer to react-select and search their documentation how to use portals

Thanks mate, this helped a lot, portals work perfectly!

nitishnivedan commented 3 years ago

@datner - bro is there any solution for this https://github.com/tannerlinsley/react-table/issues/3152

please let me know if u need any more information

github-actions[bot] commented 2 years ago

This issue is being marked as stale (no activity in the last 14 days)

github-actions[bot] commented 2 years ago

This issue has been detected as stale and automatically closed. It's very likely that your issue has remained here this long because it would require breaking changes to v7. React Table v8 is currently in alpha (soon beta!) and already contains bug fixes, performance improvements and architectural changes that likely address this issue.