<style scoped>

/* custom styles for this example */

.example .yui3-datatable {

margin-bottom: 1em;

}

/* css to counter global site css */

.example table {

width: auto;

}

.example caption {

display: table-caption;

}

.example th,

.example td {

text-transform: none;

border: 0 none;

}

</style>

<div class="intro">

<p>Datatables can be made to scroll along the x and y axes. The `datatable-scroll` module enables this functionality.</p>

<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>

<p><strong>Note:</strong> Scrolling is not currently supported on the Android WebKit browser.

<p><strong>Yes, the vertical scrolling column alignment is off. This will be fixed before 3.5.0 GA</strong>.</p>

</div>

<div class="example yui3-skin-sam">

{{>datatable-scroll-source}}

</div>

<h3>The Data</h3>

<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>

```

var sampleData = [

{ ANSI: "00000", STATE: "UNITED STATES", TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6 },

{ ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6 },

{ ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1 },

{ ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2 },

...

];

```

<h3>Instantiation &amp; Configuration</h3>

<p>The `datatable-scroll` module adds support for scrollability.</p>

```

YUI().use('datatable-scroll', function (Y) {

...

});

```

<p>Configure the DataTable to limit the rendered table dimensions by `height` or `width`.</p>

<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>

```

var dtScrollingXY = new Y.DataTable({

columns: sampleCols,

data: sampleData,

scrollable: true,

width: "300px",

height: "100px",

caption: "X and Y axis scrolling table"

}).render("#scrolling-xy");

```

<h3>Setting a scrolling direction</h3>

<p>The values of `scrollable` and the respective dimensional attribute determines the scrolling directions on that particular datatable instance.</p>

<h5>Notes</h5>

<ol>

<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>

<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>

</ol>

<h3>Full Code Listing</h3>

```

{{>datatable-scroll-source}}

```