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);
    };
});

INFO3657ms (+1) 2:35:12 AM:

DataTable instance yui-dt2

DataTable initialized with 5 of 5 rows

INFO3656ms (+0) 2:35:12 AM:

DataTable instance yui-dt1

DataTable initialized with 5 of 5 rows

INFO3656ms (+16) 2:35:12 AM:

DataTable instance yui-dt0

DataTable initialized with 5 of 5 rows

INFO3640ms (+0) 2:35:12 AM:
DataTable  instance yui-dt2
DataTable message hidden

INFO3640ms (+0) 2:35:12 AM:
DataTable  instance yui-dt2
DataTable rendering...

INFO3640ms (+0) 2:35:12 AM:

DataTable instance yui-dt2

DataTable showing message: Loading data...

INFO3640ms (+0) 2:35:12 AM:
RecordSet  instance yui-rs2
Set 5 Record(s) at index 0

INFO3640ms (+0) 2:35:12 AM:
DataSource  instance0
Parsed array data is {results => [{col4 => 657, col3 => 44, col2 => 400, col1 => 20, col0 => home.html}, {col4 => 567, col3 => 97, col2 => 377, col1 => 24, col0 => blog.html}, {col4 => 543, col3 => 42, col2 => 548, col1 => 32, col0 => contact.html}, {col4 => 946, col3 => 12, col2 => 465, col1 => 8, col0 => about.html}, {col4 => 0, col3 => 0, col2 => 0, col1 => 0, col0 => pagenotfound.html}]}

INFO3640ms (+0) 2:35:12 AM:

DataSource instance0

Received live data response for "null"

INFO3640ms (+0) 2:35:12 AM:

DataSource instance0

Making connection to live data for "null"

INFO3640ms (+2) 2:35:12 AM:

DataTable instance yui-dt2

DataTable showing message: Loading data...

INFO3638ms (+0) 2:35:12 AM:

DataTable instance yui-dt2

Accessibility TH cells for 4keys created

INFO3638ms (+1) 2:35:12 AM:

DataTable instance yui-dt2

TH cells for 4 keys created

INFO3637ms (+0) 2:35:12 AM:
RecordSet  instance yui-rs2
RecordSet initialized

INFO3637ms (+2) 2:35:12 AM:
ColumnSet  instance yui-cs2
ColumnSet initialized

INFO3635ms (+0) 2:35:12 AM:
DataTable  instance yui-dt1
DataTable message hidden

INFO3635ms (+0) 2:35:12 AM:
DataTable  instance yui-dt1
DataTable rendering...

INFO3635ms (+0) 2:35:12 AM:

DataTable instance yui-dt1

DataTable showing message: Loading data...

INFO3635ms (+0) 2:35:12 AM:
RecordSet  instance yui-rs1
Set 5 Record(s) at index 0

INFO3635ms (+0) 2:35:12 AM:
DataSource  instance0
Parsed array data is {results => [{col4 => 657, col3 => 44, col2 => 400, col1 => 20, col0 => home.html}, {col4 => 567, col3 => 97, col2 => 377, col1 => 24, col0 => blog.html}, {col4 => 543, col3 => 42, col2 => 548, col1 => 32, col0 => contact.html}, {col4 => 946, col3 => 12, col2 => 465, col1 => 8, col0 => about.html}, {col4 => 0, col3 => 0, col2 => 0, col1 => 0, col0 => pagenotfound.html}]}

INFO3635ms (+0) 2:35:12 AM:

DataSource instance0

Received live data response for "null"

INFO3635ms (+1) 2:35:12 AM:

DataSource instance0

Making connection to live data for "null"

INFO3634ms (+1) 2:35:12 AM:

DataTable instance yui-dt1

DataTable showing message: Loading data...

INFO3633ms (+0) 2:35:12 AM:

DataTable instance yui-dt1

Accessibility TH cells for 4keys created

INFO3633ms (+2) 2:35:12 AM:

DataTable instance yui-dt1

TH cells for 4 keys created

INFO3631ms (+0) 2:35:12 AM:
RecordSet  instance yui-rs1
RecordSet initialized

INFO3631ms (+3) 2:35:12 AM:
ColumnSet  instance yui-cs1
ColumnSet initialized

INFO3628ms (+0) 2:35:12 AM:
DataTable  instance yui-dt0
DataTable message hidden

INFO3628ms (+0) 2:35:12 AM:
DataTable  instance yui-dt0
DataTable rendering...

INFO3628ms (+1) 2:35:12 AM:

DataTable instance yui-dt0

DataTable showing message: Loading data...

INFO3627ms (+1) 2:35:12 AM:
RecordSet  instance yui-rs0
Set 5 Record(s) at index 0

INFO3626ms (+1) 2:35:12 AM:
DataSource  instance0
Parsed array data is {results => [{col4 => 657, col3 => 44, col2 => 400, col1 => 20, col0 => home.html}, {col4 => 567, col3 => 97, col2 => 377, col1 => 24, col0 => blog.html}, {col4 => 543, col3 => 42, col2 => 548, col1 => 32, col0 => contact.html}, {col4 => 946, col3 => 12, col2 => 465, col1 => 8, col0 => about.html}, {col4 => 0, col3 => 0, col2 => 0, col1 => 0, col0 => pagenotfound.html}]}

INFO3625ms (+0) 2:35:12 AM:

DataSource instance0

Received live data response for "null"

INFO3625ms (+1) 2:35:12 AM:

DataSource instance0

Making connection to live data for "null"

INFO3624ms (+2) 2:35:12 AM:

DataTable instance yui-dt0

DataTable showing message: Loading data...

INFO3622ms (+0) 2:35:12 AM:

DataTable instance yui-dt0

Accessibility TH cells for 4keys created

INFO3622ms (+3) 2:35:12 AM:

DataTable instance yui-dt0

TH cells for 4 keys created

INFO3619ms (+0) 2:35:12 AM:
RecordSet  instance yui-rs0
RecordSet initialized

INFO3619ms (+1) 2:35:12 AM:
ColumnSet  instance yui-cs0
ColumnSet initialized

INFO3618ms (+10) 2:35:12 AM:
DataSource  instance0
DataSource initialized

INFO3608ms (+3608) 2:35:12 AM:
LogReader  instance0
LogReader initialized

INFO0ms (+0) 2:35:08 AM:
global
Logger initialized

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: