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.

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.

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.