Quick Edit mode for YUI 3 DataTable
Even though YUI 3 DataTable does not yet have inline editing of individual cells, it is relatively simple to implement Quick Edit mode. The QuickEdit plugin for DataTable in the YUI 3 Gallery allows all the visible values in a DataTable to be edited simultaneously.
(Click the screenshot to play with this example.)
Overview
As with the YUI 2 version, the core idea of Quick Edit mode is to swap out all the cell formatters with new ones which populate the cells with form elements, e.g., input fields or dropdowns. This is done when start() is called, based on the configuration described below. After the user is finished, you can call getChanges() to get the changed values and then persist them. To exit Quick Edit mode, call cancel(). (It is named cancel instead of stop to remind you that it discards all changes.)
Since the Quick Edit gallery module is a plugin for DataTable, you need to plug it in to your datatable before you can use it:
my_table.plug(Y.Plugin.DataTableQuickEdit);
This stores the plugin in the qe member of the datatable, so you must call the plugin's functions like this:
my_table.qe.start();
Configuration
Quick Edit adds two new configuration attributes to all columns: quickEdit and qeFormatter.
If a column's quickEdit property is defined, the column will be editable in Quick Edit mode. To accept all the defaults, you can simply set quickEdit:true. For more control, you can pass an object with the following properties:
formatter
The cell formatter which will render an appropriate form field: ,