elastic / elastic/eui

[EuiDataGrid] Support single cell editing

Open
#8,830 8 comments 0 reactions 0 assignees View on GitHub
data grid design decision request
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.

Image

**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.

Image

cc @alexmarhaba

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.