DataTable: Implement Inline Edit pattern

[interactivellama]

This is not a request from any consumer at this time. This issue is for awareness. The primary comment is that the SLDS blueprint does not fully show the pattern. For instance Inline Edit should be paired with a Docked Footer and other patterns from a 130+ page spec document.

SLDS spec https://www.lightningdesignsystem.com/components/data-tables/ W3C examples https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html#

Designer comments:

• For complex inputs, they should remain connected to the cell. Anything other than that I wouldn't consider "inline". Here's more details on "compound inputs" such as address. Not sure if they were implemented, but it was designed to support them. See spec doc.
• It is possible to trigger a modal or other dialog from a cell, but I would not attach it to an "edit" button. Instead I would follow the pattern of something like "Change Owner" that has it's own icon.
• Should an inline edit dialog they be dismissed on scroll? No, that would break the model. We need to be able to scroll the whole table (and the input flyout) in order to gracefully handle large inputs that are larger than the viewport. Submission occurs on click and on return/tab. Don't forget about the keyboard version for all interactions.
• Changes are not necessarily saved to the server when closing the input. As implemented there is a floating save cancel bar at the bottom of the table that allows saving or canceling the batch of edits. So yes, my recommendation would be to always pair inline edit table with a docked or modal footer.
• Regarding the tabbing behavior. That's correct. There isn't really any limit to how many tabs it should take. The rule is that in edit mode (an accessibility concept from w3c) users should be able to access every editable/interactive control by pressing tab and skipping non-actionable content. Escaping edit mode returns the user to navigation mode and allows users to arrow around the table as expected. See the W3C specs for more details.
• Regarding if these are just guidelines or have they been implemented- those examples below look right on as far as I'm concerned.

From Lightning component docs: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example

Additional designs:

[Sheing]

Any update on this?

[garygong]

As far as I know, nobody is actively work on this issue.

[interactivellama]

Yes, no one is working on it. I believe there's a PR that had it most of the way.