Editable Cells Design

Below is a summary of the design thoughts on supporting editable content in the table.

Goals

• Leverage concepts from HTML-5
• Provide simple "no code necessary" manipulation of simple model values (starting with string values)
• Use declarations to drive editing.
• Ability to use a declarative opt-out of editing a cell
• Ability to user a declarative reference to a custom cell editor

Design Thoughts

• Use the contenteditable="true" attribute to declare a table is editable. Already, the table headers will disallow inplace editing of header titles. (see update below)

• Support contenteditable="false" on a cell to disable editing of that cell (either programmatically or declaratively) (see update below)

• Provide a cell-editor attribute that can have a name that will correspond to the cell-editors element. This might look like the following:

  <cell-editors>
  	<cell-editor name="datepicker" templateUrl="/templates/datepicker.xhtml"></cell-editor>
  </cell-editor>
  <table ng-scrolling-table contenteditable="true">
  	<thead>
  		<tr>
  			<th>Purchased</th>
  			<th>Price</th>
  			<th>Comments</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr ng-repeat="item in data">
  			<td cell-editor="datepicker">{{formatDate(item.purchased)}}</td>
  			<td contenteditable="false">{{item.price}}</td>
  			<td>{{item.comments}}</td>
  		</tr>
  	</tbody>
  </table>
  

In this example, the price column is not editable, and the purchased column uses a custom editor. If there was another column with comments, simply including a td element with {{item.comments}} as the inner html would be sufficient to allow it to be editable directly.

• Will provide an input editor styled for the table that will be placed in the when editing occurs. It should be sized to not force a re-layout of the table. The reason for a input editor is so conform to the theming of the application.
• The input editor will replace the current innerHTML of the TD element with the editor content, compile this within the scope of the model for the property specified.
• Hitting ESC will cancel the edit and revert back to the original value
• Hitting ENTER or TAB or clicking off the editor will complete the edit session and revert the TD element back to its read-only render state with the updated model data rendered.
• For the simple editor on blur will automatically update the model (via angular binding) and an event "model-updated" will be raised so that the UX can take appropriate action (to save the model etc.). The model object should be passed with the event, along with the table ID (and possibly some other information)
• For custom editors, emitting the "edit-complete" will be used to signal the table that the edit is done and the table will emit the model-updated event and replace the DOM content with the proper content.

Future Options

• Supporting simple column editors for number, boolean, currencies etc.
• Look into HTML-5 "template" for referencing of the cell-editors.

Update on contenteditable - the contenteditable only works on the TD elements with a click listener. One concern is the risk of browser conflict in handling of content editing actions. It may be advisable to introduce a new directive "editable" in place of contenteditable to avoid such a conflict. The added benefit is we could trigger editing on double-click vs. single-click for example.