Nested data grid with switches

[ankigupta92]

Hello, I am updating an existing nested data grid in Segment to adopt the Paste design system. I have questions on some of the enhancements.

Context: User picks tables (parent) and properties (nested rows) that should be synced with their warehouses. User makes these selections by enabling the respective checkboxes for table and their nested properties. As part of technical enhancements the team is also considering replacing the current “Save” button with an auto save.

Qs 1: Can we set a fixed height for data grid? Each pagination view can have up to 10 parent rows and each parent can have up to 10 nested rows. To avoid a very long scroll, I want to use a fixed height and introduce nested scrolls within the data grid

Qs 2: I have explored 2 options for selection of parent and nested rows. I am looking for feedback on these approaches
Approach 1: Use switches for row selections. Switches imply enabling and disabling something and works well with auto save
Concern: Name (Select all) checkbox at top header is a different UI treatment than switches, possibility to replace that with a "Choose all" switch?

Approach 2: enhance the current behavior (checkboxes used for selections)
Qs: These rows will not have any contextual or bulk actions. If using checkboxes, does the data grid have to apply the “selected” variant for each row that has selected checkbox?

(Figma link)

[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 table & Bulk Actions in Data Grid (updated: 04/07/2025, similarity score: 86%)
• Nested table & Bulk Actions in Data Grid - Answer (updated: 04/07/2025, similarity score: 86%)
• Editable Datagrid, Part two (updated: 10/25/2023, similarity score: 86%)

[dosubot[bot]]

You can set a fixed height for a Paste data grid by wrapping it in a Box with maxHeight and overflowY="scroll". This approach is shown in the Paste examples and works well for containing long lists within a scrollable area. However, the Paste Data Grid does not natively support nested or collapsible rows—while you can technically nest tables, it's not recommended due to usability and accessibility concerns. Instead, consider using Side Modals or Summary Detail components to progressively reveal nested data if possible [source].

For row selection, checkboxes are the recommended control for both individual and bulk selection in data grids. Switches are intended for immediate, on/off toggles (like settings), not for selection or bulk actions. There are no examples or recommendations in Paste for using switches as a "Select all" or bulk selection control; keeping selection UI consistent (checkboxes for both individual and bulk selection) is best for accessibility and clarity [source].

When using checkboxes, you should apply the selected variant (the selected prop) to rows with checked checkboxes, even if there are no contextual or bulk actions. This is the standard pattern in Paste's DataGrid examples [source].

If you need to implement auto-save, checkboxes are still appropriate for selection, but be mindful that checkboxes are not intended for instant actions—users expect to confirm their choices (e.g., via auto-save or a save button), whereas switches are for immediate state changes [source].

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[serifluous]

Hey @ankigupta92, sorry this slipped through the cracks!

For your 1st question, you can follow what Dosubot said above, and wrap the Data Grid in a Box with maxHeight.

For your 2nd question, I'd recommend signing up for office hours so we can get a better understanding of the user goal/interaction: https://docs.google.com/spreadsheets/d/10vD91zdwr9hjgDOV3HSGnoC0LgvYw-thmn3X_kvW0xk/edit?gid=18129311#gid=18129311

[roxanagomez]

Hey @ankigupta92 I’ll go ahead and close this issue for now, but feel free to reach out again if you have any questions or still need support.