[EuiDataGrid] Make column width editable / removable with keyboard

[kertal]

With the introduction of the column header menu #3087

This could be used to provide a way to edit the column's width, which is currently just possible by mouse. Currently the user can't reset this value once set. So an action like `Change width' would be useful.

[snide]

We could possibly handle this by making the resize handle focusable similar to EuiResizableContainer https://elastic.github.io/eui/#/layout/resizable-container

[kertal]

How could you reset the size then, just thinking about the use case, I've assigned several widths to several columns, then I want to reset the size to auto for a selected one?

[myasonik]

++ to adding width controls to this menu. I quite like the flow in Google Sheets: menu item something like "change width" opens a small modal which has an input for the pixel width and a button for "return to default". (At least, this used to be the flow, haven't checked recently.)

Adding the handle to the focus order would be a really tricky problem because grid has such specific focus handling.

[kertal]

we just talked about this, and there was not enough time, so pinging @timroes @cchaos @chandlerprall @andreadelrio

[snide]

@myasonik that works fine too.

[cchaos]

We talked briefly about what "Auto" actually means. To the user I'd expect something similar to Google sheets whose option is "Fit to data". But EuiDataGrid's "auto" actually just divides the container's width by the number of columns. It is completely data-agnostic. So I see it as a question of what can EuiDataGrid support without knowledge of the contents and what is the expected behavior by the user?

[myasonik]

We could even omit this functionality all together. Just having a input field in a modal is already beneficial as it makes changing column widths accessible to both screen reader and keyboard users.

So if we're unsure about what other functionality we want, I'd advocate for shipping at least just that.

---

That all said, I think in an ideal world, there are 5 actions I can think of that would be nice to have in this modal:

• input field to change the px value width
• button which sets this field to a default fraction width (total width/number of columns)
• same as above but to all fields
• button which sets this column to content width (which I think we should be able to calculate because this modal renders after the grid is already rendered)
• same as above but to all fields

Having all of that might be overkill (and I haven't actually validated if we can calculate content width in this, though I've done it at other times) but I thought I'd just list out everything I had in mind.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[kertal]

Yes, I think we should do this, maybe as a simple first step adding a item Remove column width to the column actions, this would already help

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[kertal]

pls don't close, this would still be useful .. cu in 180 days 😄

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

[kertal]

still think this should be done, WDYT, @constancecchen

[cee-chen]

Haha for context @chandlerprall mostly sets the priority on Data Grid features/requests, I just execute them 🪓 That said Michail's suggested comments (numeric input within a modal for a static px width) sounds very reasonable as a bare minimum, and should be fairly straightforward to do. Any thoughts Chandler?

Also want to add, our priorities are shifting to the great CSS-in-JS migration soon so datagrid might be going on the backburner for a bit while that gets done.

[kertal]

Thx Constance. I'm aware this has no big priority, just wanted to prevent it's forgotten :)
🪓 😱 oh dear, hope I'll never get on chandlers priority list, will offer him more sweets in our biweekly EUI chats

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.

[JasonStoltz]

@cee-chen We sized this as Large. Do you think that esimate still stands?

[cee-chen]

Yes, still a large