DataTable Widget: Scrolling DataTable
xy-Scrolling Datatable
The following is a standard xy-scrolling datatable. The width, height and scroll direction are passed into the plugin.
x-Scrolling Datatable
The following is a standard x-scrolling datatable. The width and scroll direction are passed into the plugin. The height is automatically set to the entire table height.
y-Scrolling Datatable
The following is a standard y-scrolling datatable. The height and scroll direction are passed into the plugin. The width is automatically set to width of the container.
Set up
Set up the columnset and recordset data to represent the information that will be displayed. The keys in the columnset should correspond with the keys in the data. The columnset can also specify widths, labels and other properties.
var sampleCols = [{key:"a", label:"ID", width:'75px'},{key:"b", label:"Field2", abbr:"2", className:"myClass", width:'75px'}, {key:"c", label:"Field3", width:'65px'},{key:"d", label:"Field4", width:'75px'},{key:"e", label:"Field5", width:'45px'}, {key:"f", label:"Field6"},{key:"g", label:"Field7", width:'150px'}], sampleData = [{a:3, b:"Bob", c:115.34, d:623.63, e:"bananas", f:"http://www.yahoo.com", g:1234.56}, {a:4, b:"Charlie", c:75.21, d:63.7316, e:"gooseberries", f:"http://www.yahoo.com", g:1234.56}, {a:6, b:"Edgar", c:37.32, d:636.12, e:"cherries", f:"http://www.yahoo.com", g:1234.56}, {a:17, b:"Ann", c:17.99, d:174.42, e:"raspberries", f:"http://www.yahoo.com", g:1234.56}, {a:23, b:"Diane", c:71.67, d:634.63, e:"apples", f:"http://www.yahoo.com", g:1234.56}, {a:5, b:"Hannah", c:3346.232, d:63.2457, e:"oranges", f:"http://www.yahoo.com", g:1234.56}, {a:17, b:"Igor", c:13452.262, d:23.87, e:"pears", f:"http://www.yahoo.com", g:1234.56}, {a:11, b:"Julie", c:7523.23, d:61.6372, e:"grapes", f:"http://www.yahoo.com", g:1234.56}, {a:1, b:"Francine", c:3.39, d:64.123, e:"plums", f:"http://www.yahoo.com", g:1234.56}];
Instantiation & Plugin
Additional parameters can be passed into the datatable-scroll plugin at this time. In the example below for the XY-scrolling datatable, the width, height and scrolling direction are being passed in.
var dtScrollingXY = new Y.DataTable.Base({columnset:sampleCols, recordset:sampleData}); dtScrollingXY.plug(Y.Plugin.DataTableScroll, {width:"300px", height:"200px", scroll:"xy"});
Display
The scrolling datatable is displayed just like a regular datatable - simply call the render method and pass in a CSS selector to the element to render within.
dtScrollingXY.render("#scrolling-xy");
