Display an img when rows are empty in MUI datagrid

Question

I'm using MUI V.5 with React. And I would like to display an image in my grid, when rows are empty (when the user search for a product into the grid and can't find any result). But I don't know how to access to this part sin filas (img reference)

enter image description here

      {products ? (
        <Box component="div" style={{ width: '100%' }}>
          <DataGrid
            rows={rows}
            columns={columns}
            checkboxSelection={true}
            autoHeight
            density="comfortable"
          />
        </Box>
      ) : (
        <div>Loading</div>
      )}
    </>

Answer 1

You can define a new component and override noRowsOverlay slot of MUI datagrid like this:

const MyCustomNoRowsOverlay = () => (
  <img src="/no-items-found.jpg" alt="no-item" />
);


<DataGrid
    slots={{
        noRowsOverlay: MyCustomNoRowsOverlay
    }}

You can take a look at this StackBlitz for a live working example of this solution.