grijq

A ThemeRoller-ready data grid widget for jQuery UI that consumes normal HTML tables.

View the Project on GitHub realistschuckle/grijq

Pronunciation

Just say “gridge”. The “q” is silent.

Examples

API

Options

NameTypePurpose
widthint or ‘auto’The width of the rendered table. Default: ‘auto’
heightint or ‘auto’The height of the rendered table. Default: ‘auto’
readonlybooleanA flag to indicate that the entire table is readonly.
hasDivsbooleanA flag to indicate that cell content has div elements.
newrowfunctionA callback to indicate a new row should be added to the table.
columnsarrayAn array of objects with an entry ‘type’ to associate a column with an editor.
editorsobjectAn object of objects that provides the edit and unedit functions for an editor.

Methods

NamePurpose
selectLastRowYeah, selects the last row.

Events

NameArgumentsHappens when…
rowselected{row: DOM element}Fired when a user selects a new row.
editcomplete{val: value, cell: DOM element}Fired when a user finishes editing a cell.

Usage

  <table width="100" id="grid">
    <colgroup>
      <col width="55">
      <col width="45">
    </colgroup>
    <thead>
      <tr>
        <th>Song</th>
        <th>Length</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Code Monkey</td>
        <td>3:10</td>
      </tr>
      <tr>
        <td>Ikea</td>
        <td>3:05</td>
      </tr>
      <tr>
        <td>I Feel Fantastic</td>
        <td>3:06</td>
      </tr>
      <tr>
        <td>Mandelbrot Set</td>
        <td>4:22</td>
      </tr>
    </tbody>
  </table>
  $('#grid').grijq();

Motivation

I wanted a data grid that did not rely on JavaScript arrays and special APIs. Instead, I wanted a grid that worked from a fully rendered HTML table that something else could manage, like knockout.js. I could not find any and, so, tackling the problem like a programmer, spent a couple of days putting one together.

Notes

On Chrome and Firefox, the parsing and rendering of a table takes no real difference if your source contains a table with or without divs.

On Internet Explorer, the table with divs takes an apreciably shorter time to render.

Works well on

Does not work well on

Opera 12 for OS X
It seems that Opera 12 can’t even load the example page. The second 1000-row table seems to make it hang forever.
Internet Explorer 9 Compatibility View for Windows
It seems that IE 9 CV does not honor the CSS that allows it to truncate text in the grid cells. So make sure to use the X-UA-Compatible meta tag to notify IE that the page is ok to render as itself.