Follow these steps to install and configure SlickGrid.

1. Download the latest zip from https://github.com/mleibman/SlickGrid
2. Extract the zip file
3. Move the SlickGrid-master folder to your Web servers document root

You should now be able to view the example pages. For example, to view the basic SlickGrid page, go to http://www.example.com/SlickGrid-master/examples/example1-simple.html.

Following is an example of how to add a new column to the example1-simple.html table.

1. Open the example1-simple.html file and save the file as stage.html
2. Go to http://www.example.com/SlickGrid-master/examples/stage.html to view stage.html in a browser

Add a column to the table, in the stage.html file, add the following:

var columns = [
 {id: "title", name: "Title", field: "title"},
 {id: "new-column", name: "New Column", field: "NewColumn"}
];

List some data in the New Column:

$(function () {
 var data = [];
 for (var i = 0; i < 500; i++)
  { data[i] =
   {
    title: "Task " + i,
    NewColumn: "test"
  };
 }
} 

When first getting comfortable with SlickGrid, we typically start by bringing up http://www.example.com/SlickGrid-master/examples/stage.html in a browser. However, we probably will need to use SlickGrid in some other directory, such as http://www.example.com/stage.html. Let move stage.html to the document root of our Web server. If we request the page is a browser, the grid will not work. We need to make some adjustments to the markup in the stage.html file. Basically, we are just adding SlickGrid-master to the directory path for the CSS and JS files.

<link rel="stylesheet" href="SlickGrid-master/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="SlickGrid-master/css/smoothness/jquery-ui-1.8.16.custom.cs" type="text/css"/>
<link rel="stylesheet" href="SlickGrid-master/css/examples.css" type="text/css"/>
<script src="SlickGrid-master/lib/jquery-1.7.min.js"></script>
<script src="SlickGrid-master/lib/jquery.event.drag-2.2.js"></script>
<script src="SlickGrid-master/slick.core.js"></script>
<script src="SlickGrid-master/slick.grid.js"></script>

Add this script to enable the feature to drag columns around the grid.

<script src="SlickGrid-master/lib/firebugx.js"></script>
<script src="SlickGrid-master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="SlickGrid-master/lib/slick.formatters.js"></script>
<script>
  function formatter(row, cell, value, columnDef, dataContext) {
    return value;
  }
  var options = {
    editable: false,
    enableAddRow: false,
    enableCellNavigation: true
  };
</script>

If we want to set the default width of a column, add width to the var column.

  var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter}
  ];

To add drop-down menu's to the header, add the following markup:

<link rel="stylesheet" href="SlickGrid-master/plugins/slick.headermenu.css" type="text/css">
<style>
.slick-header-menu {
  border: 1px solid #718BB7;
  background: #f0f0f0;
  padding: 2px;
  -moz-box-shadow: 2px 2px 2px silver;
  -webkit-box-shadow: 2px 2px 2px silver;
  min-width: 100px;
  z-index: 20;
}
.slick-header-menuitem {
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.slick-header-menuitem:hover {
  border-color: silver;
  background: white;
}
.slick-header-menuitem-disabled {
  border-color: transparent !important;
  background: inherit !important;
}
.icon-help {
  background-image: url(../images/help.png);
}
</style>

<script src="SlickGrid-master/plugins/slick.headermenu.js"></script>

for (var i = 0; i < columns.lenght; i++) {
  columns[1].header = {
    menu: {
      items: [
        {
           iconImage: "../images/sort-asc.gif",
           title: "Sort Ascending",
           command: "sort-asc"
        }
      ]
    }
  };
}