DataTable Control (beta): Cell Selection

These examples demonstrate "cellblock", "cellrange", and "singlecell" selection modes.

col1	col2	col3	col4

Cell-Block Selection Mode with Support for Modifier Keys
col1	col2	col3	col4
20	400	44	657
24	377	97	567
32	548	42	543
8	465	12	946
0	0	0	0
Loading data...

col1	col2	col3	col4

Example: Cell-Range Selection Mode Support for Modifier Keys
col1	col2	col3	col4
20	400	44	657
24	377	97	567
32	548	42	543
8	465	12	946
0	0	0	0
Loading data...

col1	col2	col3	col4

Single-Cell Selection Mode with Modifier Keys Disabled
col1	col2	col3	col4
20	400	44	657
24	377	97	567
32	548	42	543
8	465	12	946
0	0	0	0
Loading data...

Sample Code for this Example

Data:


1	YAHOO.example.Data = {
2	webstats: [
3	["home.html",20,400,44,657],
4	["blog.html",24,377,97,567],
5	["contact.html",32,548,42,543],
6	["about.html",8,465,12,946],
7	["pagenotfound.html",0,0,0,0]
8	]
9	}
	view plain \| print \| ?

CSS:


1	/* custom styles for this example */
2	.yui-skin-sam .yui-dt-body { cursor:pointer; } /* when cells are selectable */
3	#cellrange, #singlecell { margin-top:2em; }
	view plain \| print \| ?

Markup:


1	<div id="cellblock"></div>
2	<div id="cellrange"></div>
3	<div id="singlecell"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.CellSelection = new 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	this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
11	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
12	this.myDataSource.responseSchema = {
13	fields: ["col0","col1","col2","col3","col4"]
14	};
15
16	this.cellBlockSelectDataTable = new YAHOO.widget.DataTable("cellblock",
17	myColumnDefs, this.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	this.cellBlockSelectDataTable.subscribe("cellMouseoverEvent", this.cellBlockSelectDataTable.onEventHighlightCell);
24	this.cellBlockSelectDataTable.subscribe("cellMouseoutEvent", this.cellBlockSelectDataTable.onEventUnhighlightCell);
25	this.cellBlockSelectDataTable.subscribe("cellClickEvent", this.cellBlockSelectDataTable.onEventSelectCell);
26	this.cellBlockSelectDataTable.subscribe("cellSelectEvent", this.cellBlockSelectDataTable.clearTextSelection);
27
28	this.cellRangeSelectDataTable = new YAHOO.widget.DataTable("cellrange",
29	myColumnDefs, this.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	this.cellRangeSelectDataTable.subscribe("cellMouseoverEvent", this.cellRangeSelectDataTable.onEventHighlightCell);
36	this.cellRangeSelectDataTable.subscribe("cellMouseoutEvent", this.cellRangeSelectDataTable.onEventUnhighlightCell);
37	this.cellRangeSelectDataTable.subscribe("cellClickEvent", this.cellRangeSelectDataTable.onEventSelectCell);
38	this.cellRangeSelectDataTable.subscribe("cellSelectEvent", this.cellRangeSelectDataTable.clearTextSelection);
39
40	this.singleCellSelectDataTable = new YAHOO.widget.DataTable("singlecell",
41	myColumnDefs, this.myDataSource, {
42	caption:"Single-Cell Selection Mode with Modifier Keys Disabled",
43	selectionMode:"singlecell"
44	});
45
46	// Subscribe to events for cell selection
47	this.singleCellSelectDataTable.subscribe("cellMouseoverEvent", this.singleCellSelectDataTable.onEventHighlightCell);
48	this.singleCellSelectDataTable.subscribe("cellMouseoutEvent", this.singleCellSelectDataTable.onEventUnhighlightCell);
49	this.singleCellSelectDataTable.subscribe("cellClickEvent", this.singleCellSelectDataTable.onEventSelectCell);
50	this.singleCellSelectDataTable.subscribe("cellSelectEvent", this.singleCellSelectDataTable.clearTextSelection);
51	};
52	});
	view plain \| print \| ?

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

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

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

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

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

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

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

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

YUI Library Examples: DataTable Control (beta): Cell Selection

Sample Code for this Example

YUI Logger Output:

Logger Console

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: