FlexiTable- A jQuery Plugin Converting Dynamic JSON With Nested Objects To HTML Table

JSON or JavaScript Object Notation is a simple human readable data format that is mostly used to transfer/store data in web applications. It might happened in a project that you deal with JSON data received from back-end API, where you need to convert the data into an easy to read HTML table to display data for users. The problem comes when the JSON contains dynamic fields and nested objects that makes it difficult to parse the data and construct a table structure showing the data. For that purpose I developed a tiny plugin that generate HTML table of JSON data loaded from server. I put the

In this article, I’ll be introducing Flexitable, a jQuery plugin that I developed recently to convert complex JSON data into an HTML table easily. Let’s get started.

Assume we have following JSON array :

[
{
    "Id" : 1,
    "Name" : "Alex Jeferson",
    "Mathematics" : {
        "S1" : 14,
        "S2" : 18
    },
    "Chemistry" : {
        "S1" : 19,
        "S2" : 17
    },
    "Average" : 17
},
{
    "Id" : 2,
    "Name" : "Joe Mesh",
    "Age" : 29,
    "Mathematics" : {
        "S1" : 10,
        "S2" : 12
    },
    "Chemistry" : {
        "S1" : 14,
        "S2" : 18
    },
    "Average" : 15
}
]

As you can see , records in the above JSON data contain fields Mathematics and Chemistry that their value are an Object instead of primitives. To show these kind of fields it is better to have parent and sub-header structure in order to make data easy to read and understandable. So, we need to display it in our front-end like below table :

ID	Name	Mathematics		Chemistry		Average
		Semester 1	Semester 2	Semester 1	Semester 2
5005	Alex Jeferson	14	18	19	17	17
5016	Joe Mesh	10	12	14	18	15

With Flexitable it’s a peace of a cake to construct such tables. Let’s go to the point, the Flexitable.

The Flexitable can be called on any container element such as Div to inject the desired table into it. It also can be called as stand alone function returning the Table DOM element :

// Call Flexitable on a container to embed the table in the 
$("#targetDiv").flexiTable({...});

// Calling the Flexitable as a stand alone function
var dataTable;
$.flexiTable({...}).then((generatedTable) => { dataTable = generatedTable;});

Flexitable accepts Json as Javascript array and also it is able to fetch the JSON from a given URL :

// calling Flexitable with a java script json array
var jsonData = [{"id" : 1, "Name" : "Sam"}, {"id" : 2, "Name" : "Joe"}];
$("#targetDiv").flexiTable({
               data : jsonData
});


// calling Flexitable with a url
var dataURL= "https://pathTOUrl.com/json";
$("#targetDiv").flexiTable({
               data : dataURL
});

You may need the table structure to place records cell vertically like below picture :

Flexitable has solution for this need. put the verticalHeaders parameter in options :

var jsonData = [{"id" : 1, "Name" : "Sam"}, {"id" : 2, "Name" : "Joe"}];
$("#targetDiv").flexiTable({
               data : jsonData,
               verticalHeaders : true
});

In case that you use the plugin to retrieve data from a URL, you can set a refresh period option in millisecond to retrieve the data periodically :

var jsonData = [{"id" : 1, "Name" : "Sam"}, {"id" : 2, "Name" : "Joe"}];
$("#targetDiv").flexiTable({
               data : jsonData,
               verticalHeaders : true,
               refreshPriod : 30000
});

The titles name can be customized by mapping their path to a name :

var jsonData = [{"id" : 1, "Name" : "Joe", grade : { "Math" : 11, "Sport" : 15 }},
                {"id" : 2, "Name" : "Sam", grade : { "Math" : 12, "Sport" : 18 }}];
$("#targetDiv").flexiTable({
               data : jsonData,
               verticalHeaders : true,
               refreshPriod : 30000,
               columnsTitle : {'id' : 'Student ID', 'grade.Math' : 'Mathematics'}
});

For fields containing an array, you can separate array items in the cell using arraySeparator :

var jsonData = [{"id" : 1, "Name" : "Joe", absence: ["12th may", "5th jun"]},
                {"id" : 2, "Name" : "Sam", absence: ["13th Sep", "1st May"]];
$("#targetDiv").flexiTable({
               data : jsonData,
               verticalHeaders : true,
               refreshPriod : 30000,
               arraySeparator : ", "
});

RTL or LTR direction of the table can be defined using rtl parameter :

var jsonData = [{"id" : 1, "Name" : "Joe", absence: ["12th may", "5th jun"]},
                {"id" : 2, "Name" : "Sam", absence: ["13th Sep", "1st May"]];
$("#targetDiv").flexiTable({
               data : jsonData,
               verticalHeaders : true,
               refreshPriod : 30000,
               rtl: true
});

Finally the Id and CSS class of the table :

var jsonData = [{"id" : 1, "Name" : "Joe", absence: ["12th may", "5th jun"]},
                {"id" : 2, "Name" : "Sam", absence: ["13th Sep", "1st May"]];
$("#targetDiv").flexiTable({
               data : jsonData,
               verticalHeaders : true,
               refreshPriod : 30000,
               tableID: "reportTable",
               tableCssClass : "report colored"
});

If you have JSON array of primitive type without key-value pair, the table sets header title for them by indexing staring from zero (0). Then you can choose a custom title for them using their index and columnsTitle paramter :

var jsonData = [["Alex",12,13],["David",15,14],["Jone",13,11]];
$("#targetDiv").flexiTable({
               data : jsonData,
               verticalHeaders : true,
               refreshPriod : 30000,
               columnsTitle : {'0' : 'Student Name', '1' : 'Mathematics', '2' : 'Sport'}
});

At last but not the least, import the plugin in npm :

npm i jqueryflexitable

And in HTML page :

<script src="jquery.flexitable.js" ></script>

That’s it. Hope you find this jquery plugin useful. Thanks for reading. ☺