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:

When the device width is less that 900 pixels, the "Security", "Total Cost" and "Gain" columns are dropped. Also the height of the table rows is increased to 44 pixels to allow for a bigger tap target. In addition, the table font-size is increase to 16px for better readability.

When the device width is less that 500 pixels, the "Price Paid" and "Gain %" columns are dropped:

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, row height = 32px, font size = 14px
   • Medium (500-899): Drops "Security", "Total Cost" and "Gain" (showing 6 columns), row height = 44px, font size = 16px
   • Narrow (0-499): Drops "Price Paid" and "Gain %" (showing only 4 columns), row height = 44px, font size = 16px
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. 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	Naresh Bhatia	Done	Run
2	None	HTML table	Y	Y	Y	Y	Y	Y	Naresh Bhatia	Done	Run
3	None	HTML table - iScroll	Y	Y	Y	Y	Y	Y	Naresh Bhatia	Done	Run
4	jQuery Mobile	HTML table	Y	Y	Y	Y	Y	Y	Naresh Bhatia	Done	Run
5	jQuery Mobile	HTML table - iScroll	Y	Y	Y	Y	Y	Y	Naresh Bhatia	Done	Run
6	jQuery Mobile	jqGrid	Y	N	N	Y	Y	Y	Chetan Rane	In Progress	Run	R2: Column alignments are not correct, R3: Negative gain and gain % are not formatted correctly
7	jQuery Mobile	SlickGrid							Sravan Rekandar	In Progress	Run
8	jQuery Mobile	DataTables							Andrew Rota	In Progress	Run
9	No Framework	Archfirst Grid							Manish Shanker	Not Started	Run

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	Y	Y	Y	N	?	Y	N	Y	N
7	jQuery Mobile	SlickGrid
8	jQuery Mobile	DataTables
9	No Framework	Archfirst Grid