[table] Not support setting overflow menu direction for row actions

[zhaozhuo813]

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:

1. Go to story book
2. No parameter to control the overflow menu direction

Environment/versions:

• OS: macos
• Browser: chrome
• carbon-addons-iot-react version: 2.140.6

[katedraper]

@davidicus please estimate this item

[davidicus]

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 ?

[kevinsperrine]

@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.

[aovdiien]

+1 we need this functionality for our project too!

[jlrgore]

+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

[kevinsperrine]

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.

This was left open to add a prop to allow it to be controlled by the developer.

[jlrgore]

Nice! Will this be available in base Carbon, as well? I don't believe our dev team is using the IOT variant.

[kevinsperrine]

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.