datatable-scroll.mustache revision bb5c2db6ba35ac4db4133b085803cab9af6d12f7
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.tableDemo {margin: 15px 0;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.tableDemo th {text-transform:none;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.tableDemo table {width:auto;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* scrolling datatable doesn't support caption
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example caption {display:table-caption;}*/
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p>Datatables can be made to scroll along the x and y axes. The `DataTableScroll` plugin enables this functionality.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p>The `width` and `height` attributes trigger scrolling along the respective axis, `width` to make the table scroll along the x axis and `height` along the y axis. Setting both `width` and `height` make the table both x and y scrollable.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p><strong>Note:</strong> Scrolling is not currently supported on the Android WebKit browser.
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="example">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-scroll-source}}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>The Data</h3>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>This is the `recordset` data that will be used for each example table. The keys in each tables' `columnset` will correspond with the keys in the data.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnellyvar sampleData = [
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { ANSI: "00000", STATE: "UNITED STATES", TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6 },
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6 },
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1 },
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2 },
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>Instantiation & Plugin</h3>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>The `DataTableScroll` plugin is packaged in the `datatable-scroll` module.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use('datatable-scroll', function (Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>Plug `DataTableScroll` into the `DataTable` instance before the call to `render()`. Configure the plugin to limit the rendered table dimensions by `height` or `width`.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>The first table will be configured to scroll on both X and Y axes by setting both `height` and `width`.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnellyvar dtScrollingXY = new Y.DataTable.Base({
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: sampleCols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: sampleData,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "X and Y axis scrolling table"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly//Creating an xy-scrolling datatable with specific width and height
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellydtScrollingXY.plug(Y.Plugin.DataTableScroll, {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly width: "300px",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly height: "100px"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly// Pass render() the CSS selector of the container element
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>Setting a scrolling direction</h3>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>The `width` and `height` values passed into the `datatable-scroll` plugin determine the scrolling directions on that particular datatable instance. The following rules apply:</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <li>If a width and height are both passed in through the configuration object, the datatable will support scrolling in 'x' and 'y' directions.</li>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <li>If only a width is passed in, the datatable will only support x-scrolling, and its height will default to `auto`</li>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <li>If only a height is passed in, the datatable will only support y-scrolling, and its width will default to `auto`</li>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <li>If neither width nor height are passed in, the datatable will not scroll, and both attributes will default to `auto`</li>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h5>Notes</h5>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <li>Even if a width and height is passed in, the table will not scroll if it can entirely fit into the specified viewport. However, if additional rows are added, scrollbars will be available immediately.</li>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <li>The widths and heights of the scrolling data-table can currently only be set during initialization. They cannot be modified after the table has been displayed, and modifying them will not enable a certain scrolling direction.</li>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>Full Code Listing</h3>
bb5c2db6ba35ac4db4133b085803cab9af6d12f7Tripp {{>datatable-scroll-source}}