[Dev] Data Table Implementation (Overflow menu)

[Kritvi-bhatia]

"By default, the overflow menu icons are persistent on each row. Having the overflow menus always visible signals to the user actions can be taken on the table rows. Alternatively, a product team may use the overflowMenuOnHover prop to only show the overflow menu on hover and focus to reduce the visual clutter of an overflow menu on every row" Source

TO BE UPDATED : In the storybook, by default state should be the menu icons are persistent on each row.

Currently, we can add this under feature flag.

CURRENT STATE : Currently, we're having the over flow menu hover state as by default.

---

References:

• Data Table Figma File Audit
• Data Table Figma File Solution

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

@Kritvi-bhatia This can currently be done with the overflowMenuOnHover prop. Here's an example, you can configure the controls to toggle the prop.

I think we can close this issue unless we want to mandate this change to always be visible. If we want it to be a configurable option like it already is, I think we can close this one.

[tay1orjones]

After discussing further, the determination is this will just be changing overflowMenuOnHover to be false by default. It's already mentioned on the website to be this way, so this unifies the implementation against the current documentation. This isn't new design guidance either, it's been present for quite a while on the website.

We think this does not constitute a breaking change because:

• This is a meaningful improvement to usability and accessibility for all users
• It has a relatively low surface area and should not impact existing application test harnesses
• overflowMenuOnHover remains configurable - consumers can set it to true if they prefer the old functionality

[Kritvi-bhatia]

HI @tay1orjones, can you please help me understand what is this "persistent" boolean is for?

[guidari]

Hey @Kritvi-bhatia17 The persistent prop makes the search functionality not expandable and persistent.

Example: https://react.carbondesignsystem.com/?path=/story/components-datatable-toolbar--persistent-toolbar

[mranjana]

hi @guidari , Can i work on this?

[guidari]

Sure @mranjana I'll assign you!