5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus<style scoped>

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus/* custom styles for this example */

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus.tableDemo {margin: 15px 0;}

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus/* css to counter global site css */

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus.tableDemo th {text-transform:none;}

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus.tableDemo table {width:auto;}

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus/* scrolling datatable doesn't support caption

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

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus</style>

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus<div class="intro">

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

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus

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

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus

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

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus</div>

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus

5a3bd0ef762b8a3238869ac9963194555e39e6a7jpikus<div class="example">

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

```