[Figma] Bulk Actions

[ivanbachev]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

What are the recommended guidelines on bulk selection in the Table and DataGrid components and shouldn’t there be dedicated components for a bulk selection bar _(similar to the dedicated toolbar “Custom / Table / Toolbar” component)?

Currently there are two “bulk actions” examples available in the Figma ui kit for the Table component:

• “Data table: bulk actions 1” - this one uses a “” component with overrides

• “Data table: bulk actions 2” - this is just set with an auto-layout group, but the first table head component should show with an indeterminate checkbox selection (to indicate 3 of the rows are selected and clicking on the indeterminate checkbox deselects the rows)

There are no examples provided for how bulk selection works on the “Data Grid” component.

The online documentation is also limited. I was only able to find this example https://mui.com/material-ui/react-table/#sorting-amp-selecting, which looks right but differs from the examples shown in the Figma UI kit.

Examples 🌈

I would personally recommend the Carbon Design System solution for covering the toolbar as this prevents the user from searching or filtering while the bulk actions are active. https://carbondesignsystem.com/components/data-table/usage#multi-select-and-batch-action https://react.carbondesignsystem.com/?path=/story/components-datatable-batch-actions--default

Motivation 🔦

My personal opinion is that there must be a consistency between the Table and DataGrid component regarding handling bulk actions. I would say a dedicated “Bulk Actions” component is need in the UI kit, with variants for Text and Icon buttons, "Cancel" action to clear the selection and etc.

[oliviertassinari]

Interesting question. I'm not aware that we have a story for this, so far, we leave this to the realm of the product designers that build with the components, cc @gerdadesign in guess you would like to recommend a specific solution.

[adrianmanea]

I also noticed this issue, and you are correct. There should be a defined way of doing bulk actions, at least out-of-the-box. That's why I have designed two concepts. People can try them out since a standard one is not available in the API. I think the one from the documentation is also custom created, correct?