Include the following in the head of your html
CSS
SlickGrid/slick.grid.css - at a minimum so your columns don't overlapSlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css - to make it pretty
SlickGrid/examples/examples.css - to make it even prettier
JavaScript
SlickGrid/lib/jquery-1.7.min.js - this is a jQuery plugin afterallSlickGrid/lib/jquery.event.drag-2.0.min.js - dependency of Grid class
SlickGrid/slick.core.js - core SlickGrid goodness
SlickGrid/slick.grid.js - Grid class
Create a div to hold the grid.
Make sure you include an ID and height. If there is no height, SlickGrid can't determine how to display the rows and you'll end up seeing nothing.<div id="grid" style="width:600px; height:200px;"></div>
Define the grid's columns.
var columns = [
{id: "column_1_id", name: "Column 1 Label", field: "column_1"},
{id: "column_2_id", name: "Column 2 Label", field: "column_2"},
{id: "column_3_id", name: "Column 3 Label", field: "column_3"},
{id: "column_4_id", name: "Column 4 Label", field: "column_4"},
{id: "column_5_id", name: "Column 5 Label", field: "column_5"},
];
Gather the data for the grid as an array. Just spoof it for now.
var data = [], i = 50;
while(i--){
data[i] = {
column_1: 'column 1, row ' + i,
column_2: 'column 2, row ' + i,
column_3: 'column 3, row ' + i,
column_4: 'column 4, row ' + i,
column_5: 'column 5, row ' + i
};
};
Set the grid's options.
var options = {
enableColumnReorder: false,
enableGridNavigation: false
};
When the DOM's ready, instantiate a new SlickGrid.
Since you're obviously using jQuery, you can just call all this as a .ready() handler.var grid = new Slick.Grid('#grid', data, columns, options);