What is TablePress

TablePress is the most popular and highest-rated WordPress table plugin.

Using the free TablePress plugin and our PRO plugin you can build tables from the data returned from your JSON API.

Requirements

To get this integration up and running, you will need:

• TablePress Plugin
• Free WPGetAPI Plugin
• PRO Plugin
• An API that returns JSON data suitable for a table

How it works

This is a no-code integration to create tables from API data.

Once the plugins are installed and you have setup your API and endpoint, you will see a new TablePress button within each endpoint.

Clicking this button will create a new table within TablePress. You then simply need to copy the shortcode for that table and add to the page wherever you want the table to be shown.

When viewing the table on the front end, the API will be called and the table data updated on page load.

Step by Step Instructions

Let’s look a bit deeper at how we can create amazing looking tables using API data.

Step 1: Create API & endpoint

The first step is to add a new API and a new endpoint. Follow the Quick Start guide if you haven’t done this already.

Step 2: Test the endpoint

Once your endpoint is setup, you should test it by clicking on the Test Endpoint button. The data returned should be in JSON string format like shown below.

Step 3: Create a TablePress

Once you are happy that the data returned looks good, you simply need to scroll to the bottom of the endpoint and click the Create TablePress from this endpoint button.

Root field is optional and may not be required, depending on your API.

In the example below, the Root will be products. The reason for this is that we need to find the point at where the array of items begins.

Clicking this button will create a new table within TablePress that will be associated with this endpoint. After successfully creating the table, you should see some new options and information as shown below.

It tells us we are connected to the new TablePress table we just created.

There are also options to Edit the TablePress, Reconnect TablePress and Create new TablePress. These options will do the following:

• Edit the TablePress – this will take you to the TablePress to edit and test the layout of the table
• Reconnect TablePress – this will refresh the table and the API data within the table
• Create new TablePress – this will create a new TablePress that will be associated with this endpoint

Step 4: Edit the TablePress

Click on the Edit the TablePress button to be taken to the table. This is where you can edit the table and setup how it should look.

You can now setup your TablePress any way you like using the options within this page.

Step 5: Add the TablePress

Now you simply need to copy the TablePress shortcode and paste it into your page or wherever you like.

When the page is viewed, our plugin will recognise that this table is tied to the endpoint and will call the API before displaying the data, meaning that the table data is always fresh.

You can also set a cache time within the endpoint if you want to avoid calling the API on every single page load.

Technical Details

When creating a new table by pressing the Create TablePress from this endpoint button, a few things are happening in the background which are worth mentioning here.

Firstly, a new TablePress is created and we grab the id of that new table.

Next, the PRO plugin will call your endpoint and then insert data in the TablePress.

Finally, when you add the TablePress shortcode to a page, the PRO plugin will grab the id from the shortcode and check if it this table is tied to an endpoint. If it is, it will call the endpoint and update the data in the TablePress with the new API data, leaving you with fresh data in the table.