Material-UI：X-Grid / DataGrid 默认 ColumnMenu 未显示

Question

I'm implementing the x-grid on my project, and the ColumnMenu is not showing when the 3dots are clicked: popup not displaying when 3-dots are clicked

Based on the documentation it appears the default behaviour of the ColumnMenu is to appear on a click event.

The event is getting fired because I was able to capture it in a console.log . It has made me wonder if the dependencies are not met for the x-grid. However I have the latest version of x-grid and very new version of the core package. Below is a snippet from my yarn.lock:

"@material-ui/x-grid@^4.0.0-alpha.20":
  version "4.0.0-alpha.20"
  dependencies:
    "@material-ui/utils" "^5.0.0-alpha.14"
    "@material-ui/x-license" "^4.0.0-alpha.20"
    prop-types "^15.7.2"
    reselect "^4.0.0"

"@material-ui/core@^4.1.1":
  version "4.11.0"
  dependencies:
    "@babel/runtime" "^7.4.4"
    "@material-ui/styles" "^4.10.0"
    "@material-ui/system" "^4.9.14"
    "@material-ui/types" "^5.1.0"
    "@material-ui/utils" "^4.10.2"
    "@types/react-transition-group" "^4.2.0"
    clsx "^1.0.4"
    hoist-non-react-statics "^3.3.2"
    popper.js "1.16.1-lts"
    prop-types "^15.7.2"
    react-is "^16.8.0"
    react-transition-group "^4.4.0"

My project is currently running react & react-dom v.16.13.1 , which mets the minimum requirement for @material-ui/core

This what my x-grid currently looks like:

         <XGrid
          rows={rows}
          columns={columns}
          rowHeight={38}
          checkboxSelection
          hideFooterSelectedRowCount
          page={page}
          pageSize={rowsPerPage}
          pagination
          paginationMode="server"
          components={{
            Toolbar: () => (
              <XGridToolbar
                title="Titles"
                rowsSelected={selectedRows.length}
                onToolbarDeleteClick={setDeleteDialogOpen}
                onToolbarEditClick={this.handleEditClick}
              />
            ),
          }}
          onSelectionModelChange={this.handleSelectedRows}
          sortingMode="server"
          sortModel={orderBy}
          onSortModelChange={this.handleHeaderClick}
          onPageChange={this.handlePageChange}
          onPageSizeChange={this.handleRowsPerPageChange}
          rowsPerPageOptions={defaultRowsPerPageOptions}
          rowCount={totalCount}
        />

I've tried manually setting the ColumnMenu in the components prop to the default GridColumnMenu but I had no luck. I've also tried removing all my modifications and trying to get it to work with the just the columns and rows props provided but that didn't work either.

Also, when I used the default Toolbar the icons would appear, however when clicked they wouldn't bring up the panel either.

Has anyone else experienced this? Is this a dependency issue?

Thanks for any help in advance. I've been searching for the answer everywhere.

Answer 1

It seems to be a duplicate of https://github.com/mui-org/material-ui-x/issues/946 . But hard to tell as not minimal live reproduction was provided.

Answer 2

Solved: The issue was that the z-index was being inherited from our component. I didn't think to look there originally, because this hasn't effect any other popover or snack bar.