Previous Month (July 2025) August 2025 Next Month (September 2025)
27	28	29	30	31	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
31	1	2	3	4	5	6

YUI Library Examples: DataTable Control: Inline Cell Editing

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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], 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"], last_login:"2/15/2006"},
        {name:"Bob C. Uncle", address:"9996 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
        {name:"John D. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], 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"], last_login:"2/15/2006"},
        {name:"Bob F. Uncle", address:"9899 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
        {name:"John G. Smith", address:"1723 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], 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"], last_login:"2/15/2006"},
        {name:"Bob I. Uncle", address:"9909 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
        {name:"John J. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], 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"], last_login:"2/15/2006"},
        {name:"Bob L. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
        {name:"John M. Smith", address:"1293 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], 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"], last_login:"2/15/2006"},
        {name:"Bob O. Uncle", address:"9959 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
        {name:"John P. Smith", address:"6123 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], 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"], last_login:"2/15/2006"},
        {name:"Bob R. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}
    ]
}

CSS:


1	/* custom styles for this example */
2	.yui-skin-sam pre { font-family:arial;font-size:100%; } /* Reset PRE */
	view plain \| print \| ?

Markup:


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

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.CellSelection = function() {
3	var myColumnDefs = [
4	{key:"col1", sortable:true},
5	{key:"col2", sortable:true},
6	{key:"col3", sortable:true},
7	{key:"col4", sortable:true}
8	];
9
10	var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
11	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
12	myDataSource.responseSchema = {
13	fields: ["col0","col1","col2","col3","col4"]
14	};
15
16	var cellBlockSelectDataTable = new YAHOO.widget.DataTable("cellblock",
17	myColumnDefs, myDataSource, {
18	caption:"Cell-Block Selection Mode with Support for Modifier Keys",
19	selectionMode:"cellblock"
20	});
21
22	// Subscribe to events for cell selection
23	cellBlockSelectDataTable.subscribe("cellMouseoverEvent", cellBlockSelectDataTable.onEventHighlightCell);
24	cellBlockSelectDataTable.subscribe("cellMouseoutEvent", cellBlockSelectDataTable.onEventUnhighlightCell);
25	cellBlockSelectDataTable.subscribe("cellClickEvent", cellBlockSelectDataTable.onEventSelectCell);
26	cellBlockSelectDataTable.subscribe("cellSelectEvent", cellBlockSelectDataTable.clearTextSelection);
27
28	var cellRangeSelectDataTable = new YAHOO.widget.DataTable("cellrange",
29	myColumnDefs, myDataSource, {
30	caption:"Example: Cell-Range Selection Mode Support for Modifier Keys",
31	selectionMode:"cellrange"
32	});
33
34	// Subscribe to events for cell selection
35	cellRangeSelectDataTable.subscribe("cellMouseoverEvent", cellRangeSelectDataTable.onEventHighlightCell);
36	cellRangeSelectDataTable.subscribe("cellMouseoutEvent", cellRangeSelectDataTable.onEventUnhighlightCell);
37	cellRangeSelectDataTable.subscribe("cellClickEvent", cellRangeSelectDataTable.onEventSelectCell);
38	cellRangeSelectDataTable.subscribe("cellSelectEvent", cellRangeSelectDataTable.clearTextSelection);
39
40	var singleCellSelectDataTable = new YAHOO.widget.DataTable("singlecell",
41	myColumnDefs, myDataSource, {
42	caption:"Single-Cell Selection Mode with Modifier Keys Disabled",
43	selectionMode:"singlecell"
44	});
45
46	// Subscribe to events for cell selection
47	singleCellSelectDataTable.subscribe("cellMouseoverEvent", singleCellSelectDataTable.onEventHighlightCell);
48	singleCellSelectDataTable.subscribe("cellMouseoutEvent", singleCellSelectDataTable.onEventUnhighlightCell);
49	singleCellSelectDataTable.subscribe("cellClickEvent", singleCellSelectDataTable.onEventSelectCell);
50	singleCellSelectDataTable.subscribe("cellSelectEvent", singleCellSelectDataTable.clearTextSelection);
51
52	return {
53	oDS: myDataSource,
54	oDTCellBlockSelect: cellBlockSelectDataTable,
55	oDTCellRangeSelect: cellRangeSelectDataTable,
56	oDTSingleCellSelect: singleCellSelectDataTable
57	};
58	}();
59	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.CellSelection = function() {
        var myColumnDefs = [
            {key:"col1", sortable:true},
            {key:"col2", sortable:true},
            {key:"col3", sortable:true},
            {key:"col4", sortable:true}
        ];

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["col0","col1","col2","col3","col4"]
        };

var cellBlockSelectDataTable = new YAHOO.widget.DataTable("cellblock",
                myColumnDefs, myDataSource, {
                    caption:"Cell-Block Selection Mode with Support for Modifier Keys",
                    selectionMode:"cellblock"
                });

// Subscribe to events for cell selection
        cellBlockSelectDataTable.subscribe("cellMouseoverEvent", cellBlockSelectDataTable.onEventHighlightCell);
        cellBlockSelectDataTable.subscribe("cellMouseoutEvent", cellBlockSelectDataTable.onEventUnhighlightCell);
        cellBlockSelectDataTable.subscribe("cellClickEvent", cellBlockSelectDataTable.onEventSelectCell);
        cellBlockSelectDataTable.subscribe("cellSelectEvent", cellBlockSelectDataTable.clearTextSelection);

var cellRangeSelectDataTable = new YAHOO.widget.DataTable("cellrange",
                myColumnDefs, myDataSource, {
                    caption:"Example: Cell-Range Selection Mode Support for Modifier Keys",
                    selectionMode:"cellrange"
                });

// Subscribe to events for cell selection
        cellRangeSelectDataTable.subscribe("cellMouseoverEvent", cellRangeSelectDataTable.onEventHighlightCell);
        cellRangeSelectDataTable.subscribe("cellMouseoutEvent", cellRangeSelectDataTable.onEventUnhighlightCell);
        cellRangeSelectDataTable.subscribe("cellClickEvent", cellRangeSelectDataTable.onEventSelectCell);
        cellRangeSelectDataTable.subscribe("cellSelectEvent", cellRangeSelectDataTable.clearTextSelection);

var singleCellSelectDataTable = new YAHOO.widget.DataTable("singlecell",
                myColumnDefs, myDataSource, {
                    caption:"Single-Cell Selection Mode with Modifier Keys Disabled",
                    selectionMode:"singlecell"
                });

// Subscribe to events for cell selection
        singleCellSelectDataTable.subscribe("cellMouseoverEvent", singleCellSelectDataTable.onEventHighlightCell);
        singleCellSelectDataTable.subscribe("cellMouseoutEvent", singleCellSelectDataTable.onEventUnhighlightCell);
        singleCellSelectDataTable.subscribe("cellClickEvent", singleCellSelectDataTable.onEventSelectCell);
        singleCellSelectDataTable.subscribe("cellSelectEvent", singleCellSelectDataTable.clearTextSelection);
        
        return {
            oDS: myDataSource,
            oDTCellBlockSelect: cellBlockSelectDataTable,
            oDTCellRangeSelect: cellRangeSelectDataTable,
            oDTSingleCellSelect: singleCellSelectDataTable
        };
    }();
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control: Inline Cell Editing

Sample Code for this Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources:

Previous Month (July 2025) August 2025 Next Month (September 2025)
Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	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
31	1	2	3	4	5	6

Previous Month (July 2025) August 2025 Next Month (September 2025)
Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	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
31	1	2	3	4	5	6

Previous Month (July 2025) August 2025 Next Month (September 2025)
Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	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
31	1	2	3	4	5	6