Handling bulk actions items in table

In the past, we organized bulk action items within the subheader, with some aligned to the left and others to the right. These action items remained disabled when no records were selected in the table. However, issue with this UI was:

  • The buttons consistently displayed in a disabled state, even when no records were selected.

To address the above issue, we have implemented the following best practices for improvement.

Best practices

  • All the actionable items need to be together.

  • Use Take action as label for Dropdown target button.

  • Move all the bulk actionable items to neetoUI Dropdown even if it’s a single item.

  • Format for displaying number of selected records - 2 tickets selected of 26

  • Keep 16px gap between selected records info and Take action dropdown

  • Don't use icons for dropdown items.

  • For multi level dropdown menus add a right arrow as suffix to dropdown menu item, See Dropdown with prefix and suffix documentation.

You can go through SubHeader documentation and get more clarity on usage of action items.

Do’s and Don’ts

🚫 Don’t

new.gif
Caution - Buttons displayed in a disabled state, even when no records were selected

Do

Screenshot 2023-09-23 at 1.15.46 AM.png
Do - Follows the best practices mentioned above

https://github.com/bigbinary/neeto-engineering-ui-ux/issues/1

https://github.com/bigbinary/neeto-engineering-ui-ux/issues/29

https://github.com/bigbinary/neeto-engineering-web/issues/179