datatable-scroll.mustache revision c7aeb2c8479a339ddcc01cf5973c31ddd6277b0d
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example .yui3-datatable {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith margin-bottom: 1em;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example table {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith width: auto;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example caption {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith display: table-caption;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example td {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith text-transform: none;
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith border: 0 none;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith <p>Datatables can be made to scroll along the x and y axes. The `datatable-scroll` module enables this functionality.</p>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith <p>The `scrollable` attribute along with the `width` and `height` attributes trigger scrolling along the respective axis. Set `scrollable` to "x" and set the `width` to enable horizontal scrolling. Or set `scrollable` to "y" and set the `height` to enable vertical scrolling. Or set `scrollable` to "xy" and set both `height` and `width` to enable scrolling along both axes.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p><strong>Note:</strong> Scrolling is not currently supported on the Android WebKit browser.
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith <p><strong>Yes, the vertical scrolling column alignment is off. This will be fixed before 3.5.0 GA</strong>.</p>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-scroll-source}}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>The Data</h3>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<p>This is the data that will be used for each example table. The keys in each tables' `columns` 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 },
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<h3>Instantiation & Configuration</h3>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<p>The `datatable-scroll` module adds support for scrollability.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use('datatable-scroll', function (Y) {
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<p>Configure the DataTable to limit the rendered table dimensions by `height` or `width`.</p>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<p>The first table will be configured to scroll on both X and Y axes by setting `scrollable` to `true` (aka "xy") and setting both `height` and `width`.</p>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smithvar dtScrollingXY = new Y.DataTable({
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith columns: sampleCols,
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith data: sampleData,
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith scrollable: true,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly width: "300px",
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith height: "100px",
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith caption: "X and Y axis scrolling table"
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith}).render("#scrolling-xy");
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>Setting a scrolling direction</h3>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith<p>The values of `scrollable` and the respective dimensional attribute determines the scrolling directions on that particular datatable instance.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h5>Notes</h5>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith <li>If a DataTable is configured with `scrollable` of "y", but the `height` is not set, it will be made scrollable. Likewise for "x" and `width`.</li>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith <li>If the data in the DataTable will fit within the given dimensions without scrolling, scrolling will be disabled. If the table columns or data change in such a way to exceed the configured dimensions, scrolling will automatically be enabled.</li>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>Full Code Listing</h3>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith{{>datatable-scroll-source}}