I tried use sidebar with data table inside

[miguedev1047]

Hello, I don't know if it's my mistake or the sidebar component's error, but when I try to use the component within a its size does not adjust well, causing a horizontal scroll to appear at the bottom

2024-10-26.10-13-13.mp4

Here I attach a video with my project, I have the same problem with the horizontal scroll

<SidebarProvider> <PanelSidebar /> ... <main className='w-full'>{children}</main> </SidebarProvider>
And this is the structure that I manage

[henriquemtn]

Hi, In my case works only using overflow-hidden inside of main content className.

[beysach]

  <SidebarProvider>
    <AppSidebar />
    <SidebarInset className="overflow-hidden">
      <Header />
      <div className="flex-1 flex flex-col mx-auto p-6 w-full">{children}</div>
    </SidebarInset>
  </SidebarProvider>
);```

[Emirhanyld]

When we do this, we cannot use sticky header. I don't want to use fixed, I will use other elements on the page as sticky. Do you have a solution for this?

A little late but if someone is still looking for a solution you can use "contain-inline-size" instead of "overflow-hidden". It worked on my project.

[HIYJOKOU]

you are god, i've wasted so much time debugging this. tysm

[Cha0yue]

A little late but if someone is still looking for a solution you can use "contain-inline-size" instead of "overflow-hidden". It worked on my project.

Holy moly it works. I wonder if this is a problem with shadcn sidebar itself. Even if I tried using a table made with html tags instead of tanstack table, the problem still occurs. But everything is fixed with just one simple utility class.
That said, can't seem to find that class in tailwindcss docs.

[ethandpowers]

Actual godsend! Not gonna lie, I had to google that one.

[turnerlewis]

When we do this, we cannot use sticky header. I don't want to use fixed, I will use other elements on the page as sticky. Do you have a solution for this?

A little late but if someone is still looking for a solution you can use "contain-inline-size" instead of "overflow-hidden". It worked on my project.

Not sure if necroing is a thing but I really don't care.

Thank you so much Emirhanyld for the solution! Hours of frustration solved 😄

[FaiJai]

Try to add a overflow-x-hidden to the pink div. If you want it able to scroll vertically as well, use overflow-x-hidden overflow-y-auto