datatable.html revision 364b3f41370b5853ec58ed0f094565f69ab7c7fd
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css">
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith font-family: sans-serif;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith font-size: smaller;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith padding: 5px;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith font-size:120%;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith background: #FFFCB6;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith border:1px solid #C9C675;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith #results dt {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith font-weight:bold;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith padding:3px;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith display:block;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith #results dd {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith font-weight:normal;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith #results dd span {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith font-weight:bold;
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra<p>To test the performance of various datatables, look at the following sections in the code:
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra//large or small dataset.
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra//---------------------------------------------
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra// Special instructions
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra//---------------------------------------------
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //ignore following tests (good to do if you are doing a large dataset)
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testBaseDatatable: true,
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testXYDatatable: true,
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testXDatatable: true,
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testYDatatable_FixedCol: true,
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testYDatatable_AutoCol: true,
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testXYDatatable_BigHeaders: false
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Toggle <code>data</code> from <code>large</code> to <code>small</code> to get a different sized dataset. The <code>ignore</code> object determines which table to load. If testing performance, it is recommended that you only enable 1 table at a time.</p>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra<p><input type="button" value="Run Tests" id="btnRun" disabled=true></p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<h3>Scrolling XY Datatable (Set columnwidths)</h3>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<P>A general XY scrolling datatable. Column widths are provided for all columns, table width and height is provided.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A X-scrolling datatable. Column A and B have specified widths. The rest of the columns do not have any widths specified. Only a height of 200px is specified.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A Y-scrolling datatable. Column widths are provided for all columns, table height is provided. Since all cols have specified width, you may see this table overflowing past its container div (the blue div in the background). </p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A Y-scrolling datatable, where only the first 2 columns have a specified width. Only the table height is provided.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A XY-scrolling datatable, where only the first 2 columns have a specified width. Table height and width is provided. The table headers are of larger width than the table contents</p>
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra<h3>Scrolling Datatable with no width or height set</h3>
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra<p>A scrolling datatable with no width or height values passed in will result in a base datatable being created with auto width and height.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra(function() {
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith allowRollup: false,
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith useBrowserConsole: false
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra }).use("console", "test", "dump", "datatable", "profiler","node","json-parse", function(Y) {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra // Set up the page
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var ASSERT = Y.Assert,
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra ARRAYASSERT = Y.ArrayAssert,
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra BTNRUN = Y.one("#btnRun"),
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra BTNRUN.set("disabled", false);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith TestRunner.subscribe(TestRunner.TEST_CASE_COMPLETE_EVENT, testCompleted);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.on("click", function(e){
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith BTNRUN.set("value", 'Running...');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith BTNRUN.set("disabled", true);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith function testCompleted() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith BTNRUN.set("value", 'Test Completed');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log('Test Completed');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var myConsole = new Y.Console().render();
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //large data set
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var large = [];
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith large[i] = {a: i+1, b:i+2, c:i+3, d: i+4, e: i+5, f: i+6, g:i+7};
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var small = [{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0}];
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith nestedcols: [
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith cols: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width: '120px'},{key:"c", width:'75px'},{key:"d", width:'150px'},{key:"3", width:'75px'},{key:"f", width:'150px'},{key:"g", width:'75px'}],
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith cols2: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width:'75px'},{key:"c"},{key:"d"},{key:"e"},{key:"f"},{key:"g"}],
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith cols3: [{key:"a", field:"a", label:"Lorem Ipsum Dolor SIt Amet", sortable:true, className: ["oneClass", "anotherClass"], width:'5px'},{key:"b", abbr:"Lorem Ipsum Dolor SIt Amet", className:"myClass", width:'75px'},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"}],
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //---------------------------------------------
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //---------------------------------------------
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //ignore following tests (good to do if you are doing a large dataset)
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //---------------------------------------------
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //---------------------------------------------
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith //this.rs = new Y.Recordset({records:this.initialData});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith /////////////////////////////////////////////////////////////////////////////
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith /////////////////////////////////////////////////////////////////////////////
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var dd = Y.Node.create('<dd>' + v.calls + ' call(s) at ' + v.avg + ' ms/call = <span>' + Math.round(v.avg*v.calls) + '</span> ms total</dd>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith /////////////////////////////////////////////////////////////////////////////
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith /////////////////////////////////////////////////////////////////////////////
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testBaseDatatable: function() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var sel = "#base";
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, caption:"Base"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var msg = Y.Profiler.getAverage('dtBase') + 'ms taken to display';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var report = Y.Profiler.getFullReport(this.reportParser);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log(msg, "time");
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testXYDatatable: function() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var sel = '#scrolling-xy';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption: "ScrollingDataTable"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt.plug(Y.Plugin.DataTableScroll, {width:"200px", height:"300px"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var msg = Y.Profiler.getAverage('dtXY') + 'ms taken to display';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var report = Y.Profiler.getFullReport(this.reportParser);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log(msg, "time");
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testXDatatable: function() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var sel = "#scrolling-x";
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, caption:"ScrollingDataTable"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt.plug(Y.Plugin.DataTableScroll, {width:"150px"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var msg = Y.Profiler.getAverage('dtX') + 'ms taken to display';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var report = Y.Profiler.getFullReport(this.reportParser);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log(msg, "time");
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testYDatatable_FixedCol: function() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var sel = "#scrolling-y";
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt.plug(Y.Plugin.DataTableScroll, {height:"300px"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var msg = Y.Profiler.getAverage('dtY1') + 'ms taken to display';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var report = Y.Profiler.getFullReport(this.reportParser);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log(msg, 'time');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testYDatatable_AutoCol: function() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var sel = "#scrolling-colwidth";
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var msg = Y.Profiler.getAverage('dtY2') + 'ms taken to display';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var report = Y.Profiler.getFullReport(this.reportParser);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log(msg, 'time');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testXYDatatable_BigHeaders: function() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var sel = "#scrolling-bigcols";
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt = new Y.DataTable.Base({columnset:this.cols3, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", width:"400px"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var msg = Y.Profiler.getAverage('dtHeaders') + 'ms taken to display';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var report = Y.Profiler.getFullReport(this.reportParser);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log(msg, 'time');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith testNoScrollDatatable: function() {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var sel = "#scrolling-noscroll";
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt = new Y.DataTable.Base({columnset:this.cols3, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var msg = Y.Profiler.getAverage('dtNoScroll') + 'ms taken to display';
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var report = Y.Profiler.getFullReport(this.reportParser);
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.log(msg, 'time');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith this.dt.scroll.set('width', '200px');
82dcdf72033580e7e6d2a7e634effec6e8753980Luke Smith test_uniqueRecordset: function () {
82dcdf72033580e7e6d2a7e634effec6e8753980Luke Smith // Ticket #2529980
82dcdf72033580e7e6d2a7e634effec6e8753980Luke Smith aRS = a.get('recordset'),
82dcdf72033580e7e6d2a7e634effec6e8753980Luke Smith bRS = b.get('recordset');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith "caption should not be added to the DOM unless set": function () {
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var container = Y.one("#base"),
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith table, caption;
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith caption: "Caption set"
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith caption = table.get('boundingBox').one('caption');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.Assert.areSame("Caption set", caption.get('text'));
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith caption = table.get('boundingBox').one('caption');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith table.set('caption', 'Caption set');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith caption = table.get('boundingBox').one('caption');
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith Y.Assert.areSame('Caption set', caption.get('text'));
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith "test Recordset does not lose plugins on load": function () {
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith var data = [ {a:1,b:1,c:1}, {a:2,b:2,c:2}, {a:3,b:3,c:3} ],
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith source, table;
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith source = new Y.DataSource.Local({ source: data });
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith resultFields: ['a','b','c']
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith columnset: [ { key: 'a', sortable: true }, 'b', 'c' ]
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith datasource: source
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith recordset = table.get("recordset");
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith var suite = new Y.Test.Suite("Datatable Test Suite");
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.Test.Runner.setName("Datatable Test Runner");