Kendo UI Grid
Local data, mobile scrolling.
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://demos.kendoui.com/sushi/kendo.mobile.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid"></div>
JavaScript
var columnsData = [{
field: "customer_name",
title: "Customer"
}, {
field: "quantity",
title: "Quantity",
format: '{0:n2}'
}, {
field: "price",
title: "Dollars",
format: '{0:c2}'
}];
$("#grid").kendoGrid({
dataSource: {
data: [{
price: 623.990,
customer_name: "Davis",
quantity: 213
}, {
price: 62.990,
customer_name: "Naren",
quantity: 123
}],
schema: {
model: {
fields: {
price: {
type: "number"
},
customer_name: {
type: "string"
},
quantity: {
type: "number"
}
}
}
}
},
resizable: true,
filterable: true,
columns: columnsData
});