Please wait...

Creating tables in WordPress from JSON input

Video versionA video overview of JSON-based wpDataTables

Example of table based on JSONwpDataTables Table created from JSON input

When working with JSON format please note: Currently, wpDataTables accepts this, and only this, format of JSON (see example): a one-level array of same-structured objects where each object will be parsed as a row, and each field inside of the object as a cell. If your software does not return this format, you would need to prepare, as an example some PHP adapter to return one of the formats that wpDataTables would accept.

The JSON (JavaScript Object Notation) format was first introduced as a simple way to serialize and stringify objects or arrays for use in JavaScript snippets. JSON eventually proved to be so convenient, that it became wide-spread, and used as a standard for various web services. Many online platforms can return data in this format, and it is easy to generate it manually in most programming languages used in the web. wpDataTables also supports the JSON format as an input data source.

In this example, we will use a sample JSON file with data for 100 imaginary employees. You can download this file for re-use via this link.

Let’s view the table first, and then go through the step-by-step tutorial on how to create it.

Please note:
If your data set is quite large (many thousands of rows), using the JSON format for creating a wpDataTable would not be a good solution, since the page generation time and size would significantly increase. MySQL-based wpDataTables with server-side processing is always the best option for large datasets.

Instructions to create the table

You first need to prepare the JSON data source. Make sure to follow these three simple rules:

1. The data set should not be empty; it should contain at least 1-2 rows.
2. The returned JSON should exactly follow the format highlighted above: an array of objects with the same set of fields, where each object would be parsed as a row, and each object field as a cell.
3. The JSON should be available via an URL that wpDataTables can access.

In this example, we will use a sample JSON data set available through this link. You can copy and paste it to your new wpDataTable to follow the steps of this tutorial.

Create a wpDataTable and paste the URL of your JSON data source

Now, we need to create a wpDataTable based on the JSON data source that we prepared.

Create a table linked to an existing data source

1. Go to wpDataTables -> Create a Table and choose Create a table linked to an existing data source option.

Creating Tables in WordPress from JSON

2. Provide a name for the new wpDataTable in wpDataTable name input to help you identify it.
3. Choose the JSON file option in the Input data source type select box.
4. Paste the URL of your JSON data set to the Input file or URL input field.
5. Press Apply. wpDataTables will read the table data and initialize the columns metadata from the provided URL so you can get the live preview for the table.

(Optional) - Define additional settings for the table and columns

Your wpDataTable has now been created, and is ready to be used, but you might want to define some additional settings for the table in general, or some of its columns.

To achieve that you will need to open Column settings. Let’s say, as an example, that we want to change the filter type for Gender column.

There are 2 ways to do that:

1. By clicking on the Column settings button

Column settings

2. Or by clicking on the yellow button on top of the table.
In this dialog you can quickly rename, reorder, or toggle visibility for columns.

Column settings

Now you can click on the Filtering tab and for the filter type select the Select box for Gender column.

Column settings JSON

Insert the wpDataTable in WordPress Post or Page

Inserting wpDataTables shortcode on page or post

When all the preparations are finished, and the configuration is done, you just need to insert the table to your post or page.

1. Open or create a new post or page.
2. Put the cursor in the position where you wish to place the wpDataTable.
3. Click the “Insert wpDataTable” button in the editor.
4. Locate the wpDataTable that you created in the steps 1-3 and click OK.
5. Save the post or page and open it in the front-end to see the result.

As an alternative, you can paste the generated wpDataTable shortcode manually.

Never miss new features!

Join 3000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).
This  information will be used to send you newsletters as well as pre-populate any forms, should you want to edit your newsletter preferences.
You can always use this link to unsubscribe from the newsletter. You can see our Privacy Policy here.