8/15 Office Hours: Button vs Anchor in a Datagrid/Table / Nested Info in Datagrids/Tables / Sticky Headers / Etc.

[ceyerkes]

Hi!

I figured I'd compile the 3+ main things I want to discuss in OH into one discussion, but let me know if I should break them out.

Button vs Anchor: What is the preferred component in a table or datagrid for opening a side modal? According to the docs, I'm leaning anchor but wanted to doublecheck, since I've also seen buttons used in Segment tables.

Nested Tables: The delivery overview page uses buttons within a table to initiate a nested/detailed view of data in a table - I want to make sure the way we're currently approaching it is Paste-approved, and also want to chat a little more about how to tackle other similar tables (maybe implement the 2b solution more widely?).

Sticky headers. We have a situation in delivery overview where the date picker at the top impacts all data on the page, but when you get to the destination table at the bottom, it's not clear what the selected date range is. We discussed a dynamic column header, but feels worth also exploring a sticky header, if this is a use case elsewhere.

Copy & paste component - is this the recommended way to create a copy and paste input? I've gotten feedback that it feels heavy, so I'm wondering if there are other options:

Thank you!!

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

---

Hi!

For your questions based on the provided context from the Paste documentation:

Button vs Anchor: In a table or datagrid for opening a side modal, the documentation does not explicitly state a preference between using a Button or an Anchor. However, considering the general guidance, an Anchor is used for navigation, and a Button is used for actions. If opening a side modal is considered an action within the application (which it typically is), a Button might be more semantically correct. That said, the use of an Anchor was mentioned for file downloads, which is a specific case. Without explicit guidance in your context, if the action does not navigate the user to a different page or download a file, a Button could be more appropriate for opening modals.

Nested Tables: The documentation does not provide specific guidance on nested tables or the implementation of detailed views within a table. The general recommendation against having actions inside of tables (like anchors, buttons, etc.) due to accessibility concerns suggests that if you're implementing a nested/detailed view, you should ensure it's accessible. This might involve using the Data Grid component for more complex interactions, as suggested in the Bulk Action section, but there's no explicit mention of nested tables or solution 2b.

Sticky headers: The documentation does not mention sticky headers in the context provided. Sticky headers can be a useful UX pattern for keeping relevant information in view as a user scrolls through a long page or table, but without specific guidance from the Paste documentation, it's unclear if there's a recommended way to implement them within the Paste design system.

Copy & paste component: There is no mention of a specific "copy & paste component" in the provided documentation excerpts. For implementing a copy and paste functionality, it seems you might need to use a combination of Paste components creatively (like a Button next to an Input or Textarea) since a dedicated component for this purpose is not mentioned. Feedback about it feeling "heavy" could be due to the implementation details, which are not covered in the provided documentation.

For more detailed or specific guidance on these topics, checking the latest Paste documentation or reaching out to the Paste team directly might provide the most up-to-date recommendations.

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:

• Table - data truncation of long unique ids, component for number of rows, pagination - Answer (updated: 02/06/2023, similarity score: 89%)
• Bulk Action - Table component usage - Answer (updated: 06/22/2022, similarity score: 88%)
• When to use Tables vs Data Grid (updated: 10/24/2022, similarity score: 88%)

[serifluous]

Hey @ceyerkes !

Button vs Anchor: PasteBot is correct.

Nested tables: Let's chat during office hours!

Sticky headers: Dynamic header/text was also my first thought. Off the top of my head, I can't think of other sticky headers (outside of wizard flows and on tables). But it's definitely doable, and my only caution would be make sure there's enough vertical scrolling space when that header's stacked with the Topbar.

Copy & paste: We don't have a standard pattern for this. Work on it was put on hold a while back, but here are the examples we collected of how other features are doing it: https://www.figma.com/design/S4z0Kqjb9AYosnkRQldLte/Paste-Patterns-%26-Templates?node-id=402-27429&t=ZH141rXkdZdFSy4q-4 The nice thing about a read-only Input is that it provides a little more keyboard interaction to grab the text, but if it's calling too much attention to itself, then plain text + a copy Button is totally reasonable too.

[krisantrobus]

Hey @ceyerkes - just wanted to share the office hours recording with you in case you'd like to revisit any of our conversations. Here's the video. Thanks again for coming to office hours!