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

[data grid] Autosize flex column #15232

Open
A-Degtyarev opened this issue Nov 2, 2024 · 7 comments · May be fixed by #15465
Open

[data grid] Autosize flex column #15232

A-Degtyarev opened this issue Nov 2, 2024 · 7 comments · May be fixed by #15465
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column resize support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@A-Degtyarev
Copy link

A-Degtyarev commented Nov 2, 2024

The problem in depth

Hi. I need to combine two behaviors:

  1. after a first load, all columns must be fit on page, without scrollbar. It might be done with flex: 1 property.
  2. After "Autosize columns" button was pushed, columns must be arranged like i used apiRef.current.autosizeColumns
    The main problem is impossibility of using flex and autosizeColumns: see example
    Is there a way to combine two views: fit to screen (with rather large amount of columns), and autosize by content?

Your environment

`npx @mui/envinfo`
  System:
    OS: macOS 13.1
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.92
    Edge: Not Found
    Safari: 16.2
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4 
    @emotion/styled: 11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.19 
    @mui/icons-material: 5.15.19 => 5.15.19 
    @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: 5.15.19 => 5.15.19 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-data-grid:  6.20.1 
    @mui/x-data-grid-premium: 6.20.1 => 6.20.1 
    @mui/x-data-grid-pro:  6.20.1 
    @mui/x-date-pickers: 7.5.1 => 7.5.1 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view: 7.7.0 => 7.7.0 
    @types/react: 18.2.37 => 18.2.37 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: 5.4.5 => 5.4.5 

Search keywords: flex autosize width
Order ID: 94701

@A-Degtyarev A-Degtyarev added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Nov 2, 2024
@github-actions github-actions bot added component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ labels Nov 2, 2024
@oliviertassinari oliviertassinari changed the title Autosize flex column [data grid] Autosize flex column Nov 3, 2024
@michelengelen
Copy link
Member

Which use case are ou trying to solve with this? There is a limit to how small you can make a column, so after a certain threshold this wouldn't make any sense anymore and become borderline usable (see screenshot):

Screenshot 2024-11-04 at 14 55 55

It would honestly make more sense to define a default width, or simply run the autosizing on mount

@michelengelen michelengelen added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 4, 2024
@A-Degtyarev
Copy link
Author

@michelengelen. i'm trying resolve next:
At first load, all table columns must be fit in screen width, like on the image below. It doesn't matter, what is inside the row.
image
When i press "Autosize columns", every column width arranges, as so content of column become fully visible, with horizontal scroll bar.
image

I think, it might be solved with new one property of GridAutosizeOptions, includeContent: false (default true)
But now, i'm trying resolve it with existing methods.

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Nov 5, 2024
@michelengelen
Copy link
Member

@A-Degtyarev I got what you are trying to do ... I just feel that it does not make that much sense, that's why I was asking what exact problem you are trying to solve here. Or to put it more specific: Why do the columns need to fit in the width of the data grid on first render?

@michelengelen michelengelen added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 5, 2024
@A-Degtyarev
Copy link
Author

@michelengelen , I solved my task with ref, state and setting up flex:0 in new State: look at my example in the 1st post.
But i think, that this solution is not pretty.

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Nov 5, 2024
@michelengelen
Copy link
Member

It's still not making any sense to me why you have to do that, but ok.
I am almost certain that this is not possible with the given methods of the grid atm, but let's ask the team: @mui/xgrid thoughts?

@cherniavskii
Copy link
Member

I don't think column autosizing not working with flex columns was intentional.
It should rather behave like regular resizing – once the column's dimension is changed, the flex for this column is ignored.

@romgrk any objections to making autosizing work with flex columns?

@romgrk
Copy link
Contributor

romgrk commented Nov 14, 2024

No objection.

@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 14, 2024
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column resize support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/
Projects
Status: 🆕 Needs refinement
Development

Successfully merging a pull request may close this issue.

4 participants