Should the wrapping div on the Table component exist?

[tjcouch-sil]

Hello shadcn/ui friends!

The bug reporting page said to open a discussion if I wasn't sure what I was reporting was a bug, so here we are:

If you create a Table and add className to it, className only applies to a table element inside the Table component, which has a div above it that you can't style. This caused a problem for me when I was trying to use Table in a flex box and set some flex properties on the table. I needed the properties to apply to the highest element in the table, but className on Table applies to the table inside the div.

Someone else already reported this as an issue a year and a half ago, but it got closed from inactivity because the author stopped responding: #391

Any thoughts on whether removing the div would be a positive or negative? I believe they are both block-level boxes, so I expect this change wouldn't have any layout differences. Of course, I can change my personal code, but this seems more like a divergence from the general design of shadcn/ui components than just a personal thing. I can file a bug if this does appear to be a problem to solve.

Thanks!

[BrendanC23]

Here are some related PRs:

1. fix(table): horizontal scroll on Chrome #1289
2. Remove: div wrapper from table #396

Here's the rationale for the wrapper:

So the reason we add this is to make the table scrollable on mobile.

One option would be to keep the wrapper div and add a new tableWrapperClassName prop. This would allow you to style the wrapper independently of the table.

[aryomuzakki]

It's troubling me to make the table header sticky, I need to add styling to the div wrapping the table. The better way should be to allow costumization like what you suggested, or using a boolean prop to remove the wrapper div so we can manually add the wrapper.