jQuery convert JSON to grid plugin – Columns

Take a look at the Columns plugin – a jQuery convert JSON to grid solution. Turn JSON data into filterable and sortable HTML tables. Easy!

Columns – a jQuery convert JSON to grid plugin

Columns is a powerful, ajax-ed jQuery plugin, that converts JSON data into a filterable, searchable and paginated data grids.

This plugin is an easy way of creating JSON data into nice looking HTML tables. Just provide the data.

Usage

Add the Column plugin and jQuery to the page:

<script src="jquery.min.js"></script>
<script src="js/jquery.columns.min.js"></script>

Add a pre-built theme (or create your own):

<link rel="stylesheet" href="css/classic.css">

We also need an empty div element, to put the dynamic content:

<div id="columns"></div>

Finally, we can initialize Columns plugin and render some data:

$(document).ready(function() {
  var json = [{"col1":"row1", "col2":"row1", "col3":"row1"},
    {"col1":"row2", "col2":"row2", "col3":"row2"}]; 

  $('#columns').columns({data:json});
});

Docs, demo and download:

http://michaeleisenbraun.com/columns

See the “convert JSON to grid” plugin @GitHub:

https://github.com/eisenbraun/columns

See also:

Convert json data to a html table (Stackoverflow)

Enjoy!