CODEWITHSUNDEEP
reactjsmaterial-uireact-dropzonemui-x
sowizz
sowizz

Reputation: 175

How do I make Material UI Datagrid NoRowsOverlay component clickable?

I would like to override the Datagrid's NoRowsOverlay component with my custom one, which uses react-dropzone:

<GridOverlay
  {...getRootProps()}
  className={clsx(classes.zone, {
    [classes.valid]: isDragAccept,
    [classes.invalid]: isDragReject
  })}
>
  <input {...getInputProps()} />
  {isDragActive
    ? (
      <Typography variant='h6'>
        {isDragAccept ? 'Drop the file here.' : 'Invalid file type.'}
      </Typography>
      )
    : (
      <Typography variant='h6'>
        Drop CSV file here or click to upload.
      </Typography>
      )}
</GridOverlay>

I'm overriding the component like so:

<DataGrid
  autoHeight
  columns={getColumns(classes)}
  components={{
    NoRowsOverlay: DropZone
  }}
  disableColumnMenu
  disableSelectionOnClick
  hideFooter
  rows={devices}
/>

I cannot figure out why drag&drop and also clicking on dropzone does not work anymore. Replacing GridOverlay with regular div also does not work. Dropzone component works as long as rendered outside the DataGrid. Any ideas?

Upvotes: 1

Views: 4462

Answers (2)

0lukasz0
0lukasz0

Reputation: 3267

I had to add both z-index and pointer-events classes:

  <GridOverlay style={{ zIndex: 5, pointerEvents: 'all' }}>
    ...
  </GridOverlay>

Upvotes: 0

Jakub Pawlak
Jakub Pawlak

Reputation: 11

I had a similar problem recently where I placed a button in my custom overlay, but it was unclickable.

The cause of the problem for me was that the DataGrid was inside a modal, causing the button to be unclickable whenever the overlay was active. However, I fixed the issue by giving my overlay component a higher z-index.

    <GridOverlay {...getRootProps()}
          style={{ zIndex: 5}}
          //Or add it to your classes.zone styles
          className={clsx(classes.zone, {
            [classes.valid]: isDragAccept,
            [classes.invalid]: isDragReject
          })}
        >
          <input {...getInputProps()} />
          {isDragActive
            ? (
              <Typography variant='h6'>
                {isDragAccept ? 'Drop the file here.' : 'Invalid file type.'}
              </Typography>
              )
            : (
              <Typography variant='h6'>
                Drop CSV file here or click to upload.
              </Typography>
              )}
        </GridOverlay>

Upvotes: 1

Related Questions