Creating tables in WordPress from JSON input

Table of Contents

Video tutorial

Example of table based on JSON

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.

Name	Gender	Marital Status	Department
Ivor Chen	Female	Single	Accounting
David Gordon	Female	Married	Tech Support
Herman Wiggins	Female	Common-Law	Human Resources
Levi Hendricks	Male	Single	Accounting
Unity Mcclure	Male	Married	Media Relations
Lesley Deleon	Female	Single	Advertising
Len Hartman	Male	Common-Law	Research and Development
Angela Peters	Female	Common-Law	Tech Support
Sonya Welch	Female	Married	Customer Relations
Berk Maxwell	Female	Single	Payroll
Lenore Finch	Male	Single	Sales and Marketing
Alisa Mann	Male	Married	Research and Development
Kareem Carroll	Male	Divorced	Customer Relations
Omar Dickerson	Male	Divorced	Accounting
Lillith Curry	Female	Divorced	Customer Relations
Herman Moran	Male	Married	Finances
Lesley Floyd	Female	Divorced	Tech Support
Cleo Travis	Male	Single	Asset Management
Wesley Fuentes	Male	Common-Law	Public Relations
Brielle Hines	Female	Married	Human Resources
Karly Ashley	Female	Divorced	Research and Development
Clinton Salazar	Male	Single	Quality Assurance
Demetrius Howard	Female	Divorced	Tech Support
Aristotle Carpenter	Male	Married	Payroll
Vivien Mcintyre	Male	Single	Sales and Marketing
Katelyn Walton	Male	Single	Payroll
Maggy Alvarado	Male	Single	Legal Department
Joy Weiss	Male	Married	Research and Development
Ramona Tyler	Male	Single	Finances
Susan Mathis	Male	Single	Customer Service
Alexis Keller	Female	Divorced	Payroll
Wallace Berger	Female	Common-Law	Public Relations
Alan Spencer	Male	Common-Law	Finances
Mari Stephens	Male	Common-Law	Finances
Colt Huber	Male	Married	Legal Department
Cedric Pena	Male	Divorced	Advertising
Evangeline Zimmerman	Female	Married	Research and Development
Ulric Moore	Female	Single	Tech Support
Casey Nicholson	Male	Divorced	Media Relations
Keefe Pickett	Male	Single	Customer Service
Sybill Carey	Female	Common-Law	Customer Relations
Cassidy Hampton	Female	Single	Legal Department
Zahir Webster	Female	Divorced	Legal Department
Quyn Sandoval	Male	Common-Law	Accounting
Nola Blankenship	Male	Common-Law	Media Relations
Troy Calderon	Male	Common-Law	Accounting
Aiko Mason	Male	Common-Law	Research and Development
Camden Gilbert	Female	Common-Law	Customer Service
Walker Mullins	Male	Single	Human Resources
Keely Bond	Female	Divorced	Public Relations
Nathaniel Ball	Female	Single	Customer Relations
Cassady Madden	Female	Common-Law	Media Relations
Camilla Cox	Female	Divorced	Accounting
Danielle Estrada	Male	Married	Finances
Megan Drake	Male	Common-Law	Accounting
Moana Middleton	Male	Single	Tech Support
Ashely Fuentes	Male	Common-Law	Advertising
Wing Williams	Male	Married	Payroll
Keith Gross	Male	Divorced	Customer Service
Noel Evans	Female	Single	Sales and Marketing
Anastasia Mills	Female	Single	Payroll
Ramona Reese	Male	Married	Quality Assurance
Imelda Rojas	Male	Married	Human Resources
Odessa Thornton	Male	Single	Finances
Giacomo Lott	Male	Divorced	Human Resources
Scarlett Sanford	Male	Single	Customer Relations
Branden Delaney	Female	Common-Law	Public Relations
Kessie Ryan	Female	Married	Accounting
Malcolm Little	Female	Single	Public Relations
Mikayla Riley	Female	Single	Quality Assurance
Tatyana Mccarthy	Female	Common-Law	Human Resources
Galena Serrano	Male	Common-Law	Asset Management
Maggie Everett	Female	Divorced	Public Relations
Sierra Sexton	Male	Divorced	Tech Support
Kennedy Mclean	Male	Single	Finances
Nehru Patton	Male	Common-Law	Finances
Rajah Carroll	Male	Single	Customer Relations
Alvin Gates	Male	Married	Quality Assurance
Burton Garcia	Female	Married	Customer Relations
May Cox	Male	Single	Payroll
Aubrey Compton	Male	Single	Asset Management
Reuben Blake	Female	Single	Customer Service
Benedict Villarreal	Male	Divorced	Payroll
Haviva Mullen	Female	Single	Payroll
Shaeleigh Lynn	Female	Common-Law	Media Relations
Abdul Vaughn	Male	Single	Public Relations
Charissa Atkins	Male	Married	Finances
Dominique Holcomb	Male	Single	Customer Service
Jeremy Burns	Female	Married	Research and Development
Geoffrey Gonzalez	Male	Divorced	Advertising
Kuame Sanchez	Female	Common-Law	Quality Assurance
Marcia Walton	Female	Married	Advertising
Lydia Pena	Male	Single	Customer Relations
Zachary King	Male	Divorced	Media Relations
Kirestin Gaines	Male	Common-Law	Quality Assurance
Idona Miller	Male	Divorced	Media Relations
Patrick Beasley	Male	Single	Media Relations
Dominique Langley	Male	Common-Law	Payroll
Aurora Perkins	Female	Single	Sales and Marketing
Zena Duran	Female	Single	Human Resources
Name	Gender	Marital Status	Department

Please note:
By default, this format will work only up to a certain limit (no exact limit, but 3.000 – 5.000 cells is a good example). If you have a larger file, the page load time will increase. However, with the new caching option that was implemented in wpDataTables 5.0, this issue is resolved for large tables linked to an existing data source.

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.

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

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 Save Changes. wpDataTables will read the table data and initialize the column metadata from the provided URL so you can get the live preview for the table.

Define additional settings for the table and columns (Optional)

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 the Gender column.

There are 2 ways to do that:

1. By clicking on the Column settings button

2. Or by clicking on the “Column list” button on top of the table.
In this dialog, you can quickly rename, reorder, or toggle visibility for columns, turn on/off sorting, filtering or a global search for columns.

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

You can dynamically filter the table by using placeholders as predefined filtering values.

Insert the wpDataTable in WordPress Post or Page

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 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.

If you are using Gutenberg editor, Elementor, or WPBakery page builder, you can check out the section for Adding wpDataTables shortcodes on the page.

Please note: Once you create a table from a JSON file, you should not change the source file’s structure, so changes like these are not recommended:

Renaming columns,
Reordering columns,
Deleting existing columns,
Adding new columns.

If you make any of the above changes, the wpDataTable will break. If you make any of these changes, you will need to recreate the table again.