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.
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
}
);
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.
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 | 100 | 100 | 100 | |||||||||
Kryogenix sorttable | none | 100 | 100 | 100 | |||||||||
WebFX Sortable Table | none | 100 | 100 | 100 | |||||||||
Joost de Valk's Table sorting Javascript | none | 100 | 100 | 100 | |||||||||
Frequency Decoder Unobtrusive Table Sort Script | none | 100 | 100 | 100 | |||||||||
Javascript Kit Table Sorter | none | 100 | 100 | 100 | |||||||||
Javascript Toolkit Table Sorting, Filtering, etc. | none | 100 | 100 | 100 | |||||||||
PhatFusion Sortable Table | MooTools | 100 | 100 | 100 | |||||||||
Standardista Table Sorting | none | 100 | 100 | 100 | |||||||||
Eric Pascarello's Javascript Sortable Table | none | 100 | 100 | 100 | |||||||||
WAE Technologies | none | -100 | 100 | 100 | |||||||||
DHTML Goodies Table Widget | none | 100 | 100 | 100 | |||||||||
Brain Jar Table Sort | none | 100 | 100 | 100 | |||||||||
Dynamic Table | none | 100 | 100 | 100 | |||||||||
Brixon Table Sort / Page | none | 100 | 100 | 100 | |||||||||
JS Vault Sorttable | none | 100 | 100 | 100 | |||||||||
sortTableRows | none | 100 | 100 | 100 | |||||||||
Marko Mrdjenovic's SortedTable | none | 100 | 100 | 100 | |||||||||
TableKit | none | 100 | 100 | 100 | |||||||||
Nomadic Functions Table Sort | none | 100 | 100 | 100 | |||||||||
Elite Zebra Tables 2.0 | none | 100 | 100 | 100 |