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 |