Help Center

Knowledge base Plugins JetEngine How to Create a Dynamic Table Based on SQL Query in Elementor

How to Create a Dynamic Table Based on SQL Query in Elementor

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

Before you start check tutorial requirements:

  • Elementor (Free version)

  • JetEngine plugin installed and activated

  • SQL table to get the info from

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.

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.

Adjust Query Builder

The outset in creating a Dynamic Table is Query Builder. To create a query, navigate to 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.

the first part of importing sql to phpmyadmin
Warning

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

Once all the import settings are adjusted, press the “Go” button, restart the WordPress website and return to the Query Builder.

the second part of importing sql to phpmyadmin

Give a title to the query and choose its type. Now we will pick the “SQL Query” option.

sql query general settings

Select the newly created table from the From table drop-down list as Custom SQL Query appears. 

custom sql query settings

Proceed to the further editing. As our statistical table reviews 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.”

order and order by settings in sql settings

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

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

show per page limit setting in sql query

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.

Mind that you can set Vertical Align and Horizontal Align for both Heading and Cell of the table.

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

Add Table to 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.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.