Nested table & Bulk Actions in Data Grid

[kangj338]

Hi guys - Jiyeon Kang here working on Traffic Intelligence / Messaging Data. (This is my new account since my old account @dreamealist had a login issue!)
I'm currently designing the Throughput Configuration UI for Traffic Optimization in OneAdmin. We’re in need of a nested table pattern to display sub-items under group configurations.

I’ve used the Paste Data Grid component as much as possible without breaking the existing structure, but I’d love to see defined UX patterns for the following:

1. Nested rows
2. Bulk actions -> I understand this is already on the Paste backlog, but we’ll need it for the next feature design as well.
   Please see the attached photo.

Reference: https://www.ag-grid.com/example-inventory/

Overall, the Data Grid/Table would benefit from more advanced and robust interaction patterns to support the complex data we need to present to customers.

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

---

Sorry, I don't know how to help with that.

I did do a search though, 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:

• Nested tabs in a table (updated: 11/16/2023, similarity score: 86%)
• Feedback on Tree Grid in Data Grid (updated: 12/26/2023, similarity score: 86%)
• More guidance on bulk selecting in Tables / Data Grid, and how that interacts with filters and pagination. (updated: 10/27/2022, similarity score: 86%)

[kangj338]

cc @roxanagomez

[roxanagomez]

Thank you so much for coming to office hours @kangj338 you can find the recording for the session in our slack channel #help-design-system a summary of what was discussed:

It’s technically possible to nest tables using the current Data Grid, but we don’t recommend it due to usability and accessibility concerns. One of our engineers built a rough sandbox version, it works, but requires custom styling and lacks full accessibility (e.g., arrow key navigation inside the nested table isn’t supported).

Our recommendation is to explore different ways to have this flow like using Side Modals or Summary Detail to display the information progressively to users without risking accessibility.