Righthand side action menu as an option in Data Grid?

[ceyerkes]

Hi!

Wondering if it would be possible to add an option in the Table and Data Grid components for an actions column on the righthand side (if this doesn't exist already and I just can't find it):

I have no idea how complicated this would be to add to these components, so if it makes more sense to just continue to create this column myself each time, that's totally fine too, just wanted to check!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi!

For adding an actions column on the righthand side of the Table and Data Grid components, there isn't a built-in option specifically designed for this purpose in the Paste design system. However, you can certainly create this column yourself, as you've been doing.

For the Table component, while general guidance suggests using it for static, tabular data without actionable content, it's acknowledged that no one will stop you from adding actions in a static table. It's just not considered the best UX. Once the Data Grid component is available, it's recommended to plan an update to it for a better interaction model, especially for keyboard users. Here's a proof of concept showing how actions might be integrated: proof of concept.

For the Data Grid, which is more suited for actionable elements, there's no explicit mention of a built-in actions column feature. However, considering the flexibility of the Data Grid, you can implement an actions column by manually adding the necessary elements (like buttons or links) within the grid cells. This approach allows for the inclusion of actionable components within the data grid rows, catering to complex interaction patterns.

Remember, when implementing an actions column, especially in data-dense interfaces like tables or data grids, consider accessibility and usability. For instance, ensuring that keyboard users can navigate efficiently through the actions without having to tab through every single action in every row.

For more detailed guidance and examples on implementing custom solutions within the Paste design system, you might find it helpful to explore the documentation and resources available at:

• Data Grid documentation
• Table documentation

If you decide to implement an actions column, you'll be customizing the components to fit your specific needs, leveraging the flexibility of the Paste design system.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Rearrangeable Columns in Tables - Answer (updated: 08/30/2022, similarity score: 87%)
• Can I add actionable components in a table row? - Answer (updated: 01/24/2023, similarity score: 86%)
• Table element: configurable columns? - Answer (updated: 02/02/2023, similarity score: 86%)

[ceyerkes]

Also wondering if we could add a disabled state option for the action icons? We're considering a bulk action pattern that would require individual actions at the row level to be disabled when multiple rows are selected.

[roxanagomez]

Hi @ceyerkes thank you for sharing! Paste bot pretty much got it right, to summarize:

1. For interactive, tabular data like this, we suggest going with the Data Grid, there's a similar example you can check out here, Be sure to include a column header labeled "Actions" or something similar. ** You can technically add actions to a Table, but it could risk the user experience, especially for keyboard navigation.

Could you please create a dependency for including a prebuilt option for this in our Figma component?

2. For the action icons, it's fine to disable them during bulk selection. Since we don't have this interaction built in your team will have to implement it locally. I'd be interested to see how you're planning this interaction, as we may want to formalize guidance on this pattern in our docs.

[ceyerkes]

Hi!

1. Yes - I didn't mean to include Tables as part of this discussion, just Data Grids!
2. I'll create a dependency, but I'll wait until we finalize the Bulk Actions pattern contribution, since this might become an integral part of the pattern.

Thanks!

[roxanagomez]

Ahh yes! sorry I forgot you were already working on that contribution, that's awesome, please let us know if we can help on any way

[ceyerkes]

I signed us up for office hours in a couple weeks, so we can discuss more then - thanks roxana!!