jQuery JSON to Table - Javascript

jQuery JSON to Table is a lightweight Javascript library that allows users to convert JSON data into an HTML table. If you have data in JSON format, you can easily create a dynamic HTML table using this library.

Installation

You can download the library directly from the GitHub repository. Alternatively, you can also install it via npm.

To install via npm, run the following command:

npm install jquery-json-to-table

Usage

To use the library, you need to include jQuery and the jQuery JSON to Table plugin in your HTML file. You can include them via a CDN or by downloading the files and including them locally. Here's an example of including them via a CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-json-to-table@1.0.0/dist/jquery.jsontotable.min.js"></script>

Once you have included the necessary files, you can use the library to convert your JSON data into an HTML table. Let's say you have the following JSON data:

[
  {
    "name": "John Doe",
    "age": 30,
    "gender": "male",
    "city": "New York"
  },
  {
    "name": "Jane Doe",
    "age": 27,
    "gender": "female",
    "city": "Los Angeles"
  },
  {
    "name": "Bob Smith",
    "age": 40,
    "gender": "male",
    "city": "Chicago"
  }
]

You can convert this data into an HTML table using the following code:

$(function() {
  var data = [
    {
      "name": "John Doe",
      "age": 30,
      "gender": "male",
      "city": "New York"
    },
    {
      "name": "Jane Doe",
      "age": 27,
      "gender": "female",
      "city": "Los Angeles"
    },
    {
      "name": "Bob Smith",
      "age": 40,
      "gender": "male",
      "city": "Chicago"
    }
  ];

  $("#myTable").jsonTable({
    head: ['Name', 'Age', 'Gender', 'City'],
    json: data,
    });
});

This code will create an HTML table with four columns (Name, Age, Gender, and City) and three rows of data (one for each object in the JSON array). The resulting HTML will look like this:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>male</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>27</td>
      <td>female</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Bob Smith</td>
      <td>40</td>
      <td>male</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

You can then manipulate and style this table just like any other HTML table.

Customization

The jQuery JSON to Table library provides several options for customizing the resulting HTML table. Here are some of the most commonly used options:

Headings

By default, the library will generate column headings based on the keys in your JSON data. However, you can also specify custom headings using the head option. For example:

$("#myTable").jsonTable({
  head: ['Name', 'Age', 'Gender', 'City'],
  json: data,
});

Classes

You can add classes to the generated table by specifying a class attribute for the table tag:

$("#myTable").jsonTable({
  head: ['Name', 'Age', 'Gender', 'City'],
  json: data,
  tableClass: 'my-table-class'
});

Row Classes

You can add classes to individual rows by returning a string of space-separated classes from the getRowClass function:

$("#myTable").jsonTable({
  head: ['Name', 'Age', 'Gender', 'City'],
  json: data,
  getRowClass: function(item, index) {
    return item.gender + ' ' + ((index % 2 == 0) ? 'even' : 'odd');
  }
});

Custom Cell Rendering

You can render custom HTML for individual cells by returning a string of HTML from the getCellHtml function:

$("#myTable").jsonTable({
  head: ['Name', 'Age', 'Gender', 'City'],
  json: data,
  getCellHtml: function(item, property) {
    if (property == 'age' && item[property] >= 30) {
      return '<span class="highlight">' + item[property] + '</span>';
    } else {
      return item[property];
    }
  }
});

Conclusion

jQuery JSON to Table is a simple and easy-to-use library for converting JSON data into an HTML table. With several options for customization, it's a great tool for displaying and manipulating data on your website.