SlickGrid

What it is

Quite simply, SlickGrid is a JavaScript grid/spreadsheet component.

Some highlights:

• Virtual scrolling/rendering (hundreds of thousands of rows)
• Extremely fast rendering speed
• Configurable & customizable
• Full keyboard navigation
• Resizable/reorderable columns
• Custom cell formatters & editors
• Support for editing and creating new rows.
• "GlobalEditorLock" to manage concurrent edits in cases where multiple Views on a page can edit the same data.

Why?

This is pretty much a work-in-progress prototype, so I don't feel like spending a lot of time documenting it at this stage. I do think it is quite promising though, so I'm putting it up for everybody to see and play with. In its current form, it satisfies nearly all of the requirements for the project I am working on where I am utilizing it in an MVC application, so I'm not sure how much time I can afford on turning SlickGrid into something that would work for everybody. If you are willing to help out - let me know, and I'll add you to the project so that you can contribute.

Discussion

I started a small discussion with a call for contributors on the jQuery Google Group - http://groups.google.com/group/jquery-en/browse_thread/thread/e533efae60ec8166

Examples

Basic use: http://slickgrid.googlecode.com/svn/trunk/examples/example1-simple.html

Adding some formatting: http://slickgrid.googlecode.com/svn/trunk/examples/example2-formatters.html

Turning it into a spreadsheet: http://slickgrid.googlecode.com/svn/trunk/examples/example3-editing.html

Using a simple Model (filtered data view) to drive the grid: http://slickgrid.googlecode.com/svn/trunk/examples/example4-model.html

Adding tree functionality (expand/collapse) to the grid: http://slickgrid.googlecode.com/svn/trunk/examples/example5-collapsing.html

AJAX-loading data (shows all Apple-related Digg stories): http://slickgrid.googlecode.com/svn/trunk/examples/example6-ajax-loading.html

A more comprehensive test page: http://slickgrid.googlecode.com/svn/trunk/examples/grid.html

What makes it different

Virtual rendering

SlickGrid utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance. In fact, there is no difference in performance between working with a grid with 10 rows versus a 100'000 rows. This is achieved through virtual rendering where only what's visible on the screen plus a small buffer is rendered. As the user scrolls, DOM nodes are continuously being created and removed. These operations are highly tuned to provide optimal performance under all browsers (on my laptop, FireFox 3.0.7 takes less than 1ms to render one row). The grid also adapts to the direction and speed of scroll to minimize the number of rows that need to be swapped out and to dynamically switch between synchronous and asynchronous rendering.

It does a few other things to maximize performance, such as dynamically generating and updating CSS rules, so that resizing a column does not change the grid DOM tree and only causes one reflow, and loading cell editors asynchronously to maximize keyboard navigation speed.

Grid vs Data

The key difference is between SlickGrid and other grid implementation I have seen (jqGrid, DataTables, TableSorter, etc) is that they focus too much on being able to understand and work with data (search, sort, parse, ajax load, etc.) and not enough on being a better "grid" (or, in case of editable grids, a spreadsheet). It's great if all you want to do is "spruce up" an HTML TABLE or slap a front end onto a simple list, but too inflexible for anything else.

Data is complicated. It has business rules. It has non-intrinsic properties. Editing one property of an element can lead to cascading changes modifying other properties or even other elements. It has dependencies. What I'm saying, is that dealing with data is best left to the developer using the grid control. Trying to fit all of that into the grid implementation and API will only limit its applicability and add considerable bloat.

SlickGrid takes a different approach. In the simplest scenario, it accesses data through an array interface (i.e. using "dataitem" to get to an item at a given position and "data.length" to determine the number of items), but the API is structured in such a way that it is very easy to make the grid react to any possible changes to the underlying data.

Filtered DataView (Model)

... coming soon ...

Editor control

... coming soon ...

API

function SlickGrid($container,data,columns,options) { ... }

Column definition options:

Options:

Methods:

Events:

Documentation

See comments at the top of http://slickgrid.googlecode.com/svn/trunk/slick.grid.js.