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">
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith Datatables can be made to scroll along the x and y axes. Include
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith "`datatable-scroll`" in your `use()` line to enable the feature.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith This example shows the basic scrolling configurations available.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith <strong>Note:</strong> Scrolling is not currently supported on the
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith Android WebKit browser.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<h3> Vertically Scrolling Table</h3>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<div class="example yui3-skin-sam">
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith <div id="scrolling-y" class="yui3-skin-sam tableDemo"></div>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith Enable vertical scrolling by setting `scrollable` to "y" and assigning the
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke SmithYUI().use('datatable-scroll', function (Y) {
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith var state_census_data = [ ... ],
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith{{>datatable-scroll-y-source}}
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<h3>Horizontally Scrolling Table</h3>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<div class="example yui3-skin-sam">
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith <div id="scrolling-x" class="tableDemo"></div>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith Enable horizontal scrolling by setting `scrollable` to "x" and assigning
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith the `width`.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke SmithYUI().use('datatable-scroll', function (Y) {
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith var state_census_data = [ ... ],
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith{{>datatable-scroll-x-source}}
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<h3>Fully Scrolling Datatable</h3>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith <div id="scrolling-xy" class="tableDemo"></div>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith Enable scrolling along both axes by setting `scrollable` to `true` or "xy"
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith and assigning both `height` and `width`.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke SmithYUI().use('datatable-scroll', function (Y) {
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith var state_census_data = [ ... ],
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith{{>datatable-scroll-xy-source}}
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<h3>Using Percentage Widths</h3>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<div class="example yui3-skin-sam">
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith <div id="scrolling-100pct" class="tableDemo"></div>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith Scrolling DataTables support percentage `width`s. The table above is
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith configured to scroll vertically with a `width` of "100%".
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use('datatable-scroll', function (Y) {
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith var state_census_data = [ ... ],
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith{{>datatable-scroll-pct-source}}
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<h3>The Data</h3>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith This is the data that is used for each example table. The keys in each
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith tables' `columns` correspond with the keys in the data.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smithvar sampleData = [
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith { ANSI: "00000", STATE: "UNITED STATES", TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6 },
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith { ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6 },
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith { ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1 },
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith { ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2 },
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<h3>Setting scrolling direction and dimensions</h3>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith The values of `scrollable` and the respective dimensional attribute
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith determine the scrolling direction(s) of each datatable instance.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith<p>Other things to consider are:</p>
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith If a DataTable is configured with `scrollable` of "y", but the `height`
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith is not set, it will <strong>not</strong> be made scrollable. Likewise
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith for "x" and `width`. The respective dimension attribute is required.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith If the configured `width` of an "x" or "xy" scrolling table is wider
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith than necessary to fit the data, the table width will be expanded to
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith the assigned `width`.
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith If a DataTable is configured with `scrollable` of "y", but the `width`
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith attribute is also set, DataTable will attempt to make the table that
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith wide. But if the table data doesn't fit within the configured width,
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith the table will expand naturally to fit the data.
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h3>Full Code Listing</h3>
c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith{{>datatable-scroll-source}}
1a6fedae53aba3b25cb5fa2ff9f9b4a503aaaa44Luke Smith{{>datatable-scroll-source}}