{"id":24588,"date":"2021-11-03T15:46:36","date_gmt":"2021-11-03T15:46:36","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=24588"},"modified":"2024-01-19T07:41:50","modified_gmt":"2024-01-19T07:41:50","slug":"jetengine-how-to-create-dynamic-table-in-elementor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/","title":{"rendered":"How to Create a Dynamic Table Based on SQL Query in Elementor"},"content":{"rendered":"\n

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.\u00a0<\/p>\n\n\n\n

Check how to build an Elementor SQL-based dynamic table using JetEngine<\/em> and its Tables Builder<\/a>. Let\u2019s start by creating a statistical data table.<\/p>\n\n\n\n

Activate Tables Builder<\/h2>\n\n\n\n
\n
\n

Initially, check if Tables Builder <\/strong>is activated. The needed switch is available by following WordPress Dashboard > JetEngine > Modules > External Modules<\/em><\/strong>.\u00a0<\/p>\n\n\n\n

Toggle Dynamic Tables Builder <\/strong>if it isn\u2019t enabled. The changes will be saved automatically.<\/p>\n\n\n\n

\"modules<\/a><\/div>\n\n\n\n

Read the detailed Tables Builder overview<\/a><\/strong> to know more about its additional features. <\/p>\n<\/div><\/div>\n\n\n\n

Import SQL Table<\/h2>\n\n\n\n
\n

Now, we will build an SQL Query. Firstly, we need to import an SQL table to PhpMyAdmin<\/strong>. Once opened, find the database you are using and open the Import<\/strong> tab.<\/p>\n\n\n\n

Here, you can press the \u201cChoose File<\/strong>\u201d button and select the needed SQL file from your computer.<\/p>\n\n\n\n

Once all the import settings are adjusted, press the \u201cGo<\/strong>\u201d button.<\/p>\n\n\n\n

\"phpmyadmin<\/a><\/div>\n\n\n
<\/svg><\/div>
Warning<\/div>

An SQL file title should start from the \u201cwp_\u201d value, the default WordPress table prefix. However, if you have changed this value, type in the set prefix before the file name instead of \u201cwp_\u201d.<\/p><\/div><\/div>\n\n\n\n

You can change the title by clicking on the imported table\u2019s name in the directory and opening the Operations <\/strong>tab. Change the name in the Rename table to <\/strong>field if needed.<\/p>\n\n\n\n

If ready, restart the WordPress website to continue the setup.<\/p>\n\n\n\n

\"phpmyadmin<\/a><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Adjust Query Builder<\/h2>\n\n\n\n
\n
\n

The following step is building a query<\/a>. Navigate to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and add a new query by clicking on the corresponding button.<\/p>\n\n\n\n

Give a Name <\/strong>to the query and set its Query Type <\/strong>as the \u201cSQL\/AI Query\u201d option.<\/p>\n\n\n\n

\"query<\/a><\/div>\n\n\n\n

In the Custom SQL Query <\/strong>section, select the newly created table from the From table<\/strong> drop-down list.<\/p>\n\n\n\n

\"from<\/a><\/div>\n\n\n\n

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<\/strong> field and press \u201cAdd new sorting parameter<\/strong>.\u201d<\/p>\n\n\n\n

Besides, we will specify the Show\/Per Page Limit <\/strong>to define how many items will be displayed per page.<\/p>\n\n\n\n

Look through other customization fields and click the \u201cAdd Query<\/strong>\u201d button to save the changes.<\/p>\n\n\n\n

\"show<\/a><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Configure Tables Builder<\/h2>\n\n\n\n
\n
\n

Navigate to WordPress Dashboard > JetEngine > Tables Builder<\/em><\/strong>. Add a new table by clicking the \u201cAdd New<\/strong>\u201d button.<\/p>\n\n\n\n

\"tables<\/a><\/div>\n\n\n\n

Let\u2019s start with the first General Settings <\/strong>tab. Give a title to the table and choose the created query as the Data Query <\/strong>source. Push the \u201cFetch Data<\/strong>\u201d button to activate the connection between the query and the table.<\/p>\n\n\n\n

\"tables<\/a><\/div>\n\n\n\n

Going to the following Columns <\/strong>tab, attach the desired columns to the table. We select \u201cRaw Value\u201d as the Column Content <\/strong>and \u201cFetched Column\u201d as the Data Source<\/strong>.<\/p>\n\n\n\n

Add the desired number of columns by pushing the \u201cNew column<\/strong>\u201d button whenever you need to set up a new table column.<\/p>\n\n\n\n

\"tables<\/a><\/div>\n\n\n\n

Then, adjust the available settings in the Table Styles <\/strong>tab. Here, all the created columns are presented. However, you can always style up the table in the Elementor Page Builder if the suggested modifications aren\u2019t enough.<\/p>\n\n\n\n

The Width <\/strong>field value sets the width of the column. It can be presented in any CSS-supported string.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

Mind that you can set Vertical Align<\/strong> and Horizontal Align<\/strong> for both Heading<\/strong> and Cell<\/strong> of the table.<\/p><\/div><\/div>\n\n\n\n

\"table<\/a><\/div>\n\n\n\n

You can also click the \u201cReload Preview<\/strong>\u201d button to check out the created table.<\/p>\n\n\n\n

\"table<\/a><\/div>\n\n\n\n

Once finished, hit the \u201cCreate Table<\/strong>\u201d button. The next step is adding the table to the website. Proceed to the page where you want to place the newly built table.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Add Table to Elementor Page<\/h2>\n\n\n\n
\n
\n

Head to WordPress Dashboard > Pages<\/em><\/strong> and create a new page or open the existing one in the Elementor Page Builder.\u00a0<\/p>\n\n\n\n

Place the Dynamic Table <\/strong>widget. Choose the table you have just created as the source.<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

After enabling all the required toggles in the Content <\/strong>tab, proceed to the Style <\/strong>tab. Here, you can create a custom table styling. Check the Advanced <\/strong>tab if additional customizations are needed. <\/p>\n\n\n\n

Once the Elementor table is styled up, click on the \u201cPublish<\/strong>\u201d button.<\/p>\n\n\n\n

Now, you can check the result on the front end.<\/p>\n\n\n\n

\"table<\/a><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

The Elementor responsive table is finally complete. Now you know how to build a WordPress SQL-based table in Elementor using JetEngine <\/em>and its features.<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial describes the creation process of Dynamic Table in Elementor with the help of the JetEngine plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[408],"yoast_head":"\nElementor Dynamic Table Based on SQL Query Creation Guide \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find out how to build functional WordPress SQL-based dynamic tables in Elementor page builder. Use Tables Builder from the JetEngine plugin to make the process easier.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor Dynamic Table Based on SQL Query Creation Guide \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find out how to build functional WordPress SQL-based dynamic tables in Elementor page builder. Use Tables Builder from the JetEngine plugin to make the process easier.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-19T07:41:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/modules-tab-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/\",\"name\":\"Elementor Dynamic Table Based on SQL Query Creation Guide \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-11-03T15:46:36+00:00\",\"dateModified\":\"2024-01-19T07:41:50+00:00\",\"description\":\"Find out how to build functional WordPress SQL-based dynamic tables in Elementor page builder. Use Tables Builder from the JetEngine plugin to make the process easier.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Dynamic Table Based on SQL Query in Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Dynamic Table Based on SQL Query Creation Guide \u2014 JetEngine | Crocoblock","description":"Find out how to build functional WordPress SQL-based dynamic tables in Elementor page builder. Use Tables Builder from the JetEngine plugin to make the process easier.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Elementor Dynamic Table Based on SQL Query Creation Guide \u2014 JetEngine | Crocoblock","og_description":"Find out how to build functional WordPress SQL-based dynamic tables in Elementor page builder. Use Tables Builder from the JetEngine plugin to make the process easier.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/","og_site_name":"Help Center","article_modified_time":"2024-01-19T07:41:50+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/01\/modules-tab-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/","name":"Elementor Dynamic Table Based on SQL Query Creation Guide \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-11-03T15:46:36+00:00","dateModified":"2024-01-19T07:41:50+00:00","description":"Find out how to build functional WordPress SQL-based dynamic tables in Elementor page builder. Use Tables Builder from the JetEngine plugin to make the process easier.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-dynamic-table-in-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Dynamic Table Based on SQL Query in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/24588"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=24588"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=24588"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=24588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}