Excel-like editing interaction with DataGrid

[jalexy12]

Hey everyone. I'm trying to rewrite a piece of the evergreen library (our tracking plan interface) with Paste.

One question I have is related to interactions with editable cells.

Currently, tracking plans have multiple cells which are editable. The interaction to edit a cell is typically something like:

1. Tab or click onto a cell
2. Double click to edit cell
3. Enter, tab, or click moves focus to next cell and ends edit state

I'm noticing in the 'editable' state examples for DataGrid that the cells are static, ie they always have the input included in the cell itself.

Is there guidance on how to handle the use case where I don't want to display all of the inputs for all cells, and have an interaction like the existing evergreen component where there are two states, editing/not editing? Is this something Paste is looking to or has implemented or is that on the user? The main problem here IMO is that displaying dozens of inputs all in one go could be an overwhelming and strange experience for users. All cells displayed in the screenshots would have some sort of form input component.

[SiTaggart]

Hi @jalexy12

The short answer is that we don't have an opinion yet on exactly how editable data grid should work, which is why it's not documented. The example you reference is just us showing you what composition might look like in data cells, it is not exhaustive. You can kind of do what ever you want.

The reason we don't have an opinion, and it's not documented, is that there wasn't really any example of needing this specific interaction across Twilio at the time. It's cool that we now get to see Segment interaction patterns, it's just not something we've needed to think about.

It's a shame that the Editable Cell in evergreen isn't super well documented or surfaced, otherwise we would have caught it way back at the end of last year in the gap analysis.

Regardless of not having a strong formed opinion on how we would do it, I do have opinions on how not to do it, especially when it comes to accessibility. What you shouldn't do, is reimplement what Segment currently does as it's not accessible. I would take great influence from some stuff I worked on at Salesforce around editable cells, which is very accessible, which can be found here https://www.lightningdesignsystem.com/components/data-tables/#Cell-Edit

Essentially, there must be a focusable trigger inside the cell to enter edit mode. For SLDS it was a pencil button, which launched a popover where you can edit the cell value in an input. You can do some sort of variation on that, the contents of the data grid cell is entirely up to you.

Hope that helps

[jalexy12]

Thanks @SiTaggart, I would definitely agree on those implementation suggestions!

[charleneyjh1]

Hi @SiTaggart, thanks for your response!
Under Unify settings->Identify resolution there is also a need for editable table row.

Is there any way to put this on Paste's roadmap?

[SiTaggart]

Technically, what you're showing the in the screenshot is perfectly doable right now with Data grid. See custom content examples in the docs site https://paste.twilio.design/components/data-grid#data-grid-with-custom-cell-content

You can place anything in a cell (with in reason) and that looks perfectly doable with what we have today.

[charleneyjh1]

Thanks Simon!