JSON Data To HTML Table Converter - jQuery FlexiTable

Work in a field that deals with data from an API? Want to convert that data into an HTML table so it's easier for you or your users to read? Need a quick way to work with JSON data without having to write your own parser code? If you answered yes to any of these questions, then this jQuery plugin is for you.

One of the most common uses for JSON (JavaScript Object Notation) is to share structured data between two applications. In this article, I'll be introducing a fresh new jQuery plugin that easily convert complex JSON data into an HTML table with a single JS call. Let's get started.

See Also:

• 10 Best Table Export Plugins In JavaScript
• 10 Best Online JSON Data Converters In JavaScript

How to use it:

1. Load the minified version of the jQuery jsontotable.js plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.jsontotable.min.js" ></script>

2. Create a container to hold the HTML table.

<div id="tableContainer"></div>

3. Initialize the plugin on that container and specify the data source that should be converted into a table.

$("#tableContainer").flexiTable({
  data : [
    [ "a", "b", "c" ],
    [ "m", "n", "o" ],
    [ "x", "y", "z" ]
  ],
});

4. You can also fetch JSON data from external data sources via AJAX.

$("#tableContainer").flexiTable({
  data : '/path/to/your/data/',
  refreshPriod: null, // refetch data from data source
});

5. Assign a unique ID and/or CSS class to the table.

$("#tableContainer").flexiTable({
  data : yourData,
  tableCssClass : 'mytable',
  tableId : 'exampleTable',
});

6. Customize the separators between items. Default: ', '.

$("#tableContainer").flexiTable({
  data : yourData,
  arraySeperator : ', '
});

7. Determine whether to enable RTL mode. Default: false.

$("#tableContainer").flexiTable({
  data : yourData,
  rtl : true,
});

8. Determine whether to enable RTL mode. Default: false.

$("#tableContainer").flexiTable({
  data : yourData,
  rtl : true,
});

9. Cusotmize the column titles.

$("#tableContainer").flexiTable({
  data : yourData,
  columnsTitle :{
    "Name" : "Full Name",
     "Id" : "Student ID",
     "Overal.S1" : "Autumn Semester",
     "Overal.S2" : "Spring Semester",
  }
});

10. Determine whether to allow vertical table headers.

$("#tableContainer").flexiTable({
  data : yourData,
  verticalHeaders : true,
});

11. Specify the the character(s) between array items in cells.

$("#tableContainer").flexiTable({
  data : yourData,
  arraySeparator : ', ',
});

Changelog:

2023-08-14

• v1.2.7

2023-04-11

• Update jquery.flexitable.js

2023-01-20

• added arraySeparator option

2023-01-20

• add vertical headers orientation feature

2023-01-20

• add checking availability of columnsTitle

2023-01-18

• add custom column title

2023-01-17

• change function name to flexiTable

2022-12-30

• Update jquery.flexitable.js

2022-12-07

• check empty string in loadData

---

This awesome jQuery plugin is developed by birddevelper. For more Advanced Usages, please check the demo page or visit the official website.