Basic Slickgrid
HTML
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.css"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css"></script>
<div id="myGrid" style="width:600px;height:500px;"></div>
JavaScript
var grid;
var columns = [{
id: "column",
name: "",
field: "column",
draggable: true,
focusable: false
},
{
id: "data",
name: "Data",
field: "data"
}, {
id: "x",
name: "x",
field: "x",
draggable: true,
focusable: false
}];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for(var i = 0; i < 100; i++)
data[i] = {
column: "Column " + i,
data: i,
x
};
grid = new Slick.Grid("#myGrid", data, columns, options);
$(".l0").addClass("slick-header-column")
grid.onScroll.subscribe(function(){
$(".l0").addClass("slick-header-column")
})
})