ℹ️ Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0.1 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://mshaeri.com/blog/flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table/ |
| Last Crawled | 2026-04-09 21:08:06 (3 days ago) |
| First Indexed | 2023-03-18 11:44:10 (3 years ago) |
| HTTP Status Code | 200 |
| Meta Title | FlexiTable- A jQuery Plugin Converting Dynamic JSON With Nested Objects To HTML Table – A Developer Bird Blog |
| Meta Description | professional software developers blog. post about software engineering |
| Meta Canonical | null |
| Boilerpipe Text | Post Views:
2,522
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 showing the json data with nested objects vertically
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. ☺ |
| Markdown | [Skip to content](https://mshaeri.com/blog/flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table/#content)
April 6, 2026
[A Developer Bird Blog](https://mshaeri.com/blog/)
- [Home](https://mshaeri.com/blog)
- [Python](https://mshaeri.com/blog/category/programming/python/)
- [Java](https://mshaeri.com/blog/category/programming/java/)
- [Go](https://mshaeri.com/blog/category/programming/go/)
- [AI](https://mshaeri.com/blog/category/computer-science/ai/)
- [SQL](https://mshaeri.com/blog/category/programming/sql/)
Menu
- [Home](https://mshaeri.com/blog)
- [Python](https://mshaeri.com/blog/category/programming/python/)
- [Java](https://mshaeri.com/blog/category/programming/java/)
- [Go](https://mshaeri.com/blog/category/programming/go/)
- [AI](https://mshaeri.com/blog/category/computer-science/ai/)
- [SQL](https://mshaeri.com/blog/category/programming/sql/)
[ajax](https://mshaeri.com/blog/category/programming/javascript/ajax/) / [Computer Science](https://mshaeri.com/blog/category/computer-science/) / [html table](https://mshaeri.com/blog/category/programming/html-table/) / [JavaScript](https://mshaeri.com/blog/category/programming/javascript/) / [jQuery](https://mshaeri.com/blog/category/programming/jquery/) / [json](https://mshaeri.com/blog/category/programming/json/) / [Programming](https://mshaeri.com/blog/category/programming/) / [report](https://mshaeri.com/blog/category/programming/report/)
# FlexiTable- A jQuery Plugin Converting Dynamic JSON With Nested Objects To HTML Table
by [Bird](https://mshaeri.com/blog/author/mostafa_shaeri_tj/)
[January 21, 2023January 23, 2023](https://mshaeri.com/blog/flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table/)
Post Views: 2,522
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](https://github.com/birddevelper/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](https://github.com/birddevelper/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 :
[](https://m-shaeri.ir/blog/wp-content/uploads/2023/01/Flexitable.jquery.plugin.to_.display.nested.json_.object.dynamic.jpg)
Flexitable showing the json data with nested objects vertically
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. ☺
Tagged[convert](https://mshaeri.com/blog/tag/convert/)[html](https://mshaeri.com/blog/tag/html/)[java script](https://mshaeri.com/blog/tag/java-script/)[jquery](https://mshaeri.com/blog/tag/jquery/)[json](https://mshaeri.com/blog/tag/json/)[nested json object](https://mshaeri.com/blog/tag/nested-json-object/)[table](https://mshaeri.com/blog/tag/table/)
## Post navigation
[Previous Post Previous post: Securing And Rate Limiting Endpoints With Spring Cloud Gateway, Spring Security And JWT](https://mshaeri.com/blog/securing-and-rate-limiting-endpoints-with-spring-cloud-gateway-spring-security-and-jwt/)
[Next Post Next post: MockiMouse, Easy To Use Mock Server To Build Fake Dynamic API](https://mshaeri.com/blog/mockimouse-an-easy-to-use-mock-server-to-build-fake-dynamic-api/)
#### Bird
[View all posts by Bird →](https://mshaeri.com/blog/author/mostafa_shaeri_tj/ "Bird")
### You might also like
[](https://mshaeri.com/blog/spring-rest-framework-a-project-inspired-by-django-rest-framework/)
### [Spring Rest Framework (SRF) A Project Inspired by Django Rest Framework](https://mshaeri.com/blog/spring-rest-framework-a-project-inspired-by-django-rest-framework/ "Spring Rest Framework (SRF) A Project Inspired by Django Rest Framework")
[December 8, 2024July 14, 2025](https://mshaeri.com/blog/spring-rest-framework-a-project-inspired-by-django-rest-framework/)
[](https://mshaeri.com/blog/gradient-descent-algorithm-for-linear-regression/)
### [Gradient Descent Algorithm for Linear Regression](https://mshaeri.com/blog/gradient-descent-algorithm-for-linear-regression/ "Gradient Descent Algorithm for Linear Regression")
[April 1, 2016January 8, 2022](https://mshaeri.com/blog/gradient-descent-algorithm-for-linear-regression/)
[](https://mshaeri.com/blog/learn-graph-theory-with-graphtea/)
### [Learn Graph Theory with GraphTea](https://mshaeri.com/blog/learn-graph-theory-with-graphtea/ "Learn Graph Theory with GraphTea")
[September 17, 2014September 20, 2025](https://mshaeri.com/blog/learn-graph-theory-with-graphtea/)
### Leave a Reply [Cancel reply](https://mshaeri.com/blog/flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table/#respond)
#### Welcome
I’m a software developer with a focus on web development, software architecture and database optimization. I occasionally share insights and practical tips from my work on this blog.
**My projects on github :**
- [** Dequest](https://github.com/birddevelper/dequest)
- [** Azure IoTHub API](https://github.com/birddevelper/azure-iot-hub-api)
- [** Spring Rest Framework](https://github.com/nikanique/spring-rest-framework)
- [** Django Query To Table](https://github.com/birddevelper/django-query-to-table)
- [** Salmos Report](https://github.com/birddevelper/salmos-report-spring-boot-starter)
- [** Flask Report](https://github.com/birddevelper/Flask_SqlAlchemy_Report)
- [** GomoLogin](https://github.com/birddevelper/flexitable)
- [** Flexitable](https://github.com/birddevelper/flexitable)
- [** MockiMouse Mock Server](https://github.com/birddevelper/mockimouse)
#### Recent Posts
- [Understanding RAG, Agentic AI, and MCP By a Real-World AI Assistant Example](https://mshaeri.com/blog/understanding-rag-agentic-ai-and-mcp-by-a-real-world-ai-assistant-example/)
- [Speed Up Python With C Functions](https://mshaeri.com/blog/speed-up-python-with-c-functions/)
- [Solving Azure Blob Trigger Delays by Switching to Event Grid](https://mshaeri.com/blog/azure-storage-blob-triggers-vs-event-grid-the-lesson-i-learned-in-production/)
- [Make Python API Calls a Breeze with dequest Declarative Client](https://mshaeri.com/blog/make-python-api-calls-a-breeze-with-dequest-declarative-client/)
- [Design Patterns I use in External API Integration in Python](https://mshaeri.com/blog/design-patterns-i-use-in-external-service-integration-in-python/)
#### Recent Comments
- [vans](https://open-claw.online/) on [Understanding RAG, Agentic AI, and MCP By a Real-World AI Assistant Example](https://mshaeri.com/blog/understanding-rag-agentic-ai-and-mcp-by-a-real-world-ai-assistant-example/#comment-2639)
- Anthony Nguyen on [Design Patterns I use in External API Integration in Python](https://mshaeri.com/blog/design-patterns-i-use-in-external-service-integration-in-python/#comment-2573)
- Angila on [Understanding RAG, Agentic AI, and MCP By a Real-World AI Assistant Example](https://mshaeri.com/blog/understanding-rag-agentic-ai-and-mcp-by-a-real-world-ai-assistant-example/#comment-2540)
- [Bird](http://mshaeri.com/) on [Solving Azure Blob Trigger Delays by Switching to Event Grid](https://mshaeri.com/blog/azure-storage-blob-triggers-vs-event-grid-the-lesson-i-learned-in-production/#comment-2266)
- Andrew Hill on [Solving Azure Blob Trigger Delays by Switching to Event Grid](https://mshaeri.com/blog/azure-storage-blob-triggers-vs-event-grid-the-lesson-i-learned-in-production/#comment-2252)
#### Archives
- [October 2025](https://mshaeri.com/blog/2025/10/)
- [September 2025](https://mshaeri.com/blog/2025/09/)
- [July 2025](https://mshaeri.com/blog/2025/07/)
- [April 2025](https://mshaeri.com/blog/2025/04/)
- [March 2025](https://mshaeri.com/blog/2025/03/)
- [February 2025](https://mshaeri.com/blog/2025/02/)
- [December 2024](https://mshaeri.com/blog/2024/12/)
- [November 2024](https://mshaeri.com/blog/2024/11/)
- [August 2024](https://mshaeri.com/blog/2024/08/)
- [April 2024](https://mshaeri.com/blog/2024/04/)
- [March 2024](https://mshaeri.com/blog/2024/03/)
- [November 2023](https://mshaeri.com/blog/2023/11/)
- [March 2023](https://mshaeri.com/blog/2023/03/)
- [February 2023](https://mshaeri.com/blog/2023/02/)
- [January 2023](https://mshaeri.com/blog/2023/01/)
- [June 2022](https://mshaeri.com/blog/2022/06/)
- [May 2022](https://mshaeri.com/blog/2022/05/)
- [February 2022](https://mshaeri.com/blog/2022/02/)
- [January 2022](https://mshaeri.com/blog/2022/01/)
- [November 2021](https://mshaeri.com/blog/2021/11/)
- [October 2021](https://mshaeri.com/blog/2021/10/)
- [May 2021](https://mshaeri.com/blog/2021/05/)
- [April 2021](https://mshaeri.com/blog/2021/04/)
- [June 2020](https://mshaeri.com/blog/2020/06/)
- [November 2019](https://mshaeri.com/blog/2019/11/)
- [April 2016](https://mshaeri.com/blog/2016/04/)
- [September 2014](https://mshaeri.com/blog/2014/09/)
- [April 2014](https://mshaeri.com/blog/2014/04/)
- [February 2014](https://mshaeri.com/blog/2014/02/)
- [January 2014](https://mshaeri.com/blog/2014/01/)
#### Categories
Copyright © 2026 [A Developer Bird Blog](https://mshaeri.com/blog/ "A Developer Bird Blog"). Powered by [WordPress](https://wordpress.org/) and [Bam](https://themezhut.com/themes/bam/). |
| Readable Markdown | Post Views: 2,522
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](https://github.com/birddevelper/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](https://github.com/birddevelper/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 :
[](https://m-shaeri.ir/blog/wp-content/uploads/2023/01/Flexitable.jquery.plugin.to_.display.nested.json_.object.dynamic.jpg)
Flexitable showing the json data with nested objects vertically
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. ☺ |
| Shard | 116 (laksa) |
| Root Hash | 10197841126852103316 |
| Unparsed URL | com,mshaeri!/blog/flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table/ s443 |