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

[MartinTiangco]

Summary

Hey, is there a way (from the API?) to determine if a horizontal scrollbar is in the table (ie if there are columns that can't fit in the table and must be scrolled to).

I've searched through the issues and the doc and found nothing related to this. It would be a great convenience to have this.

Examples

No response

Motivation

The motivation is this interaction: https://www.behance.net/gallery/90059503/Complex-data-tables-on-mobile

If the user can horizontally scroll, then it would be good to have a pinned column (like shown in the attached link) that expands/shows all the columns of a row item in the detail view.

If all the table's columns can fit without horizontally scrolling, then there wouldn't be a need to have the expand pinned column.

Search keywords: horizontal scrollbar, scroll

[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?

[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 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.