Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataGrid GridOverlay doesn't work with autoHeight #3296

Closed
2 tasks done
daveteu opened this issue Nov 28, 2021 · 1 comment
Closed
2 tasks done

DataGrid GridOverlay doesn't work with autoHeight #3296

daveteu opened this issue Nov 28, 2021 · 1 comment
Labels
duplicate This issue or pull request already exists

Comments

@daveteu
Copy link

daveteu commented Nov 28, 2021

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

When using GridOverlay component, the height is 0 when autoHeight is set to true in DataGrid.

https://codesandbox.io/s/datagriddemo-material-demo-forked-yjmue?file=/demo.js

Expected behavior 🤔

Height should adjust base on NoRowsOverlay content.

Steps to reproduce 🕹

export default function DataGridDemo() {
  const NoRowsOverlay = () => {
    return (
      <GridOverlay>
        <Stack alignItems="center" justifyContent="center" spacing={2}>
          <Button sx={{ zIndex: 100 }} variant="contained">
            New Task
          </Button>
        </Stack>
      </GridOverlay>
    );
  };

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        autoHeight
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
        components={{
          NoRowsOverlay
        }}
      />
    </div>
  );
}

https://codesandbox.io/s/datagriddemo-material-demo-forked-yjmue?file=/demo.js

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`
  System:
    OS: macOS 12.0.1
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    @emotion/react: ^11.6.0 => 11.7.0 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.57 
    @mui/icons-material: ^5.0.4 => 5.2.0 
    @mui/lab: ^5.0.0-alpha.51 => 5.0.0-alpha.57 
    @mui/material: ^5.0.4 => 5.2.1 
    @mui/private-theming:  5.2.1 
    @mui/styled-engine:  5.2.0 
    @mui/styled-engine-sc: latest => 5.1.0 
    @mui/system:  5.2.1 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.1 
    @mui/x-data-grid: ^5.0.0-beta.7 => 5.0.1 
    @types/react: ^17.0.0 => 17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.0 => 5.3.3 
    typescript: ^4.1.3 => 4.5.2 

Order ID 💳 (optional)

No response

@daveteu daveteu added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 28, 2021
@flaviendelangle
Copy link
Member

Duplicates #3229, it will be fixed in the next release

@flaviendelangle flaviendelangle added duplicate This issue or pull request already exists and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants