<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Scrolling DataTable</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Scrolling DataTable</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style scoped>
/* custom styles for this example */
.example .yui3-datatable {
margin-bottom: 1em;
}
/* css to counter global site css */
.example table {
width: auto;
}
.example caption {
display: table-caption;
}
.example th,
.example td {
text-transform: none;
border: 0 none;
}
</style>
<div class="intro">
<p>
Datatables can be made to scroll along the x and y axes. Include
"<code>datatable-scroll</code>" in your <code>use()</code> line to enable the feature.
</p>
<p>
This example shows the basic scrolling configurations available.
</p>
<p>
<strong>Note:</strong> Scrolling is not currently supported on the
Android WebKit browser.
</p>
</div>
<h3> Vertically Scrolling Table</h3>
<div class="example yui3-skin-sam">
<div id="scrolling-y" class="yui3-skin-sam tableDemo"></div>
</div>
<p>
Enable vertical scrolling by setting <code>scrollable</code> to "y" and assigning the
<code>height</code>.
</p>
<pre class="code prettyprint">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');
});</pre>
<h3>Horizontally Scrolling Table</h3>
<div class="example yui3-skin-sam">
<div id="scrolling-x" class="tableDemo"></div>
</div>
<p>
Enable horizontal scrolling by setting <code>scrollable</code> to "x" and assigning
the <code>width</code>.
</p>
<pre class="code prettyprint">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');
});</pre>
<h3>Fully Scrolling Datatable</h3>
<div class="example yui3-skin-sam">
<div id="scrolling-xy" class="tableDemo"></div>
</div>
<p>
Enable scrolling along both axes by setting <code>scrollable</code> to <code>true</code> or "xy"
and assigning both <code>height</code> and <code>width</code>.
</p>
<pre class="code prettyprint">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');
});</pre>
<h3>Using Percentage Widths</h3>
<div class="example yui3-skin-sam">
<div id="scrolling-100pct" class="tableDemo"></div>
</div>
<p>
Scrolling DataTables support percentage <code>width</code>s. The table above is
configured to scroll vertically with a <code>width</code> of "100%".
</p>
<pre class="code prettyprint">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');
});</pre>
<h3>The Data</h3>
<p>
This is the data that is used for each example table. The keys in each
tables' <code>columns</code> correspond with the keys in the data.
</p>
<pre class="code prettyprint">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 },
...
];</pre>
<h3>Setting scrolling direction and dimensions</h3>
<p>
The values of <code>scrollable</code> 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 <code>scrollable</code> of "y", but the <code>height</code>
is not set, it will <strong>not</strong> be made scrollable. Likewise
for "x" and <code>width</code>. The respective dimension attribute is required.
</li>
<li>
If the configured <code>width</code> of an "x" or "xy" scrolling table is wider
than necessary to fit the data, the table width will be expanded to
the assigned <code>width</code>.
</li>
<li>
If a DataTable is configured with <code>scrollable</code> of "y", but the <code>width</code>
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>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<pre class="code prettyprint">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');
});</pre>
<script>
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');
});
</script>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="This example illustrates simple DataTable use cases.">
<a href="datatable-basic.html">Basic DataTable</a>
</li>
<li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
<a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
</li>
<li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
<a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
</li>
<li data-description="Custom format data for display.">
<a href="datatable-formatting.html">Formatting Row Data for Display</a>
</li>
<li data-description="DataTable with nested column headers.">
<a href="datatable-nestedcols.html">Nested Column Headers</a>
</li>
<li data-description="DataTable with column sorting.">
<a href="datatable-sort.html">Column Sorting</a>
</li>
<li data-description="DataTable with vertical and/or horizontal scrolling rows.">
<a href="datatable-scroll.html">Scrolling DataTable</a>
</li>
<li data-description="Using DataTable's recordType attribute to create calculated, sortable columns.">
<a href="datatable-recordtype.html">Sortable generated columns</a>
</li>
<li data-description="Populating one DataTable from details in the data of another.">
<a href="datatable-masterdetail.html">Master and detail tables</a>
</li>
<li data-description="Checkbox column that retains checked state when sorting.">
<a href="datatable-chkboxselect.html">Checkbox select column</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
<a href="../panel/panel-form.html">Creating a Modal Form</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/datatable',
name: 'datatable-scroll',
title: 'Scrolling DataTable',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('datatable-basic');
YUI.Env.Tests.examples.push('datatable-dsget');
YUI.Env.Tests.examples.push('datatable-dsio');
YUI.Env.Tests.examples.push('datatable-formatting');
YUI.Env.Tests.examples.push('datatable-nestedcols');
YUI.Env.Tests.examples.push('datatable-sort');
YUI.Env.Tests.examples.push('datatable-scroll');
YUI.Env.Tests.examples.push('datatable-recordtype');
YUI.Env.Tests.examples.push('datatable-masterdetail');
YUI.Env.Tests.examples.push('datatable-chkboxselect');
YUI.Env.Tests.examples.push('panel-form');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>