[EuiDataGrid] Support single cell editing
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**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](https://github.com/elastic/kibana/tree/feature/lookup-join-ux) (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
Contributor guide
Assessment
This issue has not been assessed yet.