Example: Scrolling DataTable

NOTICE: This example is for the deprecated version of DataTable. The components referred to here will be removed in future versions of YUI. If you are unable to upgrade to the latest DataTable version due to unresolvable feature conflicts from version 3.4.1 or prior, please file a ticket.

Datatables can be made to scroll along the x and y axes. The DataTableScroll plugin enables this functionality.

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.

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

xy-Scrolling Datatable

The following is a standard xy-scrolling datatable. The width and height are passed into the plugin.

x-Scrolling Datatable

The following is a standard x-scrolling datatable. Only the width is passed into the plugin. The height is automatically set to the entire table height. For this table, a subset of the census data is used to keep the vertical size manageable.

y-Scrolling Datatable

The following is a standard y-scrolling datatable. Only the height is passed into the plugin. The width is automatically set to width of the container. For this table, a columnset with only two columns is used to keep the horizontal size manageable.

The Data

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.

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

Instantiation & Plugin

The DataTableScroll plugin is packaged in the datatable-scroll-deprecated module.

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

Plug DataTableScroll into the DataTable instance before the call to render(). Configure the plugin to limit the rendered table dimensions by height or width.

The first table will be configured to scroll on both X and Y axes by setting both height and width.

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");

Setting a scrolling direction

The width and height values passed into the datatable-scroll-deprecated plugin determine the scrolling directions on that particular datatable instance. The following rules apply:

  1. If a width and height are both passed in through the configuration object, the datatable will support scrolling in 'x' and 'y' directions.
  2. If only a width is passed in, the datatable will only support x-scrolling, and its height will default to auto
  3. If only a height is passed in, the datatable will only support y-scrolling, and its width will default to auto
  4. If neither width nor height are passed in, the datatable will not scroll, and both attributes will default to auto
Notes
  1. 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.
  2. 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.

Full Code Listing

<h4>xy-Scrolling Datatable</h4>
<p>The following is a standard xy-scrolling datatable. The <code>width</code> and <code>height</code> are passed into the plugin.</p>
<div id="scrolling-xy" class="tableDemo"></div>

<h4>x-Scrolling Datatable</h4>
<p>The following is a standard x-scrolling datatable. Only the <code>width</code> is passed into the plugin. The <code>height</code> is automatically set to the entire table height. For this table, a subset of the census data is used to keep the vertical size manageable.</p>
<div id="scrolling-x" class="tableDemo"></div>

<h4>y-Scrolling Datatable</h4>
<p>The following is a standard y-scrolling datatable. Only the <code>height</code> is passed into the plugin. The <code>width</code> is automatically set to width of the container. For this table, a <code>columnset</code> with only two columns is used to keep the horizontal size manageable.</p>

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

<script type="text/javascript">
YUI().use("datatable-scroll-deprecated", 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 dtScrollingXY = new Y.DataTable.Base({
    columnset: [
        {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"}
    ],
    recordset: state_census_data,
    summary: "X and Y axis scrolling table"
});
dtScrollingXY.plug(Y.Plugin.DataTableScroll, {
    width: "300px",
    height: "150px"
});
dtScrollingXY.render("#scrolling-xy");

var dtScrollingX = new Y.DataTable.Base({
    columnset: [
        {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"}
    ],
    recordset: state_census_data.slice(0, 7),
    summary: "X axis scrolling table"
});
dtScrollingX.plug(Y.Plugin.DataTableScroll, {
    width: "250px"
});
dtScrollingX.render("#scrolling-x");

var dtScrollingY = new Y.DataTable.Base({
    columnset: [
        {key:"STATE", label:"State"},
        {key:"TOTAL_POP", label:"Total Population"}
    ],
    recordset: state_census_data,
    summary: "Y axis scrolling table"
});
dtScrollingY.plug(Y.Plugin.DataTableScroll, {
    height:"200px"
});
dtScrollingY.render("#scrolling-y");
});

</script>

Examples