<style scoped>

/* custom styles for this example */

.tableDemo {margin: 15px 0;}

/* css to counter global site css */

.tableDemo th {text-transform:none;}

.tableDemo table {width:auto;}

/* scrolling datatable doesn't support caption

.dt-example caption {display:table-caption;}*/

</style>

<div class="intro">

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

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

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

</div>

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

{{>datatable-scroll-source}}

</div>

<h3>The Data</h3>

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

```

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; Plugin</h3>

<p>The `DataTableScroll` plugin is packaged in the `datatable-scroll` module.</p>

```

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

...

});

```

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

<p>The first table will be configured to scroll on both X and Y axes by setting both `height` and `width`.</p>

```

var dtScrollingXY = new Y.DataTable.Base({

columnset: sampleCols,

recordset: sampleData,

summary: "X and Y axis scrolling table"

});

//Creating an xy-scrolling datatable with specific width and height

dtScrollingXY.plug(Y.Plugin.DataTableScroll, {

width: "300px",

height: "100px"

});

// Pass render() the CSS selector of the container element

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

```

<h3>Setting a scrolling direction</h3>

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

<ol>

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

<li>If only a width is passed in, the datatable will only support x-scrolling, and its height will default to `auto`</li>

<li>If only a height is passed in, the datatable will only support y-scrolling, and its width will default to `auto`</li>

<li>If neither width nor height are passed in, the datatable will not scroll, and both attributes will default to `auto`</li>

</ol>

<h5>Notes</h5>

<ol>

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

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

</ol>

<h3>Full Code Listing</h3>

```

{{>datatable-scroll-source}}

```