SlickGrid Getting Started

Although the source of the first example is self-explanatory, it's worth to point out the basics of SlickGrid. The following line:

var slickgrid = new Slick.Grid("#node", rows, columns, options);

initializes -but doesn't display- SlickGrid, asigning its interface to the slickgrid var. Now we can use slickgrid.someMethod() in order to interact with it.

Node

"#node" points to the HTML element where the grid should appear, typically being an empty <div>.

Rows

rows is an array of data objects. Example:

var rows = [
    {
        field_1: "value1",
        field_2: "value2"
    }, {
        field_1: "value3",
        field_2: "value4"
    }
];

Providing data to the grid is explained in more detail here

As it is passed passed by reference to the Slick.Grid() method, you can add and remove data objects to it without having to pass them again, but just refreshing SlickGrid's data model and view:

slickgrid.updateRowCount();
slickgrid.render();

The only exception to this is when deleting or replacing all data objects from rows:

slickgrid.setData(rows); // A different, empty or sorted array.
slickgrid.updateRowCount();
slickgrid.render();

DataView prevents having to modify the data for sorting and filtering purposes.

Columns

columns is an array of objects, having at least the following fields:

• name - The name to be displayed in the view.
• field - The field name used in the data row objects.
• id - An unique identifier for each column in the model, allowing to set more than one column reading the same field.

Other fields include:

    resizable
    sortable
    minWidth
    rerenderOnResize
    headerCssClass

Example:

var columns = [
    {
        name: "Address",
        field: "address"
        id: "address", // In most cases field and id will have the same value.
        sortable: true
    }, 
    {
        name: "Rating, in %",
        field: "rating" // This and the following column read the same data, but can present it in a different way.
        id: "rating_percent",
        resizable: false
    }, 
    {
        name: "Rating, in stars",
        field: "rating"
        id: "rating_stars"
    }
];

Options

enableCellNavigation: true allows keyboard navigation. The .active CSS property defines the appearance of the currently selected cell.

These are all the currently available options.

Events

An example:

slickgrid.onDblClick.subscribe(function(e, args){
    var cell = slickgrid.getCellFromEvent(e);
    var row = cell.row;
    var column = slickgrid.getColumns()[cell.cell]; // object containing name, field, id, etc
});

To date, these following events are available. They can be figured out by browsing the handleDblClick, handleKeyDown, etc, source, included in slick.grid.js.

Basic sorting

It can be achieved by listening the onSort method:

    slickgrid.onSort.subscribe(function(e, args){ // args: sort information. 

        var field = args.sortCol.field;

        rows.sort(function(a, b){
            var result = 
                a[field] > b[field] ? 1 :
                a[field] < b[field] ? -1 :
                0
            ; 

            return args.sortAsc ? result : -result;

        });

        slickgrid.setData(rows);
        slickgrid.updateRowCount();
        slickgrid.render();         
    });

DataView

It allows to sort and filter the data without modifying it.