When I hover table cell popup shows but Z-index doesnt work

[emreertoprak]

##Problem

When I hover table cell popup shows but Z-index doesnt work.

I gave 99999 z index to cell it shows on dev tools but as you can see below popup doesnt go up over row.

Expected behavior

I want the popup to indexed at top

these are my codes

 <DataTableBox
      noHeader={true}
      fixedHeader={true}
      striped={true}
      pagination={true}
      paginationPerPage={50}
      paginationRowsPerPageOptions={[10, 15, 20, 25, 30, 50]}
      paginationServer={true}
      responsive={true}
      sortServer={true}
      noDataComponent={
        <Box sx={{ height: 512 }}>
          <NoRecordFound />
        </Box>
      }
      customStyles={{
        tableWrapper: {
          style: {},
        },
        table: {
          style: {
            maxHeight: "calc(100vh - 80px - 70px)",
            overflowY: "inherit",
            minHeight: "400px",
            zIndex: 1,
          },
        },
        headRow: {
          style: {
            minHeight: 32,
            ...rowBorderBottom,
          },
        },
        headCells: {
          style: {
            fontWeight: "bold",
            paddingRight: 0,
          },
        },
        cells: {
          style: {
            minHeight: 32,
            paddingRight: 0,
            ...cellsStyle,
          },
        },
        rows: {
          style: {
            zIndex: 99999,
            minHeight: 132,
            borderBottomStyle: "solid",
            borderBottomColor: "rgba(0,0,0,.12)",
            borderBottomWidth: 1,
            ...rowStyle,
            ...rowBorderBottom,
            ":not(:last-of-type)": { ...rowBorderBottom },
          },
        },
        pagination: {
          style: {
            borderTop: "none",
          },
        },
      }}
      progressComponent={
        <LoadingPlaceholder
          isLoading={true}
          style={{ height: 512 }}
          message={progressComponentMessage}
        />
      }
      {...otherProps}
    />
  );
`};`

[NayeerBM]

Hi. I'm having the same issue. Where I had to place a dropdown inside the table and it gets hidden due to the height of the table. Did you manage to solve the issue?

[safaksonmez]

It is not about z-index you need to give position fixed to your popup element.

[Fir-3]

i had the same issue. no answers yet. https://github.com/jbetancur/react-data-table-component/issues/926#issuecomment-952797703

[to-fuu]

It is not about z-index you need to give position fixed to your popup element.

If the table is scrollable, fixed position will cause the drop-down to go down

[nicomfe]

any news about this?

found that the issue is related to these lines: https://github.com/jbetancur/react-data-table-component/blob/a881779693a484fed221f67e618e2946f1d104f2/src/DataTable/ResponsiveWrapper.tsx#L23 https://github.com/jbetancur/react-data-table-component/blob/a881779693a484fed221f67e618e2946f1d104f2/src/DataTable/ResponsiveWrapper.tsx#L20

both overflow-x and overflow-y should be visible in order to not hide the dropdowns, popups or whatever you open up in the cell.