[DataGrid] Integration with react-scroll-sync & virtualization

[netouson]

Order ID or Support key 💳 (optional)

69971

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

We are using DataGridPro to display a very large table. The first column is pinned and very long showing different "strings". There are hundreds of columns to the right.
This data table is also being scroll-synced (https://github.com/okonet/react-scroll-sync) with a different element.

Is it possible to virtualize the rows and the columns and keep the first column fixed? Thank you

Your environment 🌎

System:
OS: macOS 13.5
Binaries:
Node: 18.12.1 - /usr/local/bin/node
Yarn: Not Found
npm: 8.19.2 - /usr/local/bin/npm
Browsers:
Chrome: 115.0.5790.114
Edge: Not Found
Safari: 16.6
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.8
@mui/core-downloads-tracker: 5.14.1
@mui/icons-material: ^5.14.1 => 5.14.1
@mui/material: ^5.14.1 => 5.14.1
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/system: 5.14.1
@mui/types: 7.2.4
@mui/utils: 5.14.1
@mui/x-data-grid: 6.10.0
@mui/x-data-grid-pro: ^6.10.0 => 6.10.0
@mui/x-date-pickers: ^6.10.0 => 6.10.0
@mui/x-license-pro: 6.10.0
@types/react: ^18.2.15 => 18.2.15
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.1.6 => 5.1.6

[netouson]

In order for the DataGridPro element to work with scrollsync we remove the CSS overflow, but for virtualization we need overflow: hidden, so we can't have both scrollsync and virtualization.

[MBilalShafi]

Hey @netouson, could you share a minimal reproduction of the scrollsync implementation you mentioned for us to better debug the problem. You could use codesandbox or similar tool for the purpose. This codesandbox.io template may be a good starting point. Thank you!

[netouson]

In order to use react-scroll-sync (https://github.com/okonet/react-scroll-sync) and the pinned column with DataGridPro, I had to set

  .MuiDataGrid-virtualScroller,
  .MuiDataGrid-main {
    overflow: unset !important;
  }

This causes the row & column virtualization to not work. Any suggestion on how can I achieve the above while keeping the virtualization?

[netouson]

is there any update?

[oliviertassinari]

I have updated the questions with what I understood.

I agree with #9893 (comment), without a minimal live reproduction, we can't help much.

[MBilalShafi]

@netouson Would you be able to provide a minimal reproduction example? If not possible in codesandbox, you could also share a git repo where the error is reproducible.

[netouson]

import { ScrollSync, ScrollSyncPane } from "react-scroll-sync";

return(
<div className="charts-container" >
    <ScrollSync vertical={false} horizontal={true}>
    <div className="scroll-container">
        <ScrollSyncPane>
        <div className="dates-mark-container">
            <DatesMark />
        </div>
    </ScrollSyncPane>
        <div className="charts-section"  >
        <GraphSection 1/>
        </div>
        <div className="charts-section"  >
        <GraphSection 2/>
        </div>
    </div>
    </ScrollSync>
</div>)

GraphSection has a DataGrid that the first column is pinned and has many rows and many columns.
ScrollSyncPane - requires overflow:auto on all subcomponents.
And DataGridPro virtualization also requires overflow:auto this is the main issue
We found a work around if we disable the virtualization through CSS the scrollsync works but its not virtualized which is a main requirement due to the size of the table.

[MBilalShafi]

I have set up a codesandbox with the packages installed and a basic grid react scroll sync package setup too, could you fork this and reproduce your problem for us to better debug it? Without a minimal reproduction example, we could not assist properly.
Here's the codesandbox example: https://codesandbox.io/s/datagridpro-basic-forked-plghm9?file=/src/App.tsx:1059-1075

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.