Previous Month (May 2025) June 2025 Next Month (July 2025)
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

DataTable Control: Inline Cell Editing

This example demonstrates basic inline cell editing features, as well as more complex customizations, such as input validation and click-to-save interactions.

View example in new window.

uneditable	address	city	state	amount	active	colors	last_login
Loading...
	1236 Some Street	San Francisco	CA	5	yes	red	04/19/2007
	3271 Another Ave	New York	NY	3	no	red,blue	02/15/2006
	9996 Random Road	Los Angeles	CA	0	maybe	green	01/23/2004
	1623 Some Street	San Francisco	CA	5	yes	red	04/19/2007
	3217 Another Ave	New York	NY	3	no	red,blue	02/15/2006
	9899 Random Road	Los Angeles	CA	0	maybe	green	01/23/2004
	1723 Some Street	San Francisco	CA	5	yes	red	04/19/2007
	3241 Another Ave	New York	NY	3	no	red,blue	02/15/2006
	9909 Random Road	Los Angeles	CA	0	maybe	green	01/23/2004
	1623 Some Street	San Francisco	CA	5	yes	red	04/19/2007
	3721 Another Ave	New York	NY	3	no	red,blue	02/15/2006
	9989 Random Road	Los Angeles	CA	0	maybe	green	01/23/2004
	1293 Some Street	San Francisco	CA	5	yes	red	04/19/2007
	3621 Another Ave	New York	NY	3	no	red,blue	02/15/2006
	9959 Random Road	Los Angeles	CA	0	maybe	green	01/23/2004
	6123 Some Street	San Francisco	CA	5	yes	red	04/19/2007
	3281 Another Ave	New York	NY	3	no	red,blue	02/15/2006
	9989 Random Road	Los Angeles	CA	0	maybe	green	01/23/2004

Sample Code for this Example

Data:


1	YAHOO.example.Data = {
2	addresses: [
3	{name:"John A. Smith", address:"1236 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["banana","cherry"], last_login:"4/19/2007"},
4	{name:"Joan B. Jones", address:"3271 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple"], last_login:"2/15/2006"},
5	{name:"Bob C. Uncle", address:"9996 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["cherry"], last_login:"1/23/2004"},
6	{name:"John D. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["cherry"], last_login:"4/19/2007"},
7	{name:"Joan E. Jones", address:"3217 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple","cherry"], last_login:"2/15/2006"},
8	{name:"Bob F. Uncle", address:"9899 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["banana"], last_login:"1/23/2004"},
9	{name:"John G. Smith", address:"1723 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["apple"], last_login:"4/19/2007"},
10	{name:"Joan H. Jones", address:"3241 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["kiwi"], last_login:"2/15/2006"},
11	{name:"Bob I. Uncle", address:"9909 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["apple","banana"], last_login:"1/23/2004"},
12	{name:"John J. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["apple","cherry"], last_login:"4/19/2007"},
13	{name:"Joan K. Jones", address:"3721 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["banana"], last_login:"2/15/2006"},
14	{name:"Bob L. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["cherry"], last_login:"1/23/2004"},
15	{name:"John M. Smith", address:"1293 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["cherry"], last_login:"4/19/2007"},
16	{name:"Joan N. Jones", address:"3621 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple"], last_login:"2/15/2006"},
17	{name:"Bob O. Uncle", address:"9959 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["kiwi","cherry"], last_login:"1/23/2004"},
18	{name:"John P. Smith", address:"6123 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["banana"], last_login:"4/19/2007"},
19	{name:"Joan Q. Jones", address:"3281 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple"], last_login:"2/15/2006"},
20	{name:"Bob R. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["apple"], last_login:"1/23/2004"}
21	]
22	}
	view plain \| print \| ?

YAHOO.example.Data = {
    addresses: [
        {name:"John A. Smith", address:"1236 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["banana","cherry"], last_login:"4/19/2007"},
        {name:"Joan B. Jones", address:"3271 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple"], last_login:"2/15/2006"},
        {name:"Bob C. Uncle", address:"9996 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["cherry"], last_login:"1/23/2004"},
        {name:"John D. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["cherry"], last_login:"4/19/2007"},
        {name:"Joan E. Jones", address:"3217 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple","cherry"], last_login:"2/15/2006"},
        {name:"Bob F. Uncle", address:"9899 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["banana"], last_login:"1/23/2004"},
        {name:"John G. Smith", address:"1723 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["apple"], last_login:"4/19/2007"},
        {name:"Joan H. Jones", address:"3241 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["kiwi"], last_login:"2/15/2006"},
        {name:"Bob I. Uncle", address:"9909 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["apple","banana"], last_login:"1/23/2004"},
        {name:"John J. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["apple","cherry"], last_login:"4/19/2007"},
        {name:"Joan K. Jones", address:"3721 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["banana"], last_login:"2/15/2006"},
        {name:"Bob L. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["cherry"], last_login:"1/23/2004"},
        {name:"John M. Smith", address:"1293 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["cherry"], last_login:"4/19/2007"},
        {name:"Joan N. Jones", address:"3621 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple"], last_login:"2/15/2006"},
        {name:"Bob O. Uncle", address:"9959 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["kiwi","cherry"], last_login:"1/23/2004"},
        {name:"John P. Smith", address:"6123 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], fruit:["banana"], last_login:"4/19/2007"},
        {name:"Joan Q. Jones", address:"3281 Another Ave", city:"New York", state:"NY", amount:3, active:"no", colors:["red","blue"], fruit:["apple"], last_login:"2/15/2006"},
        {name:"Bob R. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], fruit:["apple"], last_login:"1/23/2004"}
    ]
}

CSS:


1	/* custom styles for this example */
2	.yui-skin-sam .yui-dt-col-address pre { font-family:arial;font-size:100%; } /* Use PRE in first col to preserve linebreaks*/
	view plain \| print \| ?

Markup:


1	<div id="cellediting"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.InlineCellEditing = function() {
3	// Custom formatter for "address" column to preserve line breaks
4	var formatAddress = function(elCell, oRecord, oColumn, oData) {
5	elCell.innerHTML = "<pre class=\"address\">" + oData + "</pre>";
6	};
7
8	var myColumnDefs = [
9	{key:"uneditable"},
10	{key:"address", formatter:formatAddress, editor: new YAHOO.widget.TextareaCellEditor()},
11	{key:"city", editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true})},
12	{key:"state", editor: new YAHOO.widget.DropdownCellEditor({dropdownOptions:YAHOO.example.Data.stateAbbrs,disableBtns:true})},
13	{key:"amount", editor: new YAHOO.widget.TextboxCellEditor({validator:YAHOO.widget.DataTable.validateNumber})},
14	{key:"active", editor: new YAHOO.widget.RadioCellEditor({radioOptions:["yes","no","maybe"],disableBtns:true})},
15	{key:"colors", editor: new YAHOO.widget.CheckboxCellEditor({checkboxOptions:["red","yellow","blue"]})},
16	{key:"fruit", editor: new YAHOO.widget.DropdownCellEditor({multiple:true,dropdownOptions:["apple","banana","cherry"]})},
17	{key:"last_login", formatter:YAHOO.widget.DataTable.formatDate, editor: new YAHOO.widget.DateCellEditor()}
18	];
19
20	var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses);
21	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
22	myDataSource.responseSchema = {
23	fields: ["address","city","state","amount","active","colors","fruit",{key:"last_login",parser:"date"}]
24	};
25
26	var myDataTable = new YAHOO.widget.DataTable("cellediting", myColumnDefs, myDataSource, {});
27
28	// Set up editing flow
29	var highlightEditableCell = function(oArgs) {
30	var elCell = oArgs.target;
31	if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
32	this.highlightCell(elCell);
33	}
34	};
35	myDataTable.subscribe("cellMouseoverEvent", highlightEditableCell);
36	myDataTable.subscribe("cellMouseoutEvent", myDataTable.onEventUnhighlightCell);
37	myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);
38
39	return {
40	oDS: myDataSource,
41	oDT: myDataTable
42	};
43	}();
44	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.InlineCellEditing = function() {
        // Custom formatter for "address" column to preserve line breaks
        var formatAddress = function(elCell, oRecord, oColumn, oData) {
            elCell.innerHTML = "<pre class=\"address\">" + oData + "</pre>";
        };

var myColumnDefs = [
            {key:"uneditable"},
            {key:"address", formatter:formatAddress, editor: new YAHOO.widget.TextareaCellEditor()},
            {key:"city", editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true})},
            {key:"state", editor: new YAHOO.widget.DropdownCellEditor({dropdownOptions:YAHOO.example.Data.stateAbbrs,disableBtns:true})},
            {key:"amount", editor: new YAHOO.widget.TextboxCellEditor({validator:YAHOO.widget.DataTable.validateNumber})},
            {key:"active", editor: new YAHOO.widget.RadioCellEditor({radioOptions:["yes","no","maybe"],disableBtns:true})},
            {key:"colors", editor: new YAHOO.widget.CheckboxCellEditor({checkboxOptions:["red","yellow","blue"]})},
            {key:"fruit", editor: new YAHOO.widget.DropdownCellEditor({multiple:true,dropdownOptions:["apple","banana","cherry"]})},
            {key:"last_login", formatter:YAHOO.widget.DataTable.formatDate, editor: new YAHOO.widget.DateCellEditor()}
        ];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["address","city","state","amount","active","colors","fruit",{key:"last_login",parser:"date"}]
        };

var myDataTable = new YAHOO.widget.DataTable("cellediting", myColumnDefs, myDataSource, {});

// Set up editing flow
        var highlightEditableCell = function(oArgs) {
            var elCell = oArgs.target;
            if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
                this.highlightCell(elCell);
            }
        };
        myDataTable.subscribe("cellMouseoverEvent", highlightEditableCell);
        myDataTable.subscribe("cellMouseoutEvent", myDataTable.onEventUnhighlightCell);
        myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);
        
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

INFO 1347ms (+0) 10:25:52 PM:

DataTable instance yui-dt0

Post-render routine executed

INFO 1347ms (+11) 10:25:52 PM:
DataTable  instance yui-dt0
DataTable rendered

INFO 1336ms (+4) 10:25:52 PM:

DataTable instance yui-dt0

DataTable message hidden

INFO 1332ms (+0) 10:25:52 PM:
DataTable  instance yui-dt0
DataTable rendering...

INFO 1332ms (+1) 10:25:52 PM:
RecordSet  instance yui-rs0
Set 18 Record(s) at index 0

INFO 1331ms (+1) 10:25:52 PM:
DataSource  instance0
Parsed array data is {results => [{last_login => Thu Apr 19 2007 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red], active => yes, amount => 5, state => CA, city => San Francisco, address => 1236 Some Street}, {last_login => Wed Feb 15 2006 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red, blue], active => no, amount => 3, state => NY, city => New York, address => 3271 Another Ave}, {last_login => Fri Jan 23 2004 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [green], active => maybe, amount => 0, state => CA, city => Los Angeles, address => 9996 Random Road}, {last_login => Thu Apr 19 2007 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red], active => yes, amount => 5, state => CA, city => San Francisco, address => 1623 Some Street}, {last_login => Wed Feb 15 2006 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red, blue], active => no, amount => 3, state => NY, city => New York, address => 3217 Another Ave}, {last_login => Fri Jan 23 2004 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [green], active => maybe, amount => 0, state => CA, city => Los Angeles, address => 9899 Random Road}, {last_login => Thu Apr 19 2007 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red], active => yes, amount => 5, state => CA, city => San Francisco, address => 1723 Some Street}, {last_login => Wed Feb 15 2006 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red, blue], active => no, amount => 3, state => NY, city => New York, address => 3241 Another Ave}, {last_login => Fri Jan 23 2004 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [green], active => maybe, amount => 0, state => CA, city => Los Angeles, address => 9909 Random Road}, {last_login => Thu Apr 19 2007 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red], active => yes, amount => 5, state => CA, city => San Francisco, address => 1623 Some Street}, {last_login => Wed Feb 15 2006 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red, blue], active => no, amount => 3, state => NY, city => New York, address => 3721 Another Ave}, {last_login => Fri Jan 23 2004 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [green], active => maybe, amount => 0, state => CA, city => Los Angeles, address => 9989 Random Road}, {last_login => Thu Apr 19 2007 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red], active => yes, amount => 5, state => CA, city => San Francisco, address => 1293 Some Street}, {last_login => Wed Feb 15 2006 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red, blue], active => no, amount => 3, state => NY, city => New York, address => 3621 Another Ave}, {last_login => Fri Jan 23 2004 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [green], active => maybe, amount => 0, state => CA, city => Los Angeles, address => 9959 Random Road}, {last_login => Thu Apr 19 2007 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red], active => yes, amount => 5, state => CA, city => San Francisco, address => 6123 Some Street}, {last_login => Wed Feb 15 2006 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [red, blue], active => no, amount => 3, state => NY, city => New York, address => 3281 Another Ave}, {last_login => Fri Jan 23 2004 00:00:00 GMT+0000 (Coordinated Universal Time), fruit => , colors => [green], active => maybe, amount => 0, state => CA, city => Los Angeles, address => 9989 Random Road}]}

INFO 1330ms (+1) 10:25:52 PM:

DataSource instance0

Received live data response for "null"

INFO 1329ms (+0) 10:25:52 PM:

DataSource instance0

Making connection to live data for "null"

INFO 1329ms (+0) 10:25:52 PM:

DataTable instance yui-dt0

DataTable showing message: Loading...

WARN 1329ms (+0) 10:25:52 PM:

DataTable instance yui-dt0

Could not find DragDrop for resizeable Columns

INFO 1329ms (+2) 10:25:52 PM:

DataTable instance yui-dt0

TH cells for 9 keys created

INFO 1327ms (+1) 10:25:52 PM:
RecordSet  instance yui-rs0
RecordSet initialized

INFO 1326ms (+1) 10:25:52 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized

INFO 1325ms (+769) 10:25:52 PM:
DataSource  instance0
DataSource initialized

INFO 556ms (+556) 10:25:51 PM:
LogReader  instance0
LogReader initialized

INFO 0ms (+0) 10:25:51 PM:
global
Logger initialized

YUI Library Examples: DataTable Control: Inline Cell Editing

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

Logger Console

DataTable Control Examples:

More DataTable Control Resources:

Previous Month (May 2025) June 2025 Next Month (July 2025)
Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

Previous Month (May 2025) June 2025 Next Month (July 2025)
Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

Previous Month (May 2025) June 2025 Next Month (July 2025)
Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12