Editable DataGrid component #9097
Replies: 4 comments
-
|
Hi @l-suarez! Thank you for bringing this to our attention! Is this coming from any upcoming initiative you're aware of or is currently just a discussion to explore the topic? I can totally see the enormous benefits of editable data grids and how widely they could be used. I love that you bring some ideas already, and I'd like to see more, possibly from other areas of the product. Let's keep thinking about this, gather people who would be interested in this and sync sometime soon! From the technical point of view, this could be pretty complex to pull off. I know Discover created something like this, but having a global solution considering the current architecture of EuiDataGrid would become a large project. I'm looking forward to exploring this idea more anyway! |
Beta Was this translation helpful? Give feedback.
-
|
In Streams > Schema we were exploring the option of editing, potentially creating entries too. Happy to discuss more when needed. |
Beta Was this translation helpful? Give feedback.
-
|
Just linking this request from @andreadelrio with this discussion: [EuiDataGrid] Support single cell editing #8830 |
Beta Was this translation helpful? Give feedback.
-
|
Hey @l-suarez - this looks really interesting, and I’m very happy we’re considering updating this component and potentially making it consistent across all solutions. From my side, I don’t think we currently have a strong use case for editing the grid on the flyout at the moment. That said - this feature might inspire use cases in the future - I will present this idea to the team and come back with more feedback. As for the data grid itself, the team has struggled in the past with cell actions - since we use tables and data grids, those actions tend to be more complicated than they should be. I’ve noticed quite a few different implementations across Obs and Sec, so it would be great to unify them. Another thing that came to mind is horizontal scrolling - it’s something we could define and include in the improved data grid as well. Both topics are unrelated to the core feature you’re exploring here, but if we move forward with enhancements to the data grid, it would be great to make it more versatile overall. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey team
We’d like to start a discussion about improving the inline editing interaction for the EUI DataGrid component.
In Discover, we’ve built a custom solution to support editing lookup indices directly in the table, and we see potential for this type of interaction in other contexts as well. Before moving toward any implementation, we’d like to collaborate with both design and engineering to explore what a cohesive inline editing experience could look like in elastic, and to understand the technical constraints or opportunities within the DataGrid.
What’s the best way to kick this off? Would it make sense to share some early design explorations here, or schedule a short sync to align on both the interaction and technical aspects?
Thanks! 🙌
Explorations
Idea 1
Starting from an empty state point: show a few placeholders so the user can start adding content right away. The add column action is the last column of the table. It doesn't have to be sticky, when there's horizontal scroll, the last column will be the action to add more.
For adding rows, we can have the action on hover when the users is over the rows, Notion style:
When the table is populated, the add row button adds a new row right below, if the table has some sorting, we remove it before adding the new row so we avoid the jumping situation when they finish adding data in that row.
Idea 2
In this exploration, buttons for adding columns or rows have a more prominent treatment using the primary default variant. For the add column, same idea as in example 1. For add row, the button is outside the datagrid component and always visible.
When pressing add row, we can add a row at the end of the table if there's no pagination.
When there's pagination we can show a popover with the values to enter in the row. It will be on top of the datagrid, appearing from the bottom of the table.
Beta Was this translation helpful? Give feedback.
All reactions