material-uidatagridmui-datatablemui-x-data-grid

The filtering screen in mui datagrid is broken

enter image description here

enter image description here

<DataGridPremium 
      initialState={{
        columns: {
          columnVisibilityModel: {
            actions: false,
          },
        },
      }}
  rows={productList}
  columns={columns}
  pageSize={10}
  autoHeight
  disableRowSelectionOnClick="true"
  localeText={customizeDataGrid()}
  slots={{
    toolbar: () => (
      <GridToolbar
      showQuickFilter
        csvOptions={{
          fileName: 'Ürün Listesi',
          delimiter: ';',
          utf8WithBom:true,
        }}
        printOptions={{
          disableToolbarButton: true,
        }}
        excelOptions={{
          fileName: "Ürün listesi",
          includeHeaders: true,
        }}
      />
    )
  }}
  
/>

As you scroll the table with the scroll bar in Mui DataGrid, the filtering screen in the table becomes distorted. I tried to do it via mui datagrid-root but it didn't work.

Solution

  • problem solved. It happens because of the styles on the screen.