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.
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.
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.
Once all the import settings are adjusted, press the “Go” button, 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.
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.”
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.
Configure Tables Builder
Navigate to JetEngine > Tables Builder. Add a new table by clicking on the similarly named button.
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.
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.
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.
You can also click on the “Reload Preview” button to check out the created table.
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.
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 responsive table is finally complete. Now you know how to build a WordPress SQL-based table in Elementor using JetEngine and its features.