elastic
[EuiDataGrid] Support single cell editing
Problem Statement
Users currently cannot make changes to data that is displayed as a EuiDataGrid table. This limitation prevents users from correcting errors, updating information, or customizing their data directly within EuiDataGrid. As a result, users must edit their CSV files externally and re-upload them, which is inefficient and disrupts workflow. Enabling cell editing within the table will streamline the user experience by allowing quick and direct modifications.
Proposed Solutions
a) A-la-spreadsheet: you double-click the cell to edit and you press enter to save your changes.
b) You double-click the cell to enter edit mode (or click on the pencil icon shown as a hover action) and then inside the cell you get ✅ | ❌ to either save or discard your changes (same behavior as EuiInlineEdit).
Use Case
ES|QL lookup join feature.
Do alternatives or workarounds exist? / Related code or customizations
We're currently implementing solution (a) from above via a custom implementation which can be found here (feature branch). We (Analyst XP) team would like to see this available in EuiDataGrid natively so that the behavior is consistent wherever it's needed.
Additional context (Optional)
We tried implementing this by leveraging the hover actions + EuiInlineEdit but found that there was a conflict where editing the cell kept triggering the appearance of the hover actions. @darnautov & @l-suarez to provide more context.
cc @alexmarhaba
Hi @andreadelrio! Thank you for reporting this and letting us know about the PoC. Do you have a timeline in mind for this feature to become available in EUI?
Due to the complexity of the current EuiDataGrid implementation, we may not be able to prioritize this work straight away. We're exploring a large-scale refactor which - depending on priorities and product needs - might be a prerequisite to this and other data grid features being implemented.
EUI team: The editing in the PoC is done by conditionally rendering the cell as a text field; you can check the implementation here
I like this a lot. It seems like a great UX pattern that could be really impactful for Kibana.
For feature requests, the first step for us on the EUI side is trying to determine how to prioritize them. We always seem to have more Feature Requests than we can keep up with (😫), so we could use a little help gathering some additional context to help us know where and how we should fit this in.
@andreadelrio @l-suarez Can you help us answer a few questions (or point us to someone who can?):
- What's the timeline like on your side? How soon are you trying to get this to production?
- Are you dependent on us to get this to production? Or are you planning to proceed with your workaround for now?
- Do you have plans to use this elsewhere already?
- If we don't make this change to EuiDataGrid, is this something we can package up and share in Kibana another way? Like perhaps as part of UnifiedDataTable?
On the EUI side, we might want to consider how/if we do this in a lower level primitive that's not directly coupled to the EUIDataGrid. There have been a number of cases recently where folks have not been able to make EuiInlineEdit work for inline editing use cases... so we might consider how we could rework it to be more flexible and perhaps even work for this use case.
For folks looking at the POC PR, this looks like the file that makes the magic happen: value_input_control.tsx.
Two other things that would be super useful if someone can provide them (on the EUI side or your side):
- A short video/screengrab showing how this works
- A codesandbox with the workaround working directly on an EuiDataGrid, outside of Kibana. (Use the "Open in codesandbox" button from any of the examples in the EuiDataGrid docs).
And just echoing @tkajtoch's thank you -- it helps us a lot when folks submit feature requests. Even if we aren't able to prioritize it, having the awareness is super helpful ❤ .
Including the following comment from a Slack thread, which helps answer the question above. This is what we communicated to the project team:
Note: this request does not block the work [the solution team] is doing, [they] can start using it when it [is available from EUI] (might be a while).
I like this a lot. It seems like a great UX pattern that could be really impactful for Kibana.
@andreadelrio @l-suarez Can you help us answer a few questions (or point us to someone who can?):
- What's the timeline like on your side? How soon are you trying to get this to production?
A feature branch implementing the temporary solution for the requested feature is under active development.
- Are you dependent on us to get this to production? Or are you planning to proceed with your workaround for now?
No, we will proceed with a temporary solution (see above for details).
- Do you have plans to use this elsewhere already?
Yes, anywhere where we have a file uploader this feature can be relevant.
- If we don't make this change to EuiDataGrid, is this something we can package up and share in Kibana another way? Like perhaps as part of UnifiedDataTable?
I don't think we're using UnifiedDataTable but from my perspective we're open to a fix implemented in Kibana. I would like for this fix to be lead by the EUI team to ensure a) high interaction design quality and b) no a11y issues.
@JasonStoltz let me know if you need any more info.
I would like for this fix to be lead by the EUI team to ensure a) high interaction design quality and b) no a11y issues.
😎
Quick update -- We're still tracking this as a planning candidate in our backlog -- but we don't anticipate having capacity to take this on in the near term unless priorities shift.