Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Like SlickGrid, but for thumbnail galleries
branch: master
Failed to load latest commit information.
README more doc added example usage
example.html added example usage
example.js added example usage added example usage
slickgriddle.js added example usage


A fast infinite thumbnail gallery based on SlickGrid.

It's compatible with Slick.DataView so it also supports filtering search and other data modifications.

It also supports the asynchronous post-render step.

How to use:

grid = new SlickGriddle(element, data, {width:cell_width, height:cell_height}, render_cell, post_render_cell)
    element: a jqueried html element
    data: an array, Slick.DataView, or anything that responds to getItem(index) and getLength()
    cell_width, cell_height: size of the grid cells in pixels as integers

    render_cell: (item, {left:left_coordinate, top:top_coordinate}) -> some_html
        A function that is called when a grid cell needs to be rendered.
        It should output the literal HTML that will be used.
        left_coordinate, top_coordinate: use these to position your grid cell
        example implementation:
        render_cell = (item, position) -> """<div style="position:absolute; top:#{}, left:#{position.left}">#{}</div>"""

        Exactly like the async post render formatters in SlickGrid, only with no columnDef argument.

If you resize the parent element and want SlickGriddle to react, call grid.resize()

If you filter your dataView and want SlickGriddle to react, add these event handlers:

dataView.onRowCountChanged.subscribe (event, args) ->

dataView.onRowsChanged.subscribe (event, args) ->
Something went wrong with that request. Please try again.