Table overflow behavior

[jalexy12]

Hey all!

Writing in because I have kind of a niche issue regarding the table (maybe not even related to the table itself...but)

I'm running into a scenario where I have:

1. A table in a side bar
2. It's unpaginated
3. It should be scrollable because of size constraints

This is simple enough typically, but I'm running into an issue where the standard 'wrap it in a box with height + overflow Y set' conflicts with the way that the browser/OS work.

What I mean by that is the default behavior on macs is to hide the scrollbar when on touchpad only, example:

As opposed to this (mouse plugged in):

The problem is, the laptop example doesn't really give an indicator that there's more content to scroll to since there's no scrollbar.

Have we seen this before? are there other options? any prior art?

[dosubot[bot]]

🤖

Hey there @jalexy12! 👋 I'm Dosu, a bot here to lend a hand with bugs, answer questions, and guide you through becoming a contributor while we await a human maintainer. I'm diving into your table overflow issue and will get back to you with some insights shortly!

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

• Adding Scroll Function to (updated: 01/26/2024, similarity score: 85%)
• Menu items don't fit the Menu in Mobile Devices (updated: 01/31/2024, similarity score: 85%)
• Sticky tabs and buttons and Scrollable table - Answer (updated: 06/23/2022, similarity score: 84%)

[dosubot[bot]]

🤖

Based on the context provided, it seems like you're dealing with a common issue related to the visibility of scrollbars on Macs. The visibility of scrollbars is controlled by the system preferences on Macs. If the user has chosen to hide scrollbars in their system preferences, the scrollbars will not be visible even with CSS styles. Unfortunately, there is no way to override this behavior with CSS or JavaScript.

However, in the Paste design system, you can make a table scrollable by using the scrollHorizontally prop on the Table component. This applies an overflow-x: auto style to the table, allowing horizontal scrolling for overflow content. Here's an example:

<Table scrollHorizontally>
  <TBody>
    <Tr verticalAlign="top" data-testid="mockTr">
      <Td>Column 1</Td>
    </Tr>
  </TBody>
</Table>

Additionally, the Table component has a noWrap prop that, when set to true, applies a white-space: nowrap style to the table, preventing the content from wrapping and potentially causing overflow. Here's an example:

<Table noWrap>
  <TBody>
    <Tr verticalAlign="top" data-testid="mockTr">
      <Td>Column 1</Td>
    </Tr>
  </TBody>
</Table>

You can find more information about these props in the Table component test cases.

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

Sources

• packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
• packages/paste-core/components/table/tests/index.spec.tsx

---

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.

[SiTaggart]

Hi @jalexy12

Something like this has come up before, but we don't have a "system" solution for it just yet.

An example in the System I can point to is in the Sidebar, where if the nav is longer than the scrolling container we display this very subtle shadow at the bottom of the scrolling div. (it's to subtle, honestly)

As you scroll away the gradient disappears as you get to the bottom of the scrolling region.

It's just a visual hint to the user that the content is scrollable and there is more content, and it doesn't rely on scroll bars being present.

It's a very custom piece of CSS that you can find here

paste/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx

Line 21 in 33116f9

// CSS magic to apply shadow on top and bottom of container when they scroll

Something like that might help you out in this situation if you are willing to play with some custom css?

[jalexy12]

Yeah! I think that makes sense. Admittedly we have some issues applying custom CSS in the app - but this definitely works.

Thanks!