Tabs and nested Data Grids to represent event versions within the Data Grid component

[mschasz]

Hi team,

We currently have the following design in Evergreen that allows a user to switch version tabs within a table. As we migrate it to Paste we have the following questions:

Are there any recommended workarounds to implement these tabs with Data Grid? The first thought that comes to mind is to use tabs in the first row and a nested Data Grid in the second row.

Is this something that can be added to the Data Grid component?

Is this pattern recommended and if not are there any recommendations as to how we should represent different versions of table data in a Data Grid?

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

---

Hello!

Based on the Paste documentation, it's possible to use Tabs in combination with a Data Grid to represent different versions of table data. You can use the Tab component to switch between different versions of your data, and the DataGrid component to display the data itself.

Here's a basic example of how you might structure this:

import {Tabs, TabList, Tab, TabPanels, TabPanel} from '@twilio-paste/core/tabs';
import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell} from '@twilio-paste/core/data-grid';

<Tabs>
  <TabList>
    <Tab>Version 1</Tab>
    <Tab>Version 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <DataGrid>
        {/* Your Version 1 Data Grid goes here */}
      </DataGrid>
    </TabPanel>
    <TabPanel>
      <DataGrid>
        {/* Your Version 2 Data Grid goes here */}
      </DataGrid>
    </TabPanel>
  </TabPanels>
</Tabs>

In this example, each Tab represents a different version of your data. When a Tab is selected, the corresponding TabPanel is displayed, which contains a DataGrid with the relevant data.

Remember, the content in each Tab should be a different view of the same type of data. If the data in each version is drastically different, you might want to consider a different approach.

As for nested grids, the Paste documentation does mention that a Grid can be nested inside another Grid. However, it doesn't explicitly mention nesting a Data Grid within another Data Grid. If you're considering this approach, I would recommend testing thoroughly to ensure it meets your needs and provides a good user experience.

I hope this helps! Let me know if you have any other questions.

---

Here are some similar discussions:

• When to use Tables vs Data Grid - Answer (updated: 2022-10-24T23:24:16Z, similarity score: 0.85)
• In page nav and tabs visual representation (updated: 2023-08-02T17:26:16Z, similarity score: 0.85)
• Clickable Rows in Data Grids (updated: 2022-10-28T16:49:30Z, similarity score: 0.84)

[serifluous]

Hey @mschasz ! Can you discuss moving forward with this with Caroline?

I just chatted with Kelly + @ceyerkes, and this is a case where this existing element in Segment should be restyled to look like Paste in the interim, until there's more designer capacity to rework this experience.

As far as I know, it's not an Evergreen component, but let me know if that's not true.

This isn't functionality we necessarily want to build into the Paste Data Grid component because it'll overload Data Grid with another navigation/hierarchy layer. To migrate this to Paste in the long-term, you'll want to work with Caroline or a Protocols designer since it's not going to be a 1:1 component swap.

[mschasz]

@serifluous sounds good! Does that mean we should pursue something along the lines of what the Paste bot responded?

[serifluous]

Overall, I'm not super confident that the existing layout's the best experience to begin with, so definitely rely more on Caroline and the other Segment designers to work through this.

But if you absolutely need a workaround in Paste, you can use Paste bot's example—it just can't then be nested inside another Data Grid.