[WIP] Cell Editing

[mbektas]

Hi @sccolbert (cc. @jasongrout, @blink1073, @afshin, @ellisonbg, @SylvainCorlay) I have been working on adding editing capabilities to DataGrid and trying to have a flexible design so that it is possibly something that can be merged to upstream and useful for everyone. It is still a work in progress and I would appreciate any feedback.

In a short summary, it adds a new DataModel (MutableDataModel), ICellEditorController interface with a concrete implementation and ICellEditor interface with several editor implementations and ICellInputValidator interface with concrete implementations for some types. I also added cursor movement using Tab & Enter keys within body or confined to selections when there are any.

Editing is possible if data model is of type MutableDataModel and there is a selection model. It is triggered using double click or typing. Editing can also be triggered programmatically, optionally with a custom editor and validator. Editor type to use is inferred from metadata if the metadata follows the schema defined in https://frictionlessdata.io/specs/table-schema/, otherwise if cell data is a primitive type TextCellEditor is used.

Cell editors to used can be set/overridden based on cell data type or metadata key-value pair match.

DataGrid example is modified to present most of the editing features including a custom cell editor.

Some Documentation to help with PR

Cursor movement

• Tab -> right, Shift + Tab -> left
• Enter -> down, Shift + Enter -> up
• Editing starts at cursor position and cursor moves to next column / next row when next move step requires so
• Cursor moves within selection rectangles and jumps to next rectangle when next move step requires so

Deleting Cell values (setting to null) using Delete key

MutableDataModel which defines new method setData

Cell Editor

• If cells have metadata information (based on schema at https://frictionlessdata.io/specs/table-schema/), type information is used to choose best cell editor for a cell

TextCellEditor

• Default editor unless there is a better match and cell data type is primitive
• Editor for cells of type string, displayed as a text input
• Field Metadata {type: 'string'}

NumberCellEditor

• Editor for real number typed cells, displayed as a text input
• Field Metadata {type: 'number'}

IntegerCellEditor

• Editor for integer typed cells, displayed as a spinner input
• Field Metadata {type: 'integer'}

BooleanCellEditor

• Editor for boolean typed cells, displayed as a checkbox
• Field Metadata {type: 'boolean'}

DateCellEditor

• Editor for date typed cells, displayed as a date picker
• Field Metadata {type: 'date'}

OptionCellEditor

• Editor for cell with data types that have enum options, displayed as a drop down list
• Field Metadata {type: any, constraint: {enum: [list of options]}}

DynamicOptionCellEditor

• Editor for cell with data types that have options from previously entered values in the same column, displayed as an autocomplete drop down list
• Field Metadata {type: any, constraint: {enum: 'dynamic'}}. This is not a standard schema format, I extended it.

Editor Controller

• Manages editor overrides and instances
• Editors can be overridden based on cell data type and metadata key-value pair match
• Controller makes sure there is only one editor active at a time

Validators

• Before values input are committed, they are serialized and validated if a validator is available. Validation error messages are shown using standard HTML form validation system.

TextInputValidator

• Checks for valid text entry
• Can check for min/max text length and regex pattern match requirements

NumberInputValidator

• Checks for valid real number entry
• Can check for min/max bounds

IntegerInputValidator

• Checks for valid integer entry
• Can check for min/max bounds

[sccolbert]

Thanks @mbektasbbg! I just wanted to comment and say this looks awesome at first glance. I'll give it a more in-depth review with comments in the the immediate future :)

[jasongrout]

I also sat down with Mehmet and we discussed some code style things as well as tested and found some behavior bugs in Firefox/Safari, which he took notes on.

Mehmet also mentioned he views this as an initial WIP implementation, and he has some design questions and wants to consider the implementation and design as definitely open for discussion.

[jasongrout]

And I'll add, @mbektasbbg, that I'm also really excited about this!