mooGrid

mooGrid is a data table enhancement that transforms a regular data table into a scrollable, sortable data grid with fixed headers and footers. It uses the MooTools library.

How to Use mooGrid

You need the following files to make mooGrid work:

You need to instantiate mooGrid like this:

var myGrid = new mooGrid( str tableId, // or element { gridHeight: int, // default 200 preCache: bool, // default false procIndicator: bool, // default false procStr: str, // default "Please Wait ..." noScroll: bool, // default false resize: bool, // default false select: bool, // default false hover: bool // default false } );

Why mooGrid?

There are numerous data table solutions out there. After trying several of them, I got fed up with the way each one murdered my original markup and made mincemeat out of the CSS I applied to my table. mooGrid overcomes this problem, plus it has some other advantages to boot.

How Does mooGrid Compare?

The following is a comparison mooGrid table of different sortable data grid solutions. They appear in the order in which I found them via Google.

Features Speed (milliseconds)
Name File Size Required Library Markup Data Source Valid Markup Preserves DOM/CSS Supports Major Browsers Major Data Type Sorting Custom Data Type Sorting Resizable Columns Select / Hover Effects Initialization 1st Sort Subsequent Sort
Note: See key below for more information about the column headers.
mooGrid MooTools yes yes yes yes yes yes yes yes 100 100 100
Kryogenix sorttable none yes no yes yes no no no no 100 100 100
WebFX Sortable Table none yes yes no yes no no no no 100 100 100
Joost de Valk's Table sorting Javascript none yes yes no yes no no no no 100 100 100
Frequency Decoder Unobtrusive Table Sort Script none yes yes no yes no no no no 100 100 100
Javascript Kit Table Sorter none yes no no yes no no no no 100 100 100
Javascript Toolkit Table Sorting, Filtering, etc. none yes yes yes yes no no no no 100 100 100
PhatFusion Sortable Table MooTools yes yes yes yes no no no no 100 100 100
Standardista Table Sorting none yes yes no yes no no no no 100 100 100
Eric Pascarello's Javascript Sortable Table none yes yes yes yes no no no no 100 100 100
WAE Technologies none yes no yes yes no no no no -100 100 100
DHTML Goodies Table Widget none yes no no yes no no no no 100 100 100
Brain Jar Table Sort none yes yes no yes no no no no 100 100 100
Dynamic Table none no yes no yes no no no no 100 100 100
Brixon Table Sort / Page none no yes no yes no no no no 100 100 100
JS Vault Sorttable none yes yes no yes no no no no 100 100 100
sortTableRows none yes yes yes yes no no no no 100 100 100
Marko Mrdjenovic's SortedTable none yes yes yes yes no no no no 100 100 100
TableKit none yes yes yes yes no no no no 100 100 100
Nomadic Functions Table Sort none yes yes no yes no no no no 100 100 100
Elite Zebra Tables 2.0 none yes yes no yes no no no no 100 100 100

Key

File Size:
The file size of the table sorting script and accompanying CSS themselves; it does not include Javascript library size.
Markup Data Source:
Whether or not the table sorting script can use an existing HTML table as its data source (i.e., it is not instantiated by passing table data to Javascript).
Valid Markup:
Whether or not the original and Javascript generated markup is standards compliant.
Preserves DOM/CSS:
Whether or not the script adds, removes, or changes elements inside the table itself beyond the adding and removing of classes and the sorting of rows.
Supports Major Browsers:
Whether or not the script works as intended in current major browsers (FireFox, Internet Explorer 6+).
Major Data Type Sorting:
Whether or not the script supports basic data types: strings, numbers, and dates.
Custom Data Type Sorting:
Whether or not the script can be extended to sort custom data types.
Resizable Columns
Whether or not the script allows resizing of data columns.
Initialization Time:
The number of milliseconds it takes from page load to the script to fully initialize. Based on a test table of 100 rows.
1st Sort Time:
The number of milliseconds it takes for rows to be sorted when a column header is clicked for the first time. Based on a test table of 100 rows.
Subsequent Sort Time:
The number of milliseconds it takes for rows to be sorted when a column header is clicked for the first time. Based on a test table of 100 rows.
Required Library:
The required Javascript library or libraries necessary to run the script.