YUI Library Examples: DataTable Control (beta): Showing, Hiding, and Reordering Columns.

Sample Code for this Example

Data:


1	YAHOO.example.Data.addresses = [
2	{name:"John A. Smith", address:"1236 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"},
3	{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"},
4	{name:"Bob C. Uncle", address:"9996 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
5	{name:"John D. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"},
6	{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"},
7	{name:"Bob F. Uncle", address:"9899 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
8	{name:"John G. Smith", address:"1723 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"},
9	{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"},
10	{name:"Bob I. Uncle", address:"9909 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
11	{name:"John J. Smith", address:"1623 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"},
12	{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"},
13	{name:"Bob L. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
14	{name:"John M. Smith", address:"1293 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"},
15	{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"},
16	{name:"Bob O. Uncle", address:"9959 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"},
17	{name:"John P. Smith", address:"6123 Some Street", city:"San Francisco", state:"CA", amount:5, active:"yes", colors:["red"], last_login:"4/19/2007"},
18	{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"},
19	{name:"Bob R. Uncle", address:"9989 Random Road", city:"Los Angeles", state:"CA", amount:0, active:"maybe", colors:["green"], last_login:"1/23/2004"}
20	];
	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	#dt-example {width:45em;margin:0 auto;}
3	#dt-options {text-align:right;margin:1em 0;}
4	#dt-dlg {visibility:hidden;border:1px solid #808080;background-color:#E3E3E3;}
5	#dt-dlg .hd {font-weight:bold;padding:1em;background:none;background-color:#E3E3E3;border-bottom:0;}
6	#dt-dlg .ft {text-align:right;padding:.5em;background-color:#E3E3E3;}
7	#dt-dlg .bd {height:10em;margin:0 1em;overflow:auto;border:1px solid black;background-color:white;}
8	#dt-dlg .dt-dlg-pickercol {clear:both;padding:.5em 1em 3em;border-bottom:1px solid gray;}
9	#dt-dlg .dt-dlg-pickerkey {float:left;}
10	#dt-dlg .dt-dlg-pickerbtns {float:right;}
11
12	/* Container workarounds for Mac Gecko scrollbar issues */
13	.yui-panel-container.hide-scrollbars #dt-dlg .bd {
14	/* Hide scrollbars by default for Gecko on OS X */
15	overflow: hidden;
16	}
17	.yui-panel-container.show-scrollbars #dt-dlg .bd {
18	/* Show scrollbars for Gecko on OS X when the Panel is visible */
19	overflow: auto;
20	}
21	#dt-dlg_c .underlay {overflow:hidden;}
22
23
24
25	/* rounded corners */
26	#dt-dlg .corner_tr {
27	background-image: url( assets/img/tr.gif);
28	position: absolute;
29	background-repeat: no-repeat;
30	top: -1px;
31	right: -1px;
32	height: 4px;
33	width: 4px;
34	}
35	#dt-dlg .corner_tl {
36	background-image: url( assets/img/tl.gif);
37	background-repeat: no-repeat;
38	position: absolute;
39	top: -1px;
40	left: -1px;
41	height: 4px;
42	width: 4px;
43	}
44	#dt-dlg .corner_br {
45	background-image: url( assets/img/br.gif);
46	position: absolute;
47	background-repeat: no-repeat;
48	bottom: -1px;
49	right: -1px;
50	height: 4px;
51	width: 4px;
52	}
53	#dt-dlg .corner_bl {
54	background-image: url( assets/img/bl.gif);
55	background-repeat: no-repeat;
56	position: absolute;
57	bottom: -1px;
58	left: -1px;
59	height: 4px;
60	width: 4px;
61	}
62
63	.inprogress {position:absolute;} /* transitional progressive enhancement state */
	view plain \| print \| ?

/* custom styles for this example */
#dt-example {width:45em;margin:0 auto;}
#dt-options {text-align:right;margin:1em 0;}
#dt-dlg {visibility:hidden;border:1px solid #808080;background-color:#E3E3E3;}
#dt-dlg .hd {font-weight:bold;padding:1em;background:none;background-color:#E3E3E3;border-bottom:0;}
#dt-dlg .ft {text-align:right;padding:.5em;background-color:#E3E3E3;}
#dt-dlg .bd {height:10em;margin:0 1em;overflow:auto;border:1px solid black;background-color:white;}
#dt-dlg .dt-dlg-pickercol {clear:both;padding:.5em 1em 3em;border-bottom:1px solid gray;}
#dt-dlg .dt-dlg-pickerkey {float:left;}
#dt-dlg .dt-dlg-pickerbtns {float:right;}

/* Container workarounds for Mac Gecko scrollbar issues */
.yui-panel-container.hide-scrollbars #dt-dlg .bd {
    /* Hide scrollbars by default for Gecko on OS X */
    overflow: hidden;
}
.yui-panel-container.show-scrollbars #dt-dlg .bd {
    /* Show scrollbars for Gecko on OS X when the Panel is visible  */
    overflow: auto;
}
#dt-dlg_c .underlay {overflow:hidden;}

/* rounded corners */
#dt-dlg .corner_tr {
    background-image: url( assets/img/tr.gif);
    position: absolute;
    background-repeat: no-repeat;
    top: -1px;
    right: -1px;
    height: 4px;
    width: 4px;
}
#dt-dlg .corner_tl {
    background-image: url( assets/img/tl.gif);
    background-repeat: no-repeat;
    position: absolute;
    top: -1px;
    left: -1px;
    height: 4px;
    width: 4px;
}
#dt-dlg .corner_br {
    background-image: url( assets/img/br.gif);
    position: absolute;
    background-repeat: no-repeat;
    bottom: -1px;
    right: -1px;
    height: 4px;
    width: 4px;
}
#dt-dlg .corner_bl {
    background-image: url( assets/img/bl.gif);
    background-repeat: no-repeat;
    position: absolute;
    bottom: -1px;
    left: -1px;
    height: 4px;
    width: 4px;
}

.inprogress {position:absolute;} /* transitional progressive enhancement state */

Markup:


1	<div id="dt-example">
2	<div id="dt-options"><a id="dt-options-link" href="fallbacklink.html">Table Options</a></div>
3	<div id="columnshowhide"></div>
4	</div>
5
6	<div id="dt-dlg">
7	<span class="corner_tr"></span>
8	<span class="corner_tl"></span>
9	<span class="corner_br"></span>
10	<span class="corner_bl"></span>
11	<div class="hd">
12	Choose which columns you would like to see:
13	</div>
14	<div id="dt-dlg-picker" class="bd">
15	</div>
16	</div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.ColumnShowHide = new function() {
3	// Define Columns
4	var myColumnDefs = [
5	{key:"address"},
6	{key:"city"},
7	{key:"state"},
8	{key:"amount"},
9	{key:"active"},
10	{key:"colors"},
11	{key:"last_login", formatter:YAHOO.widget.DataTable.formatDate}
12	];
13
14	// Create DataSource
15	this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses);
16	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
17	this.myDataSource.responseSchema = {
18	fields: ["address","city","state","amount","active","colors",{key:"last_login",parser:YAHOO.util.DataSource.parseDate}]
19	};
20
21	// Create DataTable
22	var myDT = this.myDataTable = new YAHOO.widget.DataTable("columnshowhide", myColumnDefs, this.myDataSource, {draggableColumns:true});
23
24	// Shows dialog, creating one when necessary
25	this.newCols = true;
26	this.showDlg = function(e) {
27	YAHOO.util.Event.stopEvent(e);
28
29	if(this.newCols) {
30	// Populate Dialog
31	// Using a template to create elements for the SimpleDialog
32	var allColumns = myDT.getColumnSet().keys;
33	var elPicker = YAHOO.util.Dom.get("dt-dlg-picker");
34	var elTemplateCol = document.createElement("div");
35	YAHOO.util.Dom.addClass(elTemplateCol, "dt-dlg-pickercol");
36	var elTemplateKey = elTemplateCol.appendChild(document.createElement("span"));
37	YAHOO.util.Dom.addClass(elTemplateKey, "dt-dlg-pickerkey");
38	var elTemplateBtns = elTemplateCol.appendChild(document.createElement("span"));
39	YAHOO.util.Dom.addClass(elTemplateBtns, "dt-dlg-pickerbtns");
40	var onclickObj = {fn:this.handleButtonClick, obj:this, scope:false };
41
42	// Create one section in the SimpleDialog for each Column
43	var elColumn, elKey, elButton, oButtonGrp;
44	for(var i=0,l=allColumns.length;i<l;i++) {
45	var oColumn = allColumns[i];
46
47	// Use the template
48	elColumn = elTemplateCol.cloneNode(true);
49
50	// Write the Column key
51	elKey = elColumn.firstChild;
52	elKey.innerHTML = oColumn.getKey();
53
54	// Create a ButtonGroup
55	oButtonGrp = new YAHOO.widget.ButtonGroup({
56	id: "buttongrp"+i,
57	name: oColumn.getKey(),
58	container: elKey.nextSibling
59	});
60	oButtonGrp.addButtons([
61	{ label: "Show", value: "Show", checked: ((!oColumn.hidden)), onclick: onclickObj},
62	{ label: "Hide", value: "Hide", checked: ((oColumn.hidden)), onclick: onclickObj}
63	]);
64
65	elPicker.appendChild(elColumn);
66	}
67	this.newCols = false;
68	}
69	this.myDlg.show();
70	this.myDlg.center();
71	};
72	this.hideDlg = function(e) {
73	this.hide();
74	};
75	this.handleButtonClick = function(e, oSelf) {
76	var sKey = this.get("name");
77	if(this.get("value") === "Hide") {
78	// Hides a Column
79	oSelf.myDataTable.hideColumn(sKey);
80	}
81	else {
82	// Shows a Column
83	oSelf.myDataTable.showColumn(sKey);
84	}
85	};
86
87	// Create the SimpleDialog
88	YAHOO.util.Dom.removeClass("dt-dlg", "inprogress");
89	this.myDlg = new YAHOO.widget.SimpleDialog("dt-dlg", {
90	width: "30em",
91	visible: false,
92	modal: true,
93	buttons: [
94	{ text:"Close", handler:this.hideDlg }
95	]
96	});
97	this.myDlg.render();
98
99	// Nulls out myDlg to force a new one to be created
100	myDT.subscribe("columnReorderEvent", function(){
101	this.newCols = true;
102	YAHOO.util.Event.purgeElement("dt-dlg-picker", true);
103	YAHOO.util.Dom.get("dt-dlg-picker").innerHTML = "";
104	}, this, true);
105
106	// Hook up the SimpleDialog to the link
107	YAHOO.util.Event.addListener("dt-options-link", "click", this.showDlg, this, true);
108	};
109	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ColumnShowHide = new function() {
        // Define Columns
        var myColumnDefs = [
            {key:"address"},
            {key:"city"},
            {key:"state"},
            {key:"amount"},
            {key:"active"},
            {key:"colors"},
            {key:"last_login", formatter:YAHOO.widget.DataTable.formatDate}
        ];

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

// Create DataTable
        var myDT = this.myDataTable = new YAHOO.widget.DataTable("columnshowhide", myColumnDefs, this.myDataSource, {draggableColumns:true});
                    
        // Shows dialog, creating one when necessary
        this.newCols = true;
        this.showDlg = function(e) {
            YAHOO.util.Event.stopEvent(e);

if(this.newCols) {
                // Populate Dialog
                // Using a template to create elements for the SimpleDialog
                var allColumns = myDT.getColumnSet().keys;
                var elPicker = YAHOO.util.Dom.get("dt-dlg-picker");
                var elTemplateCol = document.createElement("div");
                YAHOO.util.Dom.addClass(elTemplateCol, "dt-dlg-pickercol");
                var elTemplateKey = elTemplateCol.appendChild(document.createElement("span"));
                YAHOO.util.Dom.addClass(elTemplateKey, "dt-dlg-pickerkey");
                var elTemplateBtns = elTemplateCol.appendChild(document.createElement("span"));
                YAHOO.util.Dom.addClass(elTemplateBtns, "dt-dlg-pickerbtns");
                var onclickObj = {fn:this.handleButtonClick, obj:this, scope:false };
                
                // Create one section in the SimpleDialog for each Column
                var elColumn, elKey, elButton, oButtonGrp;
                for(var i=0,l=allColumns.length;i<l;i++) {
                    var oColumn = allColumns[i];
                    
                    // Use the template
                    elColumn = elTemplateCol.cloneNode(true);
                    
                    // Write the Column key
                    elKey = elColumn.firstChild;
                    elKey.innerHTML = oColumn.getKey();
                    
                    // Create a ButtonGroup
                    oButtonGrp = new YAHOO.widget.ButtonGroup({ 
                                    id: "buttongrp"+i, 
                                    name: oColumn.getKey(), 
                                    container: elKey.nextSibling
                    });
                    oButtonGrp.addButtons([
                        { label: "Show", value: "Show", checked: ((!oColumn.hidden)), onclick: onclickObj},
                        { label: "Hide", value: "Hide", checked: ((oColumn.hidden)), onclick: onclickObj}
                    ]);
                                    
                    elPicker.appendChild(elColumn);
                }
                this.newCols = false;
        	}
            this.myDlg.show();
            this.myDlg.center();
        };
        this.hideDlg = function(e) {
            this.hide();
        };
        this.handleButtonClick = function(e, oSelf) {
            var sKey = this.get("name");
            if(this.get("value") === "Hide") {
                // Hides a Column
                oSelf.myDataTable.hideColumn(sKey);
            }
            else {
                // Shows a Column
                oSelf.myDataTable.showColumn(sKey);
            }
        };
        
        // Create the SimpleDialog
        YAHOO.util.Dom.removeClass("dt-dlg", "inprogress");
        this.myDlg = new YAHOO.widget.SimpleDialog("dt-dlg", {
                width: "30em",
			    visible: false,
			    modal: true,
			    buttons: [ 
					{ text:"Close",  handler:this.hideDlg }
                ]
		});
		this.myDlg.render();

// Nulls out myDlg to force a new one to be created
        myDT.subscribe("columnReorderEvent", function(){
            this.newCols = true;
            YAHOO.util.Event.purgeElement("dt-dlg-picker", true);
            YAHOO.util.Dom.get("dt-dlg-picker").innerHTML = "";
        }, this, true);
		
		// Hook up the SimpleDialog to the link
		YAHOO.util.Event.addListener("dt-options-link", "click", this.showDlg, this, true);
    };
});

YUI Library Examples: DataTable Control (beta): Showing, Hiding, and Reordering Columns.

Sample Code for this Example

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: