Fixed columns and sticky headers ads two scrollbars

[pratik-nagpure]

When I use fixedColumns: { left: 1 }, headerStyle: { position: "sticky", top: 0 }, two scrollbar gets added. need help to fix this.

Here is the sandbox link for the same

• CodeSandbox

Thanks

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[rOY369]

Hi @pratik-nagpure any chance you were able to work around this problem?

I am facing exactly this issue.

[rOY369]

@Domino987 can you look at this once if there is a workaround for this or any fix planned for this issue?

[Domino987]

I will take a look

[rOY369]

@Domino987 for now I was able to work around this issue by adding cell style in the first column which I want as fixed. Not using the fixedColumns prop since it is adding two scrollbars.

        "cellStyle": {
            "backgroundColor": "black",
            "position": "sticky",
            "left": 0,
            "zIndex": 1
        }

Adding this in the first column is making it fixed and working fine.

[robincsamuel]

@Domino987 Could you please reopen this issue?

[Domino987]

@robincsamuel can you check out the lastest version?

[robincsamuel]

Okay, I just updated and the double scrollbar issue is gone. However, the table is still messed up.

While the header is sticky for fixed columns, it doesn't work for others. Also, the scroll is weird.

Here's the configuration,

options={{
        headerStyle: {
          position: 'sticky',
          backgroundColor: theme.palette.grey['50'],
        },
        maxBodyHeight: 'calc(100vh - 350px)',
        fixedColumns: {
          left: 1,
          right: 1,
        },
}}

Thanks!

[Domino987]

Can you create a sandbox with your exact setup and the latest version?

[robincsamuel]

Can you create a sandbox with your exact setup and the latest version?

Sure, here's the sandbox, https://codesandbox.io/p/sandbox/laughing-grass-dvmwfh. Please scroll down to the table to see the issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[robincsamuel]

Can you create a sandbox with your exact setup and the latest version?

Sure, here's the sandbox, https://codesandbox.io/p/sandbox/laughing-grass-dvmwfh. Please scroll down to the table to see the issue.

@Domino987 Did you get a chance to check the sandbox?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.