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

Pinned Columns and Column Grouping Combination Causes Styling Issues #8664

Closed
2 tasks done
kelvinsanchez15 opened this issue Apr 18, 2023 · 1 comment
Closed
2 tasks done
Labels
component: data grid This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists plan: Pro Impact at least one Pro user

Comments

@kelvinsanchez15
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/nice-mendeleev-bnq08u?file=/demo.tsx:842-856

Steps:

  1. Use pinned columns feature
  2. Add Column grouping
  3. Styling issue occurs

Current behavior 😯

Screenshot

image

Expected behavior 🤔

It should look closer to the attached screenshot but with a working Column grouping.

Screenshot

image

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo
  Browser: Chrome

  Output from `npx @mui/envinfo` goes here.
   System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.1/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.126 
    @mui/core-downloads-tracker:  5.12.1 
    @mui/icons-material: ^5.11.16 => 5.11.16 
    @mui/material: ^5.12.1 => 5.12.1 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system: ^5.12.1 => 5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @mui/x-data-grid:  6.2.0 
    @mui/x-data-grid-pro: ^6.2.0 => 6.2.0 
    @mui/x-date-pickers:  6.2.0 
    @mui/x-date-pickers-pro: ^6.2.0 => 6.2.0 
    @mui/x-license-pro:  6.0.4 
    @types/react: ^18.0.37 => 18.0.37 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^5.0.4 => 5.0.4 

Order ID or Support key 💳 (optional)

64675

@kelvinsanchez15 kelvinsanchez15 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 18, 2023
@zannager zannager added component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user labels Apr 19, 2023
@MBilalShafi MBilalShafi 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 Apr 19, 2023
@MBilalShafi
Copy link
Member

Unfortunately, as of now, column pinning and column grouping don't perform great together. The good news is, the issue is already known and is in our backlog.
Here's the link to the original issue: #7041
Please feel free to continue the discussion or upvote the issue to move it up the prioritization order.

I am closing this one to avoid duplication.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists plan: Pro Impact at least one Pro user
Projects
None yet
Development

No branches or pull requests

3 participants