carbon-addons-iot-react
carbon-addons-iot-react copied to clipboard
[table] Not support setting overflow menu direction for row actions
What package is this for?
- [x] React
- [ ] Angular
Describe the bug
When the table has many rows, I want to set the overflow menu direction (top/bottom) to control how to pop up my menu depends on if the row is on top of the list or bottom of the list. Currently in each row in the table data, I set row action like this : row.rowActions.push({ id: 'metadata', isOverflow: true, labelText: 'xxx' }); There is no parameter supported to control the overflow menu direction.
To Reproduce
Steps to reproduce the behavior:
- Go to story book
- No parameter to control the overflow menu direction
Environment/versions:
- OS: macos
- Browser: chrome
-
carbon-addons-iot-react
version:2.140.6
@davidicus please estimate this item
We have recently added a smart detection placement of drop downs for the table that will place the dropdown on screen if too close to the edge. @kevinsperrine can you confirm this? If so does that solve the use case here @zhaozhuo813 ?
@davidicus The OverflowMenu currently in use in the RowActionsCell
is still the default Carbon component, so it doesn't have auto-positioning enabled, but, if it fits, @zhaozhuo813's use-case here, we can definitely swap it out and get that functionality, yes.
+1 we need this functionality for our project too!
+1 that we are running into a similar issue with overflow menus causing issues in modals. The overflow menu can flow outside of the viewport at the bottom of a list: https://github.ibm.com/tools-for-aps/zh/issues/26714#issuecomment-39202143
Hi @jlrgore, We merged an auto-positioning version of this in v2.147.0-next.55
, so the overflow should switch to top when near the bottom of the screen as seen here: https://next.carbon-addons-iot-react.com/?path=/story/1-watson-iot-table-table--table-example-with-create-save-views.
![Screen Shot 2022-01-06 at 4 25 13 PM](https://user-images.githubusercontent.com/609466/148454459-5b61c2ce-8134-4017-a2be-853f94798083.png)
This was left open to add a prop to allow it to be controlled by the developer.
Nice! Will this be available in base Carbon, as well? I don't believe our dev team is using the IOT variant.
Unfortunately, no. The auto-positioning is only available in the IOT variant. We wrote a wrapper around the OverflowMenu and Tooltip to automatically re-position them based on screen position.