Material-UI: X-Grid / DataGrid по умолчанию ColumnMenu не отображается

Я использую x-grid в своем проекте, и ColumnMenu не отображается при нажатии на 3dots: всплывающее окно не отображается при нажатии на 3 точки

Основываясь на документации, кажется, что поведение ColumnMenu по умолчанию должно появляться при событии щелчка.

Событие запускается, потому что мне удалось зафиксировать его в console.log. Это заставило меня задуматься, не соблюдаются ли зависимости для x-сетки. Однако у меня есть последняя версия x-grid и очень новая версия основного пакета. Ниже приведен фрагмент моего файла yarn.lock:

"@material-ui/[email protected]^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/[email protected]^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"

В моем проекте сейчас используются react и react-dom v.16.13.1, что соответствует минимальным требованиям для @ material-ui / core.

Вот как сейчас выглядит моя x-сетка:

         <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}
        />

Я попытался вручную установить для ColumnMenu в опоре components значение по умолчанию GridColumnMenu, но мне не повезло. Я также попытался удалить все свои модификации и попытаться заставить его работать только с предоставленными реквизитами columns и rows, но это тоже не сработало.

Кроме того, когда я использовал значение по умолчанию Toolbar, значки появлялись, однако при нажатии они также не отображали панель.

Кто-нибудь еще испытал это? Это проблема зависимости?

Спасибо за любую помощь заранее! Я везде искал ответ.

См. также:  Ошибка разбора: parserOptions.project был установлен для @ typescript-eslint / parser. Файл не соответствует конфигурации вашего проекта: .eslintrc.js
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. Alli

    Похоже, это дубликат https://github.com/mui-org/material-ui-x/issues/946. Но сказать сложно, так как не было предусмотрено минимальное живое воспроизведение.

    Это похоже, но по-другому. Я протестировал, удалив все реквизиты, кроме rows и columns, и ColumnMenu по-прежнему не работает: <XGrid rows={rows} columns={columns} /> person Alli; 25.02.2021

  2. Alli

    Решено: проблема заключалась в том, что z-index наследовался от нашего компонента. Поначалу я не думал туда заглядывать, потому что это не повлияло ни на какие другие поповеры или закусочные.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: