search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.32k forks source link

[data grid] Column header labels still abbreviated after Autosize Columns #15388

Open AndreasDBS opened 2 days ago

AndreasDBS commented 2 days ago

The problem in depth

We are building an enterprise web app that has lots of tables, and a table may have 20 or more columns. We want columns to be as wide as required, but not wider than that. Most importantly: column headers must always be readable, no matter if the sort order has changed and the sort icon is displayed.

Here comes the problem: take your excellent documentation as an example: docs First, you click on Autosize Columns in that example (the Include Headers option is ticked). You can see that as a result the Brand ID column is given a width which nicely fits the Brand ID label into the header, it's not too wide and not too narrow.

Now, choose to sort for the Brand ID column. The column header now displays the Sort-Arrow icon to indicate the ordering. However, that Icon overlaps the column header label, which is then abbreviated with "...". A subsequent use of the Autosize Columns button does not fix that.

We never want column header labels to be abbreviated. So, here is the question:

  1. Is it possible to disable the abbreviation of column header labels?
  2. Is it possible to somehow change the algorithm that calculates the width style attribute for column headers? We know which columns are used for ordering and could adjust the width with that information. There just need to be a way to hook into that algorithm. Is there a way for this?

Latest version tested: Mui Data Grid v7.22.2.

Your environment

`npx @mui/envinfo` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.17.0 npm: 10.8.2 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.58 @mui/core-downloads-tracker: 6.1.3 @mui/icons-material: ^6.1.3 => 6.1.3 @mui/lab: ^6.0.0-beta.11 => 6.0.0-beta.11 @mui/material: ^6.1.3 => 6.1.3 @mui/private-theming: 6.1.3 @mui/styled-engine: 6.1.3 @mui/system: 6.1.3 @mui/types: 7.2.18 @mui/utils: 6.1.3 @mui/x-charts: ^7.20.0 => 7.20.0 @mui/x-charts-vendor: 7.20.0 @mui/x-data-grid: 7.20.0 @mui/x-data-grid-pro: ^7.20.0 => 7.20.0 @mui/x-date-pickers: 7.20.0 @mui/x-date-pickers-pro: ^7.20.0 => 7.20.0 @mui/x-internals: 7.20.0 @mui/x-license: ^7.20.0 => 7.20.0 @types/react: ^18.2.14 => 18.2.15 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.0.2 => 5.1.6

Search keywords: autoresize column width Order ID: 79546

michelengelen commented 2 days ago

Hey @AndreasDBS and thanks for raising this issue here.

This is actually a bug. This part of the code indicates that the clientWidth of the sorting icon should be added to the width to prevent the described behavior: https://github.com/mui/mui-x/blob/284d0e5edd3b25ea5bb47db65e0cfc68ec1dc047/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx#L222-L223

The assumption and code looks ok, so I took a bit of time to investigate. It seems that the column headers are memoized pretty heavily and when getting the elements from the reference it is still in an old state. I tried to showcase that in this screenrecording:

https://github.com/user-attachments/assets/216dc206-c306-4dfd-99c7-ce7d934c6d24

What I do here is:

It shows that the clientWidth is 0 (should be 28) and checkVisibility returns false (should be true)

I'll add this to the board for the team to fix!

michelengelen commented 2 days ago

cc @romgrk since it might be related to virtualization ☝🏼

AndreasDBS commented 2 days ago

@michelengelen Thanks a lot to confirm that and for your quick response. I was already trying to look into that useGridColumnResize.js but am more than happy to hand this over to you. Cheers!

github-actions[bot] commented 2 days ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @AndreasDBS How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

AndreasDBS commented 2 days ago

Sorry, I just wanted to comment but pressed "Close with comment" by mistake.