Back to contents

JetEngine: How to Create a Dynamic Table in Elementor

 

This tutorial describes the creation process of Dynamic Table in Elementor with the help of the JetEngine plugin.

Website data systematization may be tiresome, especially when trying to render some content to the website users. Building tables seems like the most practical option. Nevertheless, tables can be even more convenient when they pull the required data dynamically. 

Check how to build Elementor SQL-based dynamic table using JetEngine and its Tables Builder. Let’s start by creating a statistical data table.

1 Step — Activate Tables Builder

Initially, check if Tables Builder is activated. The needed switch is available by following JetEngine > Modules > External Modules. Toggle Dynamic Tables Builder if it isn’t enabled.

enabling tables builder

Read the detailed Tables Builder overview to know more about its additional features.

2 Step — Adjust Query Builder

The outset in creating a Dynamic Table is Query Builder. To create a query, navigate to the JetEngine > Query Builder and add a new query by clicking on the corresponding button.

jetengine query builder

Now we will build an SQL Query. Firstly, we need to import an SQL table to PhpMyAdmin. Once opened, find the database you are using, and push the “Import” button.

importing sql table to phpmyadmin
note bannerNOTE
An SQL file title should start from the “wp_” value, the default WordPress table prefix. However, if you have changed this value, type in the set prefix before the file name instead of “wp_”.

Restart the WordPress website and return to the Query Builder.

Give a title to the query and choose its type. Now we will pick the “SQL Query” option. Select the newly created table from the From table drop-down list as Custom SQL Query appears. 

adding sql query

Proceed to the further editing. As our statistical table is reviewing YouTube statistics, we can set an order for views. To embody something similar, scroll down to the Order & Order By line and press “Add new sorting parameter.”

Besides, we will specify the Show/Per Page Limit to define how many items will be displayed per page.

order and order by views

Look through other customization fields and click on the “Add Query” button to save the changes.

3 Step — Configure Tables Builder

Navigate to JetEngine > Tables Builder. Add a new table by clicking on the similarly named button.

jetengine tables builder

Let’s start with the first General Settings tab. Give a title to the table and choose the created query as the data source. Push the “Fetch data” button to activate the connection between the query and the table.

tables builder general settings

Going to the following Columns tab, attach the desired columns to the table. We select “Raw Value” as the Column Content and “Fetched Column” as the Data Source. Despite that, you can choose any desired options in these drop-downs.

tables builder columns editing

Last but not least, adjust the available settings in the Table Style tab. You can always style up the tables in the Elementor page builder if the suggested modifications aren’t enough.

tables builder table styles

You can also click on the “Reload Preview” button to check out the created table.

tables builder reload preview

Once finished, hit the “Create Table” button. The next step is adding the table to the website. Proceed to the page where you want to place the newly built table.

4 Step — Add table to the Elementor page

Head to Pages > Add New. Name the page and place the Dynamic Table widget in Elementor. Choose the table you have just created as the source.

dynamic table in elementor

After enabling all the required toggles in the Content tab, proceed to the Style tab. Here you can create a table view to your liking. Check the Advanced tab if additional customizations are needed. 

Once the Elementor table is styled up, click on the “Publish” button.

elementor table on the front-end

Elementor responsive table is finally complete. Now you know how to build a WordPress SQL-based table in Elementor using JetEngine and its features.