[data grid] Is there a way to determine if a table can horizontally scroll?

[MartinTiangco]

[data grid] Is there a way to determine if a table can horizontally scroll?

[romgrk]

For v7:

const dimensions = apiRef.current.getRootDimensions()
const hasScroll = dimensions.columnsTotalWidth > dimensions.viewportOuterSize.width

Needs to run in an effect, after the dimensions have been calculated.

For v6, probably checking the .clientWidth and .offsetWidth of the virtual scroller element could work.

[michelengelen]

@MartinTiangco I am almost 100% sure that we do not have a public API for this, however you could still do a manual calculation by targeting .MuiDataGrid-virtualScroller, which is the element that restricts the view, and .MuiDataGrid-topContainer, which will overflow that container. This seems rather hack though.

@romgrk you have worked on the scrolling recently ... do you have a better idea, or maybe a method readily available for this?

[michelengelen]

@MartinTiangco would that be a sufficient solution for you?

[MartinTiangco]

Hey thanks for the solutions. I used VirtualScroller's scrollWidth and offsetWidth

Just a followup: If grid resizing is a possibility, I attached these checks in the onResize eventHandler of the grid. I wouldn't suppose there's a better alternative?

const [isGridOverflowing, setIsGridOverflowing] = useState(false);

<DataGrid
   ...
    onResize={() => {
        const { offsetWidth } = ref.current.querySelector(
          '.MuiDataGrid-virtualScroller',
        );
        const { scrollWidth } = ref.current.querySelector(
          '.MuiDataGrid-virtualScroller',
        );
        const isOverflow = scrollWidth > offsetWidth;
      
        if (isOverflow === isGridOverflowing) {
            // Do nothing as it is the same;
            return;
        }
        setIsGridOverflowing(isOverflow);
    }}
/>

[romgrk]

No, that solution seems good.

[MartinTiangco]

ok cool, thanks for the help!

[romgrk]

Sure, let us know if you need anything else.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @MartinTiangco?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.