YUI Library Examples: DataTable Control: 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 = 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	var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses);
16	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
17	myDataSource.responseSchema = {
18	fields: ["address","city","state","amount","active","colors",{key:"last_login",parser:"date"}]
19	};
20
21	// Create DataTable
22	var myDataTable = new YAHOO.widget.DataTable("columnshowhide", myColumnDefs, myDataSource, {draggableColumns:true});
23
24	// Shows dialog, creating one when necessary
25	var newCols = true;
26	var showDlg = function(e) {
27	YAHOO.util.Event.stopEvent(e);
28
29	if(newCols) {
30	// Populate Dialog
31	// Using a template to create elements for the SimpleDialog
32	var allColumns = myDataTable.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: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	newCols = false;
68	}
69	myDlg.show();
70	};
71	var hideDlg = function(e) {
72	this.hide();
73	};
74	var handleButtonClick = function(e, oSelf) {
75	var sKey = this.get("name");
76	if(this.get("value") === "Hide") {
77	// Hides a Column
78	myDataTable.hideColumn(sKey);
79	}
80	else {
81	// Shows a Column
82	myDataTable.showColumn(sKey);
83	}
84	};
85
86	// Create the SimpleDialog
87	YAHOO.util.Dom.removeClass("dt-dlg", "inprogress");
88	var myDlg = new YAHOO.widget.SimpleDialog("dt-dlg", {
89	width: "30em",
90	visible: false,
91	modal: true,
92	buttons: [
93	{ text:"Close", handler:hideDlg }
94	],
95	fixedcenter: true,
96	constrainToViewport: true
97	});
98	myDlg.render();
99
100	// Nulls out myDlg to force a new one to be created
101	myDataTable.subscribe("columnReorderEvent", function(){
102	newCols = true;
103	YAHOO.util.Event.purgeElement("dt-dlg-picker", true);
104	YAHOO.util.Dom.get("dt-dlg-picker").innerHTML = "";
105	}, this, true);
106
107	// Hook up the SimpleDialog to the link
108	YAHOO.util.Event.addListener("dt-options-link", "click", showDlg, this, true);
109
110	return {
111	oDS: myDataSource,
112	oDT: myDataTable
113	};
114	}();
115	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ColumnShowHide = 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
        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",{key:"last_login",parser:"date"}]
        };

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

if(newCols) {
                // Populate Dialog
                // Using a template to create elements for the SimpleDialog
                var allColumns = myDataTable.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: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);
                }
                newCols = false;
        	}
            myDlg.show();
        };
        var hideDlg = function(e) {
            this.hide();
        };
        var handleButtonClick = function(e, oSelf) {
            var sKey = this.get("name");
            if(this.get("value") === "Hide") {
                // Hides a Column
                myDataTable.hideColumn(sKey);
            }
            else {
                // Shows a Column
                myDataTable.showColumn(sKey);
            }
        };
        
        // Create the SimpleDialog
        YAHOO.util.Dom.removeClass("dt-dlg", "inprogress");
        var myDlg = new YAHOO.widget.SimpleDialog("dt-dlg", {
                width: "30em",
			    visible: false,
			    modal: true,
			    buttons: [ 
					{ text:"Close",  handler:hideDlg }
                ],
                fixedcenter: true,
                constrainToViewport: true
		});
		myDlg.render();

// Nulls out myDlg to force a new one to be created
        myDataTable.subscribe("columnReorderEvent", function(){
            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", showDlg, this, true);
		
		return {
		  oDS: myDataSource,
		  oDT: myDataTable
		};
    }();
});

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

Sample Code for this Example

DataTable Control Examples:

More DataTable Control Resources: