Showing selected columns across multiple pages of a table

[charleneyjh1]

Hello Paste team,
I'm designing a flow where users might need to select multiple columns across multiple pages in a table to define the data model. As a result, It might be hard for users to get a view of all the selected columns, since they span across multiple pages and they might lose sight.

One of my engineer has suggestion - instead of only showing X selected, turn that into a a popover that shows all the selected columns. (picture 1) Do you guys have any thoughts or feedback on this approach? is this something that was used somewhere else in the app?

If we were not going with the approach, my original idea is just to showing X selected. On the right hand side they are able to preview those data (columns selected + real values) via making an API call to the source anyway. (picture 2)

I should clarify even if we are going with the approach of using a popover to show select columns, we are also gonna include the preview feature.

any feedback is appreciated!

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

---

The idea of using a Popover to show all the selected columns is a good one and aligns with the capabilities of the Paste design system. The Popover component is designed to display supplemental information and interactive controls, which can include the list of selected columns as suggested by your engineer. This approach can help provide additional information or functionality to your UI without navigating away from the current view.

Here's an example of how you might use the Popover component from the Paste documentation:

import { Popover, PopoverContainer, PopoverButton } from '@twilio-paste/core/popover';
import { Box } from '@twilio-paste/core/box';

<PopoverContainer baseId="popover-example">
  <PopoverButton variant="primary">2 selected</PopoverButton>
  <Popover aria-label="Selected columns">
    <Box padding="space50">
      {/* Render your list of selected columns here */}
    </Box>
  </Popover>
</PopoverContainer>

You can find more information about the Popover component and how to implement it in your project here: https://paste.twilio.design/components/popover

As for your original idea of showing "X selected" and allowing users to preview the data via an API call, this is also a viable approach. However, it may not provide as immediate and accessible an overview of the selected columns as the Popover approach. If you choose to go with this method, ensure that the preview is easily accessible and provides a clear understanding of the selected data.

Unfortunately, without more context, I cannot provide specific examples of where this approach has been used in other parts of the app. However, you can check out related discussions and see if the community has shared similar use cases:

• Bulk Action - Table component usage
• Showing error previews in a table

Remember, the goal of using Paste is to maintain a seamless Twilio experience while expressing even the most unique UI needs. If you have further questions or need more detailed feedback, consider attending the weekly Design System Office Hours or posting in the related discussions for community input.

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:

• Show/Hide Columns within a Table (updated: 10/21/2022, similarity score: 87%)
• Any ideas to accomplish this using Paste? (updated: 06/15/2022, similarity score: 87%)
• Checkboxes for filtering in a view only mechanic - Answer (updated: 08/30/2022, similarity score: 86%)

[dosubot[bot]]

🤖

Hi @charleneyjh1! 🖐️

Nice to meet you. I'm Dosu, a friendly bot here to assist you with your Paste design system queries while we're waiting for a human maintainer to join us. Whether you have questions, need help with bugs, or want to become a contributor, I'm here to help. 🤖🚀

Both of your proposed solutions have their merits and could work well depending on the specific use case and user needs.

The popover approach can provide immediate feedback and context to the user, which can be beneficial if the number of selected columns is small and the data is simple. However, if the number of selected columns is large and the data in the columns is complex, using a popover might be overwhelming for the user. Here's an example of how you might implement a popover to display selected columns:

const PopoverExample = () => {
  const selectedColumns = ['Column 1', 'Column 2', 'Column 3']; // Replace with actual selected columns

  return (
    <PopoverContainer baseId="popover-example">
      <PopoverButton variant="primary">Selected Columns</PopoverButton>
      <Popover aria-label="Selected Columns">
        <Heading as="h3" variant="heading30">Selected Columns</Heading>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Text as="span">
          {selectedColumns.join(', ')}
        </Text>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Button onClick={() => {}} variant="primary">Close</Button>
      </Popover>
    </PopoverContainer>
  );
};

render(
  <PopoverExample />
)

On the other hand, your original idea of just showing the number of selected columns and allowing users to preview the data via an API call could also work well. This approach might be more suitable if the number of selected columns is large or the data is complex, as it would allow users to view the data in a more structured and detailed format.

Ultimately, the best approach would depend on your specific use case and user needs. I would recommend conducting user testing to determine which approach is more effective and intuitive for your users.

You can find more information about the Popover component in the Paste documentation.

Sources

• packages/paste-website/src/component-examples/PopoverExamples.ts

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[nkrantz]

Hey @charleneyjh1 - either approach should be okay, but it's hard to get a sense of the flow without seeing the full designs and flow. If you'd like to sign up for Office Hours, we can take a look and make suggestions. There are 2 open slots next week. Thanks!

[serifluous]

Marking this discussion as answered due to inactivity. Feel free to sign up for office hours or do a screen recording of a walkthrough of this flow, and we can continue the discussion, thanks!