UI5 / UI5/webcomponents

[Feature Request]: Allow adding submenus in TableRowAction

Open
#13,730 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request Medium Prio TOPIC TBL
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Description

Feature Request Description

Currently ui5-table-row-action only supports single level menu on overflow. It would be nice to have a native option for adding submenus in table actions menu.

Proposed Solution

Allow nesting ui5-table-row-action in the same way as ui5-menu-item in this example to create multi-level menus. For instance, the snippet for "Open" action would be something like

<ui5-table-row-action slot="actions" text="Open" icon="open-folder">
    <ui5-table-row-action text="Open Locally" icon="open-folder">
        <ui5-table-row-action text="Open from C"></ui5-table-row-action>
        <ui5-table-row-action text="Open from D"></ui5-table-row-action>
        <ui5-table-row-action text="Open from E"></ui5-table-row-action>
    </ui5-table-row-action>
    <ui5-table-row-action text="Open from Cloud"></ui5-table-row-action>
</ui5-table-row-action>

Depending on how the first level action is displayed, the behaviour could be as follows:

  • If action is displayed in overflow menu, then it should have a submenu arrow icon, and a second level submenu appears on hover. Exactly the same behaviour as ui5-menu-item, basically.
  • If action is not moved to overflow menu and simply displayed as a button in the table, then clicking the button opens the second level submenu.
Proposed Alternatives
  1. Using ui5-menu and ui5-button directly to replicate ui5-table-row-action functionality
  2. Creating second level submenus separately and opening them on mouseenter or click
  3. Monkey patching ui5-table-row-action
  4. Give up on the submenus idea and have one single-level menu with lots of options.
Organization

No response

Additional Context

No response

Priority

No response

Privacy Policy
  • I’m not disclosing any internal or sensitive information.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the requested nesting behavior with ui5-menu-item and the linked playground example, then inspect the ui5-table-row-action component entry point. Verify both overflow-menu submenus and inline button behavior, including the proposed nested markup, before considering the feature complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.