2N/A<style scoped>

2N/A/* custom styles for this example */

2N/A.example .yui3-datatable {

2N/A margin-bottom: 1em;

2N/A}

2N/A

2N/A/* css to counter global site css */

2N/A.example table {

2N/A width: auto;

2N/A}

2N/A.example caption {

2N/A display: table-caption;

2N/A}

2N/A.example th,

2N/A.example td {

2N/A text-transform: none;

2N/A border: 0 none;

2N/A}

2N/A</style>

2N/A

2N/A<div class="intro">

2N/A <p>

2N/A Datatables can be made to scroll along the x and y axes. Include

2N/A "`datatable-scroll`" in your `use()` line to enable the feature.

2N/A </p>

2N/A

2N/A <p>

2N/A This example shows the basic scrolling configurations available.

2N/A </p>

2N/A

2N/A <p>

2N/A <strong>Note:</strong> Scrolling is not currently supported on the

2N/A Android WebKit browser.

2N/A </p>

2N/A</div>

2N/A

2N/A<h3> Vertically Scrolling Table</h3>

2N/A<div class="example yui3-skin-sam">

2N/A <div id="scrolling-y" class="yui3-skin-sam tableDemo"></div>

2N/A</div>

2N/A

2N/A<p>

2N/A Enable vertical scrolling by setting `scrollable` to "y" and assigning the

2N/A `height`.

2N/A</p>

2N/A

2N/A```

2N/AYUI().use('datatable-scroll', function (Y) {

2N/A var state_census_data = [ ... ],

2N/A table;

2N/A

2N/A{{>datatable-scroll-y-source}}

2N/A});

2N/A```

2N/A

2N/A<h3>Horizontally Scrolling Table</h3>

2N/A<div class="example yui3-skin-sam">

2N/A <div id="scrolling-x" class="tableDemo"></div>

2N/A</div>

2N/A

2N/A<p>

2N/A Enable horizontal scrolling by setting `scrollable` to "x" and assigning

2N/A the `width`.

2N/A</p>

2N/A```

2N/AYUI().use('datatable-scroll', function (Y) {

2N/A var state_census_data = [ ... ],

2N/A table;

2N/A

2N/A{{>datatable-scroll-x-source}}

2N/A});

2N/A```

2N/A

2N/A<h3>Fully Scrolling Datatable</h3>

2N/A<div class="example yui3-skin-sam">

2N/A <div id="scrolling-xy" class="tableDemo"></div>

2N/A</div>

2N/A

2N/A<p>

2N/A Enable scrolling along both axes by setting `scrollable` to `true` or "xy"

2N/A and assigning both `height` and `width`.

2N/A</p>

2N/A

2N/A```

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

var state_census_data = [ ... ],

table;

{{>datatable-scroll-xy-source}}

});

```

<h3>Using Percentage Widths</h3>

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

<div id="scrolling-100pct" class="tableDemo"></div>

</div>

<p>

Scrolling DataTables support percentage `width`s. The table above is

configured to scroll vertically with a `width` of "100%".

</p>

```

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

var state_census_data = [ ... ],

table;

{{>datatable-scroll-pct-source}}

});

```

<h3>The Data</h3>

<p>

This is the data that is used for each example table. The keys in each

tables' `columns` 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>Setting scrolling direction and dimensions</h3>

<p>

The values of `scrollable` and the respective dimensional attribute

determine the scrolling direction(s) of each datatable instance.

</p>

<p>Other things to consider are:</p>

<ol>

<li>

If a DataTable is configured with `scrollable` of "y", but the `height`

is not set, it will <strong>not</strong> be made scrollable. Likewise

for "x" and `width`. The respective dimension attribute is required.

</li>

<li>

If the configured `width` of an "x" or "xy" scrolling table is wider

than necessary to fit the data, the table width will be expanded to

the assigned `width`.

</li>

<li>

If a DataTable is configured with `scrollable` of "y", but the `width`

attribute is also set, DataTable will attempt to make the table that

wide. But if the table data doesn't fit within the configured width,

the table will expand naturally to fit the data.

</li>

</ol>

<h3>Full Code Listing</h3>

```

{{>datatable-scroll-source}}

```

<script>

{{>datatable-scroll-source}}

</script>