DataTable Control: TabView Integration

Integrating DataTable with the TabView widget.

Start Tab
DataTable Tab
Another Tab

Welcome! There is a DataTable in the second Tab.

id	date	quantity	amount	title	description

id	date	quantity	amount	title	description
Loading...
po-0167	03/24/1980	1	$4.00	A Book About Nothing	Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit.
po-0783	01/03/1983	0	$12.12	The Meaning of Life	Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean.
po-0297	12/12/1978	12	$1.25	This Book Was Meant to Be Read Aloud	Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed.
po-1482	03/11/1985	6	$3.50	Read Me Twice	Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus.

This is another Tab.

Sample Code for this Example

Data:


1	YAHOO.example.Data = {
2	bookorders: [
3	{id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",
4	description: "Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit."},
5	{id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life",
6	description: "Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean."},
7	{id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud",
8	description: "Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed."},
9	{id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice",
10	description: "Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus."}
11	]
12	}
	view plain \| print \| ?

YAHOO.example.Data = {
    bookorders: [
        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing",
        description: "Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit."},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life",
        description: "Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean."},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud",
        description: "Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed."},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice",
        description: "Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus."}
    ]
}

Markup:


1	<div id="tvcontainer" class="yui-navset">
2	<ul class="yui-nav">
3	<li class="selected"><a href="#tab1"><em>Start Tab</em></a></li>
4	<li><a href="#tab2"><em>DataTable Tab</em></a></li>
5	<li><a href="#tab3"><em>Another Tab</em></a></li>
6
7	</ul>
8	<div class="yui-content">
9
10	<div><p>Welcome! There is a DataTable in the second Tab.</p></div>
11	<div id="dtcontainer"></div>
12	<div><p>This is another Tab.</p></div>
13	</div>
14	</div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.TabView = function() {
3	var myColumnDefs = [
4	{key:"id", sortable:true},
5	{key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
6	{key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true},
7	{key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true},
8	{key:"title", sortable:true},
9	{key:"description"}
10	];
11
12	var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
13	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
14	myDataSource.responseSchema = {
15	fields: ["id","date","quantity","amount","title","description"]
16	};
17
18	var myDataTable =
19	new YAHOO.widget.DataTable("dtcontainer", myColumnDefs, myDataSource,{scrollable:true,width:"100%"});
20
21	var myTabView = new YAHOO.widget.TabView("tvcontainer");
22	myTabView.getTab(1).addListener("click", function() {myDataTable.onShow()});
23
24	return {
25	oDS: myDataSource,
26	oDT: myDataTable,
27	oTV: myTabView
28	};
29	}();
30	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.TabView = function() {
        var myColumnDefs = [
            {key:"id", sortable:true},
            {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
            {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true},
            {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true},
            {key:"title", sortable:true},
            {key:"description"}
        ];

return {
            oDS: myDataSource,
            oDT: myDataTable,
            oTV: myTabView
        };
    }();
});

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: DataTable Control: TabView Integration

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

Logger Console

DataTable Control Examples:

More DataTable Control Resources: