#

# Example: Scrolling DataTable

Datatables can be made to scroll along the x and y axes. Include "`datatable-scroll`" in your `use()` line to enable the feature.

This example shows the basic scrolling configurations available.

Note: Scrolling is not currently supported on the Android WebKit browser.

### Vertically Scrolling Table

Enable vertical scrolling by setting `scrollable` to "y" and assigning the `height`.

    YUI().use('datatable-scroll', function (Y) {
        var state_census_data = [ ... ],
            table;

        table = new Y.DataTable({
            caption: "Y axis scrolling table",
            columns: [
                { key: "STATE",     label: "State" },
                { key: "TOTAL_POP", label: "Total Population" }
            ],
            data: state_census_data,
            scrollable: "y",
            height:"200px"
        });

        table.render('#scrolling-y');

    });

### Horizontally Scrolling Table

Enable horizontal scrolling by setting `scrollable` to "x" and assigning the `width`.

    YUI().use('datatable-scroll', function (Y) {
        var state_census_data = [ ... ],
            table;

        table = new Y.DataTable({
            caption: "X axis scrolling table",
            columns: [
                { key: "ANSI" },
                { key: "STATE",           label:"State" },
                { key: "TOTAL_POP",       label:"Total Population" },
                { key: "LAND_AREA",       label:"Land Area" },
                { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" }
            ],
            data: state_census_data.slice(0, 7), // truncated for the example
            scrollable: "x",
            width: "250px"
        });

        table.render('#scrolling-x');

    });

### Fully Scrolling Datatable

Enable scrolling along both axes by setting `scrollable` to `true` or "xy" and assigning both `height` and `width`.

    YUI().use('datatable-scroll', function (Y) {
        var state_census_data = [ ... ],
            table;

        table = new Y.DataTable({
            caption: "X and Y axis scrolling table",
            columns: [
                { key: "ANSI" },
                { key: "STATE",           label:"State" },
                { key: "TOTAL_POP",       label:"Total Population" },
                { key: "LAND_AREA",       label:"Land Area" },
                { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" }
            ],
            data: state_census_data,
            scrollable: true,
            width: "300px",
            height: "150px"
        });

        table.render('#scrolling-xy');

    });

### Using Percentage Widths

Scrolling DataTables support percentage `width`s. The table above is configured to scroll vertically with a `width` of "100%".

    YUI().use('datatable-scroll', function (Y) {
        var state_census_data = [ ... ],
            table;

        table = new Y.DataTable({
            caption: "100% width scrolling table",
            columns: [
                { key: "STATE",     label: "State" },
                { key: "TOTAL_POP", label: "Total Population" }
            ],
            data: state_census_data,
            scrollable: "y",
            height:"200px",
            width: "100%"
        });

        table.render('#scrolling-100pct');

    });

### The Data

This is the data that is used for each example table. The keys in each tables' `columns` correspond with the keys in the data.

    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 },
        ...
    ];

### Setting scrolling direction and dimensions

The values of `scrollable` and the respective dimensional attribute determine the scrolling direction(s) of each datatable instance.

Other things to consider are:

1. If a DataTable is configured with `scrollable` of "y", but the `height` is not set, it will not be made scrollable. Likewise for "x" and `width`. The respective dimension attribute is required.
2. 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`.
3. 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.

### Full Code Listing

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <body class="yui3-skin-sam"> <!-- You need this skin class -->

    YUI().use('datatable-scroll', function (Y) {
        var state_census_data = [
            { 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 },
            { ANSI: "05000", STATE: "ARKANSAS", TOTAL_POP: 2889450, LAND_AREA: 52068.17, POP_PER_SQ_MILE: 51.3 },
            { ANSI: "06000", STATE: "CALIFORNIA", TOTAL_POP: 36961664, LAND_AREA: 155959.34, POP_PER_SQ_MILE: 217.2 },
            { ANSI: "08000", STATE: "COLORADO", TOTAL_POP: 5024748, LAND_AREA: 103717.53, POP_PER_SQ_MILE: 41.5 },
            { ANSI: "09000", STATE: "CONNECTICUT", TOTAL_POP: 3518288, LAND_AREA: 4844.8, POP_PER_SQ_MILE: 702.9 },
            { ANSI: "10000", STATE: "DELAWARE", TOTAL_POP: 885122, LAND_AREA: 1953.56, POP_PER_SQ_MILE: 401 },
            { ANSI: "11000", STATE: "DISTRICT OF COLUMBIA", TOTAL_POP: 599657, LAND_AREA: 61.4, POP_PER_SQ_MILE: 9378 },
            { ANSI: "12000", STATE: "FLORIDA", TOTAL_POP: 18537969, LAND_AREA: 53926.82, POP_PER_SQ_MILE: 296.4 },
            { ANSI: "13000", STATE: "GEORGIA", TOTAL_POP: 9829211, LAND_AREA: 57906.14, POP_PER_SQ_MILE: 141.4 },
            { ANSI: "15000", STATE: "HAWAII", TOTAL_POP: 1295178, LAND_AREA: 6422.62, POP_PER_SQ_MILE: 188.6 },
            { ANSI: "16000", STATE: "IDAHO", TOTAL_POP: 1545801, LAND_AREA: 82747.21, POP_PER_SQ_MILE: 15.6 },
            { ANSI: "17000", STATE: "ILLINOIS", TOTAL_POP: 12910409, LAND_AREA: 55583.58, POP_PER_SQ_MILE: 223.4 },
            { ANSI: "18000", STATE: "INDIANA", TOTAL_POP: 6423113, LAND_AREA: 35866.9, POP_PER_SQ_MILE: 169.5 },
            { ANSI: "19000", STATE: "IOWA", TOTAL_POP: 3007856, LAND_AREA: 55869.36, POP_PER_SQ_MILE: 52.4 },
            { ANSI: "20000", STATE: "KANSAS", TOTAL_POP: 2818747, LAND_AREA: 81814.88, POP_PER_SQ_MILE: 32.9 },
            { ANSI: "21000", STATE: "KENTUCKY", TOTAL_POP: 4314113, LAND_AREA: 39728.18, POP_PER_SQ_MILE: 101.7 },
            { ANSI: "22000", STATE: "LOUISIANA", TOTAL_POP: 4492076, LAND_AREA: 43561.85, POP_PER_SQ_MILE: 102.6 },
            { ANSI: "23000", STATE: "MAINE", TOTAL_POP: 1318301, LAND_AREA: 30861.55, POP_PER_SQ_MILE: 41.3 },
            { ANSI: "24000", STATE: "MARYLAND", TOTAL_POP: 5699478, LAND_AREA: 9773.82, POP_PER_SQ_MILE: 541.9 },
            { ANSI: "25000", STATE: "MASSACHUSETTS", TOTAL_POP: 6593587, LAND_AREA: 7840.02, POP_PER_SQ_MILE: 809.8 },
            { ANSI: "26000", STATE: "MICHIGAN", TOTAL_POP: 9969727, LAND_AREA: 56803.82, POP_PER_SQ_MILE: 175 },
            { ANSI: "27000", STATE: "MINNESOTA", TOTAL_POP: 5266214, LAND_AREA: 79610.08, POP_PER_SQ_MILE: 61.8 },
            { ANSI: "28000", STATE: "MISSISSIPPI", TOTAL_POP: 2951996, LAND_AREA: 46906.96, POP_PER_SQ_MILE: 60.6 },
            { ANSI: "29000", STATE: "MISSOURI", TOTAL_POP: 5987580, LAND_AREA: 68885.93, POP_PER_SQ_MILE: 81.2 },
            { ANSI: "30000", STATE: "MONTANA", TOTAL_POP: 974989, LAND_AREA: 145552.43, POP_PER_SQ_MILE: 6.2 },
            { ANSI: "31000", STATE: "NEBRASKA", TOTAL_POP: 1796619, LAND_AREA: 76872.41, POP_PER_SQ_MILE: 22.3 },
            { ANSI: "32000", STATE: "NEVADA", TOTAL_POP: 2643085, LAND_AREA: 109825.99, POP_PER_SQ_MILE: 18.2 },
            { ANSI: "33000", STATE: "NEW HAMPSHIRE", TOTAL_POP: 1324575, LAND_AREA: 8968.1, POP_PER_SQ_MILE: 137.8 },
            { ANSI: "34000", STATE: "NEW JERSEY", TOTAL_POP: 8707739, LAND_AREA: 7417.34, POP_PER_SQ_MILE: 1134.5},
            { ANSI: "35000", STATE: "NEW MEXICO", TOTAL_POP: 2009671, LAND_AREA: 121355.53, POP_PER_SQ_MILE: 15 },
            { ANSI: "36000", STATE: "NEW YORK", TOTAL_POP: 19541453, LAND_AREA: 47213.79, POP_PER_SQ_MILE: 401.9 },
            { ANSI: "37000", STATE: "NORTH CAROLINA", TOTAL_POP: 9380884, LAND_AREA: 48710.88, POP_PER_SQ_MILE: 165.2 },
            { ANSI: "38000", STATE: "NORTH DAKOTA", TOTAL_POP: 646844, LAND_AREA: 68975.93, POP_PER_SQ_MILE: 9.3 },
            { ANSI: "39000", STATE: "OHIO", TOTAL_POP: 11542645, LAND_AREA: 40948.38, POP_PER_SQ_MILE: 277.3 },
            { ANSI: "40000", STATE: "OKLAHOMA", TOTAL_POP: 3687050, LAND_AREA: 68667.06, POP_PER_SQ_MILE: 50.3 },
            { ANSI: "41000", STATE: "OREGON", TOTAL_POP: 3825657, LAND_AREA: 95996.79, POP_PER_SQ_MILE: 35.6 },
            { ANSI: "42000", STATE: "PENNSYLVANIA", TOTAL_POP: 12604767, LAND_AREA: 44816.61, POP_PER_SQ_MILE: 274 },
            { ANSI: "44000", STATE: "RHODE ISLAND", TOTAL_POP: 1053209, LAND_AREA: 1044.93, POP_PER_SQ_MILE: 1003.2 },
            { ANSI: "45000", STATE: "SOUTH CAROLINA", TOTAL_POP: 4561242, LAND_AREA: 30109.47, POP_PER_SQ_MILE: 133.2 },
            { ANSI: "46000", STATE: "SOUTH DAKOTA", TOTAL_POP: 812383, LAND_AREA: 75884.64, POP_PER_SQ_MILE: 9.9 },
            { ANSI: "47000", STATE: "TENNESSEE", TOTAL_POP: 6296254, LAND_AREA: 41217.12, POP_PER_SQ_MILE: 138 },
            { ANSI: "48000", STATE: "TEXAS", TOTAL_POP: 24782302, LAND_AREA: 261797.12, POP_PER_SQ_MILE: 79.6 },
            { ANSI: "49000", STATE: "UTAH", TOTAL_POP: 2784572, LAND_AREA: 82143.65, POP_PER_SQ_MILE: 27.2 },
            { ANSI: "50000", STATE: "VERMONT", TOTAL_POP: 621760, LAND_AREA: 9249.56, POP_PER_SQ_MILE: 65.8 },
            { ANSI: "51000", STATE: "VIRGINIA", TOTAL_POP: 7882590, LAND_AREA: 39594.07, POP_PER_SQ_MILE: 178.8 },
            { ANSI: "53000", STATE: "WASHINGTON", TOTAL_POP: 6664195, LAND_AREA: 66544.06, POP_PER_SQ_MILE: 88.6 },
            { ANSI: "54000", STATE: "WEST VIRGINIA", TOTAL_POP: 1819777, LAND_AREA: 24077.73, POP_PER_SQ_MILE: 75.1 },
            { ANSI: "55000", STATE: "WISCONSIN", TOTAL_POP: 5654774, LAND_AREA: 54310.1, POP_PER_SQ_MILE: 98.8 },
            { ANSI: "56000", STATE: "WYOMING", TOTAL_POP: 544270, LAND_AREA: 97100.4, POP_PER_SQ_MILE: 5.1 }
        ];

        var table;

        table = new Y.DataTable({
            caption: "Y axis scrolling table",
            columns: [
                { key: "STATE",     label: "State" },
                { key: "TOTAL_POP", label: "Total Population" }
            ],
            data: state_census_data,
            scrollable: "y",
            height:"200px"
        });

        table.render('#scrolling-y');

        table = new Y.DataTable({
            caption: "X axis scrolling table",
            columns: [
                { key: "ANSI" },
                { key: "STATE",           label:"State" },
                { key: "TOTAL_POP",       label:"Total Population" },
                { key: "LAND_AREA",       label:"Land Area" },
                { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" }
            ],
            data: state_census_data.slice(0, 7), // truncated for the example
            scrollable: "x",
            width: "250px"
        });

        table.render('#scrolling-x');

        table = new Y.DataTable({
            caption: "X and Y axis scrolling table",
            columns: [
                { key: "ANSI" },
                { key: "STATE",           label:"State" },
                { key: "TOTAL_POP",       label:"Total Population" },
                { key: "LAND_AREA",       label:"Land Area" },
                { key: "POP_PER_SQ_MILE", label:"Pop/Square Mile" }
            ],
            data: state_census_data,
            scrollable: true,
            width: "300px",
            height: "150px"
        });

        table.render('#scrolling-xy');

        table = new Y.DataTable({
            caption: "100% width scrolling table",
            columns: [
                { key: "STATE",     label: "State" },
                { key: "TOTAL_POP", label: "Total Population" }
            ],
            data: state_census_data,
            scrollable: "y",
            height:"200px",
            width: "100%"
        });

        table.render('#scrolling-100pct');

    });