mobile-grid-evaluation

The purpose of this project is to evaluate various off-the-shelf grids to determine how well they work on mobile devices. To achieve this goal, we have defined a simple set of requirements allowing us to display positions in a stock portfolio, as shown below:

Here's a more "official" set of these requirements:

1. The page should have five sections:
   • Header: Formatted as "<Framework> | <Grid>"
   • Selected position: Shows the position that was last clicked/tapped
   • Table header: Shows column headings
   • Table body: Shows positions from a supplied data file (data/positions.js)
   • Layout info: Shows which responsive layout has been selected and the window size in pixels
2. Look and feel should be as shown above.
3. Gain and Gain % numbers to be formatted as in the examples below:
   • Zero or positive: $35,000.00 - in gold color
   • Negative: ($35,000.00) - in red color
4. The table should adapt to the height of the device/browser window, taking up all the available space between the fixed sections above and below it.
5. The table should adapt to the width of the device/browser window, showing the most important columns that can fit in the available width. For the purpose of this exercise, assume three layouts:
   • Wide (900+): Shows all nine columns
   • Medium (500-899): Drops "Total Cost" and "Gain" (showing 7 columns)
   • Narrow (0-499): Drops "Symbol", "Price Paid" and "Gain %" (showing only 4 columns)
6. In case of a mobile device, the table should respond to orientation changes, conforming to the requirements described above.
7. The table header should be fixed, while the body should be scrollable.

Grids in Scope

1. Standard HTML table - use css overflow for scrolling
2. Standard HTML table - use iScroll for scrolling
3. jqGrid
4. SlickGrid
5. DataTables
6. jqPivot
7. Archfirst Grid

If you'd like to include other grids as part of this evaluation, please implement the requirements and send us a pull request.

Development

The folder structure for this project consits of several sub-folders, each focused on a particular grid. Developers wishing to contribute to this project should fork this repository and submit pull requests with their implementations.

Results (Reqirements 1-6)

Id	Fmwk	Grid	R1	R2	R3	R4	R5	R6	Owner	Status	Demo	Comments
1	None	HTML table (no scrolling)	Y	Y	Y	N	Y	Y	archfirst	Done	Run	Starter example providing desired look and feel. No attempt to make the table scrollable.
2	None	HTML table	Y	Y	Y	Y	Y	Y	???	On hold	Run	Needs work to freeze table header
3	None	HTML table - iScroll	Y	Y	Y	Y	Y	Y	???	On hold	Run	Needs work to freeze table header
4	jQuery Mobile	HTML table	Y	Y	Y	Y	Y	Y	???	On hold	Run	Needs work to freeze table header
5	jQuery Mobile	HTML table - iScroll	Y	Y	Y	Y	Y	Y	???	On hold	Run	Needs work to freeze table header
6	jQuery Mobile	jqGrid	Y	N	N	Y	N	Y	???	On hold	Run	Needs work on look & feel as well as scrolling on mobile devices.

Results (Reqirements 7 - Scrolling Table Body)

Id	Fmwk	Grid	Win7			iOS4	iOS6		Android
			Chrome	Firefox	IE9	iPhone4	iPhone5	iPad	Native	Firefox	Opera
1	None	HTML table (no scrolling)	N	N	N	N	N	N	N	N	N
2	None	HTML table
3	None	HTML table - iScroll
4	jQuery Mobile	HTML table
5	jQuery Mobile	HTML table - iScroll
6	jQuery Mobile	jqGrid