[Feature Request]: Add batch actions bar below the Data table tool bar

[pilarfernandezz]

The problem

In the current DataTables, when selecting rows and generating the Batch Actions blue bar is rendered on top of the Action toolbar. With that, the user can't do actions like update a search query.

Without the Batch Actions bar (search bar and actions button shown):

With the Batch Actions bar (search bar and actions button are hidden):

The solution

Have a new prop that allows the Batch Actions bar to be displayed bellow the Actions Toolbar.

Example:

Examples

No response

Application/PAL

Carbon for IBM Products

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[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]

@pilarfernandezz Hey thanks for opening this and putting up a PR so quickly! I spoke with @laurenmrice about this just now. We've heard this problem before and agree it feels like a valid ask. It's a big change though that will require a bit more work both in the existing PR and afterwards.

1. A finalized design spec from @carbon-design-system/design
   • Should this be an option (as you have it in the PR now)
   • Or do we want this to fully replace the current interaction that exists?
   • What could/should the keyboard interaction path be?
2. Update the PR to match design spec
   • This may include reevaluating the prop approach to something else
3. Ensure the PR covers all the bases
   • Documentation
   • AVT
   • VRT
   • Backwards compatibility (or a feature flag if it's not backwards compatible)
4. Mirror this update over into @carbon/web-components
5. Update carbon-website documentation
6. Update the figma design kit

For now I'll mark the PR as a draft, at least until the design spec is ironed out.

[laurenmrice]

Update from design

• Seems implementation wise many systems leave it up to the team to determine how they want to handle the action side of batch actions after selecting rows in a data table. Some systems do supply a batch action bar, but it usually covers up the data table toolbar.

• @pilarfernandezz Instead of providing a net new enhancement for this, we recommend that you leverage our current functionality in the Selection > Playground table in React and use the simple toolbar action icon buttons to provide your global table batch actions instead of using the more complex blue batch action bar mode. This way, you could still access the search. I see that you have already created a PR with a proposed design solution, which you could also use but it would be best suited as a local customization on your end in your product.

---