💬 RFC: Table component suggestions

ShiranHi commented 7 months ago

🔖 Need

While utilizing the table component, we've identified areas where enhancements can be made to elevate the user experience.

Bulk actions: Without bulk actions on tables, users may need to perform repetitive tasks individually, leading to inefficiency and frustration. It can also result in a cluttered interface if each action is displayed separately, making it harder to focus on important tasks. Additionally, users may expect the ability to perform bulk actions, so not providing them can lead to a mismatch in user expectations and functionality.
Menu for actions: Displaying many icons as actions on a table view can clutter the interface, overwhelm users with repeated actions, reduce focus on the relevant content, create inconsistency in design, lead to usability issues on smaller screens, and make scalability challenging as the number of actions grows.
Non-alternating tables: Integrating alternating row colors in a table view raises for us several concerns. While they can enhance visual appeal, they may also clutter the layout and potentially hinder accessibility for users with visual impairments. Additionally, their aesthetic alignment within the overall design could make the interface busy. Moreover, they could distract from the table's content especially if there are icons added to it, such as status colors or alerts.

🎉 Proposal

These proposals are made from discussions within our team and are informed by benchmarking against other design languages:

Bulk actions: We aim to incorporate a bulk actions feature in instances where a table view is displayed, along with displaying all filters simultaneously. This will empower users to promptly execute actions in batches
Menu for actions: Using a menu icon to gather actions on a table view offers a cleaner interface, conserves space, improves user focus, ensures consistency, optimizes for mobile, scales well, and allows for customization. In addition, it allows adding a text next to each icon to describe it and a description if needed for more information.
Non-alternating tables: Non-alternating table designs offer simplicity, consistency, and accessibility benefits. By presenting data without alternating colors, they maintain a clean and straightforward visual appearance, aiding users in focusing on content. This design approach enhances accessibility for users with visual impairments, and allows for greater flexibility in customization. Adding a hover color to table rows improves usability by providing clear visual feedback on interactive elements.

〽️ Alternatives

No response

❌ Risks

Currently, incorporating actions necessitates the creation of an additional column. However, by implementing the proposed solution, updating the table view to one featuring the actions will be essential to prevent inconsistencies.

👀 Have you spent some time to check if this RFC has been raised before?

[X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

[X] I have read the Code of Conduct

aamnatayyab6 commented 7 months ago

@ShiranHi is it possible to reference the table component implementation here? (easier to navigate through the codebase)

Rugvip commented 7 months ago

Thank you for these suggestions! Looks good imo 👍

Curious if there are any thought on this from anyone else in the community, would this be something you want to see in your own Backstage instances?

ShiranHi commented 7 months ago

@ShiranHi is it possible to reference the table component implementation here? (easier to navigate through the codebase)

Hey @aamnatayyab6 -Are you referring to this link? https://backstage.io/storybook/?path=/story/data-display-table--default-table

aamnatayyab6 commented 7 months ago

@ShiranHi thank you for the link! Has this issue been decided upon yet and do we know already who will it be assigned to?

ShiranHi commented 7 months ago

Has this issue been decided upon yet and do we know already who will it be assigned to?

We still don't know who will be assigned to it. The implementation will require assistance from the community here.

aamnatayyab6 commented 7 months ago

@ShiranHi is it possible to implement one of the three areas? If so, I would like to explore the "Menu for actions" item and be assigned to it.

ShiranHi commented 7 months ago

@aamnatayyab6 I'm fine with that, any assistance is appreciated.

github-actions[bot] commented 5 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ShiranHi commented 5 months ago

I'm here with an update: we've successfully addressed the bulk selection and alternating row features outlined in this RFC by using the Material UI table component and the Backstage theme feature. I believe it's worth revisiting how we present actions for each row, as this aspect remains open for discussion.

github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ShiranHi commented 2 months ago

@ShiranHi is it possible to implement one of the three areas? If so, I would like to explore the "Menu for actions" item and be assigned to it.

@aamnatayyab6 could you let me know if you've had the opportunity to work on this? I'm uncertain about the progress or if it has been merged

github-actions[bot] commented 1 week ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

backstage / backstage