[data grid] Removing autoHeight causes visual bugs when using overflow hidden

[willramosdev]

Related Page

React Data Grid Layout Documentation

---

Issue Type

Bug Report

---

Description

Following the instructions to remove autoHeight causes a visual bug when scrolling the UI. The issue manifests as follows:

1. Before interaction: A visual bug appears during scrolling:

   

2. After interaction: The issue resolves itself when the cursor moves or a click is performed anywhere:

   

---

Context

The issue occurs under the following conditions:

• Pinned columns are used on the right.
• The parent container has overflow: hidden applied.

Sample code to reproduce the issue:

<div
  style={{
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    overflow: 'hidden'
  }}>
  <DataGrid
    sx={gidSx}
    classes={gridClasses}
    rows={rows}
    columns={columns}
    className='rounded-none bg-white shadow-none'
    getRowId={getRowId}
    sortingOrder={['desc', 'asc']}
    pageSizeOptions={[25, 50, 100]}
    loading={isLoading}
    pagination={!isLoading}
    paginationMode='server'
    sortingMode='server'
    rowCount={rowCount}
    pinnedColumns={pinnedColumns}
    disableColumnReorder
    disableColumnSelector
    disableColumnMenu
    onRowClick={onRowClick}
    {...restProps}
  />
</div>

---

Additional Details

• Bug Trigger: Using pinned columns on the right combined with overflow: hidden in the parent container.

• Visual Demonstration:

  

---

Search Keywords

autoHeight, DataGrid, pinned columns, overflow hidden

[willramosdev]

when using autoHeight works fine