Nested tabs in a table

[caroline-mcneill]

Is there a solution to using nested tabs in tables? Here is a screenshot and video of nested tabs in a Tracking Plan table.

In #851, I see you don't support disclosures or expandable/collapsible sections inside tables, and the tree grid has yet to be shipped. Are there recommended design patterns to handle this situation?

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

---

Here are some similar discussions:

• Nested content in a table - Answer (updated: 2023-09-13T09:19:31Z, similarity score: 0.90)
• Tabs and nested Data Grids to represent event versions within the Data Grid component (updated: 2023-10-11T17:15:12Z, similarity score: 0.88)
• Nested content in a table (updated: 2023-09-13T09:19:31Z, similarity score: 0.87)

[mschasz]

One suggestion was to remove the tabs and add a column for the row if there is event versioning enabled. When a user changes the version in the column, the contents of that row change accordingly. Any thoughts/feedback on that design?

[TheSisb]

Possible dupe of: #3539

[serifluous]

Hey @caroline-mcneill and @mschasz ! Can you sign up for an office hours session since this question has come up a few times for this product? https://docs.google.com/spreadsheets/d/10vD91zdwr9hjgDOV3HSGnoC0LgvYw-thmn3X_kvW0xk/edit#gid=800758837

[caroline-mcneill]

Hi Sarah - I signed up for Thursday Nov 2 at 8am PT, which I believe is 11am Eastern Time, where I am located. Let me know if this is incorrect. @mschasz - feel free to change this if there is a better time for you. Looking forward to it!

[nkrantz]

Thanks for signing up! See you then.

[nkrantz]

Review from today's Office Hours: we talked about basing your solution on the most common use case. If it's typical for most rows to have multiple versions, and more than 2 versions each, it probably makes more sense for you to add a column for swapping versions on each row using a Select. The column would still be present on rows with only one version, that cell just wouldn't have a Select. On the other hand, if it's less common to have multiple versions on a row, you might not want to add the extra column for the edge case of needing to show multiple versions. In that case, a good option would be to just display both versions of the row in two separate rows, without any interaction. Just be sure to label the column appropriately (make it clear that it's "version 2" of the same object as the previous row).

Keep us posted on which path you choose!

[caroline-mcneill]

Below are 3 proposed solutions for this issue.

Option 1 features a version label in the name cell.

Option 2a features a select in the name cell. While only 2-3% of tracking plans have event versioning, some of these instances may feature up to 6 versions, which would make using a select preferable to using a series of table rows as shown in Option 1.

Option 2b features a separate versioning column with a select. While adding another column takes up screen real estate and could increase cognitive load, the separate versioning column in Option 2b might require the lowest amount of design and engineering effort, so Option 2b is our preferred option.

[nkrantz]

Option 2b looks good if it's your preferred option! When it comes to building this in code, be sure that the Selects all have an associated label (read Select accessibility docs for more info).

Option 2a isn't recommended because a floating interactive element in the "Name" column isn't super intuitive.

If you do end up going with Option 1, we'd recommend putting the Badge right after the name rather than right-aligning it within the column, so it doesn't look as floaty and standalone.

In terms of the overall component here you're using for the table, our Table docs recommend opting for a Data Grid if it's going to contain interactive elements. Just something to consider. Also, neither Table nor Data Grid currently includes the row-expansion functionality that your designs utilize, so that's something you'll have to custom build. Feel free to check in once you have a better sense of your path forward to make sure any custom functionality is fully accessible.