This package provides a "product comparison matrix" generator using HTML 5, JQuery and Bootstrap. The data for the table can be provided by a server backend (AJAX) or by a simple .json static file.

• Automatically generates an interactive product comparison table:
  • Product features grouped by categories
  • Collapsible categories
  • Optional feature tips and detailed descriptions
  • Supports HTML tags inside the tables
  • Supports images (via img tags)
  • No limits for the amount of products compared.
  • No limits for the amount of features compared.
  • Autoformat table cells based on the content
• Customization options:
  • Autoformat criterias are defined in the data set (no HTML or JavaScript editing)
  • Categories are defined in the data set
  • Categories collapsing is defined in the data set
  • Number of columns to be displayed is defined in the data set
  • Extra table customization options via a dedicated css
• Dataset in the JSON format for maximum compatiblity and integration
• Dataset is load by AJAX requests:
  • Can be provided by a server backend (PHP, ASP, etc...)
  • or by a static .JSON file
• Bootstrap 3.x compliant CSS styles
• Bootstrap.js popover plugin for product feature tips
• JQuery 1.1x compliant
• Included in the package
  • Sample HTML file
  • Sample JSON dataset file
  • Sample Excel template for data table generation (with instructions)
  • Bootstrap 3.3.6
  • JQuery 1.11.3

Some browsers block the access of local .json files. To be able to load the data you will need to specify the full URL (example: http://www.mysite.com/mypage/mydata.json) of the json data file at the ctDataURL configuration parameter in the ct-tablegen.js script.

Check this live example

• From the GitHub repository
• From the developer website danbp.org

Edit the ct-tablegen.js script and configure the full URL of the json file path. There's a sample json file inside the data folder from this package.

var ctDataURL = "http://www.mypage.com/mydataservice/ct-Data.json";

Run the example.html file. You should see the sample table.

If your site has it's own layout framework you can get rid of all Bootstrap CSS files and replace them with yours. The pieces of Boostrap I don't recommend removing without some workouts in the code are:

• bootstrap.js: required for the popover tips in the feature list details.
• Glyphicons Halflings fonts: Used in the popover tips and in the collapsable rows icons.

This is free software distributed under the terms of the MIT license

Any questions, feel free to contact me.