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.
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.