Dynamic Tables Builder by JetEngine is a powerful instrument for displaying dynamic data from your website as a table. But these aren’t your ordinary tables – they have plenty of cool features that might not be that obvious, so many users don’t know about them.
Let me discuss some of my favorite ones in this article.
Table of Contents
- Table Content Based on Custom Queries
- Using Templates for Table Cell Content
- Callbacks to Display Content in Various Formats and Forms
- Creating a WooCommerce Product Table
- Displaying Data From Other Websites
- FAQ
- Takeaway
Table Content Based on Custom Queries
🏆 The cool feature of this section:
Full freedom and control in selecting any data for the table.
If you’ve gotten used to other table plugins for dynamic content, where you select data to be displayed when creating a table, JetEngine’s Dynamic Tables offer a slightly different approach.
There are two stages of creating a table here: first, you select the data to be displayed and then display it in the table. The reason for this is that JetEngine has a unique tool – the advanced Query Builder, which gives you precise control to fine-tune exactly what should be displayed. The result is saved as a custom query, and you can use it multiple times, not only for tables but for dynamic listing templates as well.
The video below is a short demonstration of how many options you have for selecting the content. Also, there are several query types, so if you create one, let’s say, for WooCommerce, the interface will be a bit different, with a focus on specific WooCommerce items. You can fetch data using SQL commands as well.
After building a query, you can create a table based on this query and distribute content across the table cells.
Using Templates for Table Cell Content
🏆 The cool feature of this section:
Extra styling, widgets, or several fields can be added to table cells.
You can insert raw data into the cells, and you can also use templates to get more visually appealing results by adding gallery widgets, buttons, carousels, or more. Also, you can fit a few fields in one cell.
However, structures that are too complex might not work properly or slow down the page performance, especially when made with Elementor, due to its numerous wrappers. It’s also better to use JetEngine dynamic fields instead of third-party widgets with dynamic fields.
First, create a template in JetEngine > Listings/Components based on the same query as the table. Add the fields you want to display in the cell, style them, and save them.
Go back to the Tables Builder, and in the Column content field, choose “Template” and choose a template you’ve just created in the dropdown below. Click “Reload Preview” and enjoy the result.
Callbacks to Display Content in Various Formats and Forms
🏆 The cool feature of this section:
You can change the way your data is displayed, show arrays, images, and much more.
JetEngine’s Dynamic Tables and Dynamic Fields have the “Filter field/column output” option with a list of callbacks to choose from. Callbacks are the functions that can modify the data when it’s fetched.
Here are some of the useful cases in which callbacks can be used in tables (it works equally well for any Dynamic Field as well).
Turning titles into links
If you want to display post/product titles as links, fetch the Post or Product URL field and then apply the Embed URL callback.
If you need to style them, activate the Customize Column Output toggle and wrap the %s macro in HTML with CSS class with proper styling.
Fetching images
There are three main ways to fetch images in dynamic tables.
The “Get image by ID” callback
By default, WordPress stores images’ IDs if you add them to custom fields. So, if you try to display your Media field in a table, you will see numbers – the IDs of these images.
Apply the “Get Image by ID” callback, and it will be turned into an image.
Use Customize Column Output if you want to change its format somehow with the help of CSS. Also, you can use a template option I mentioned earlier in this article.
The “Get post/page thumbnail” callback
If you want to fetch a featured image of a post, page, or WooCommerce product, select the Post ID field and then add the “Get post/page thumbnail” callback, and you will see images. Also, you can choose the size of an image and add a permalink to it.
Turning an image link into an image
Using the custom field setting by JetEngine, you can select storing images as links (instead of IDs). In this case, you will need not a callback but some HTML. Activate the Customize Column Output toggle and wrap the link in an image tag, where “%s” is a macro for the image link:
<img src=%s></img>Adding action buttons for WooCommerce
If you want to insert an “Add to Cart” button for WooCommerce products, you can use a template option and the JetWooBuilder button (if you use Elementor) or use this code:
<a href="?add-to-cart=%1$s&redirect=checkout" class="button quick-buy">Quick Buy</a>Displaying a list of related items
JetEngine allows you to create any kind of relationship, and related posts can be displayed in a dynamic table.
First, make sure the Post/Term/User/Object Field is selected in the Data Source field. The next dropdown will display a list of available relations for the current item, so choose the one you want to display.
Finally, add the “Related items list” callback and activate the toggle to add links to them if needed; you can also add an HTML tab and delimiter.
Related products
If you want to display a list of related WooCommerce products, you need another method, as WooCommerce stores them in a dedicated meta field. Choose the Meta Field as a source and type the _crosssell_ids field key in the Custom Field Key field.
To add links to the products, add the “Get post/page link” callback.
Displaying a list of users
Using dynamic tables, you can create a convenient list of users. Make sure the Post/Term/User/Object Field is selected in the Data Source, and find the Users section in the list. There, choose ID and add the Get user data by ID callback. You will see another dropdown where you can select the particular user information to be displayed, e.g., nickname, email, URL, etc.
Creating a WooCommerce Product Table
🏆 The cool feature of this section:
You can create WooCommerce tables with tailored data and advanced filters.
In many cases, a table of WooCommerce products is a must-have, especially for goods that don’t require much visual representation or for B2B sales.
Crocoblock offers two solutions for such tables: Dynamic Tables Builder for a more handpicked selection of products and JetProductTables for fast and convenient table creation. And, of course, both types of tables support filters.
💡 Check this article for a detailed explanation of use cases for both plugins.
Displaying Data from Other Websites
🏆 The cool feature of this section:
You can collect data from remote websites or even other sources and display it in dynamic tables on your WordPress websites.
You can display data from remote websites by fetching it using REST API and populating dynamic tables with it. This can be very convenient if you plan to collect information about purchases, statistics, registered users, or other topics from various websites.
By default, WordPress content is available using the REST API unless it’s intentionally deactivated. You can see whether it’s available by typing URLs like this in the address bar of a browser.
To display data from default or custom post types, use these links:
https://yourwebsite.com/wp-json/wp/v2/posts
https://yourwebsite.com/wp-json/wp/v2/pages
https://yourwebsite.com/wp-json/wp/v2/custom-post(replace “custom-post” with your custom post slug).
If you want to fetch users, use this:
https://yourwebsite.com/wp-json/wp/v2/users If you see JSON, not an empty page, it means that REST API works.
If you create custom post types using JetEngine, make sure that you’ve activated the Show in REST API toggle when creating custom fields.
JetEngine has a very powerful module for working with REST API. First, activate it for the website that will receive the data in JetEngine > JetEngine and refresh the page. You will see a new REST API Endpoints tab on this page.
Now, insert the endpoint link (https://yourwebsite.com/wp-json/wp/v2/your-post-type) to the API Endpoint URL field and click “Send Request.” If the request is successful, you have access to the remote data, and you can go to the next step.
You can also set up authorization for better security if needed.
💡 Check this article for more information about JetEngine’s REST API module use cases.
Now, create a query (REST API type) and make a table based on that query as usual.
NOTE
If you want to fetch an image from a remote website, choose the “Media URL” value format for the image custom field. However, it’s recommended to use Custom Content Type when working with REST API.
⛏️ Find more useful tips here.
You can even display data from Google Sheets using REST API and Dynamic Tables Builder modules, but it requires some custom code. This video will guide you through the process:
There are way more cool features Dynamic Tables Builder has, and by combining the power of Query Builder with the tables, the filter callbacks, other JetEngine modules, and JetSmartFilters, you can achieve amazing results. Check the module’s documentation for more tips.
FAQ
JetEngine’s Dynamic Tables Builder is designed to display dynamic data from your website in a table format. It’s perfect for creating customizable tables powered by advanced data queries, making it ideal for directories, listings, and other data-heavy projects or WooCommerce stores.
One of the most powerful solutions on the market is the Dynamic Tables Builder module by JetEngine.
The Query Builder lets you define exactly what data to display in your table. With its advanced querying options, you can create tailored datasets that showcase the most relevant content for your audience.
Takeaway
JetEngine is a real powerhouse, offering so many modules and tools that it can replace a dozen premium plugins. In this article, I described only a few cool use cases for one of its modules: Dynamic Tables Builder. This module displays dynamic data from a website based on the data fetched with Query Builder, which means that you can access literally any data, including custom SQL queries, and display it in table format.
Table data is highly customizable as you can apply filter callbacks or add some HTML wrappers or even templates with Elementor/Block Editor/Bricks widgets right in the table cells. And, of course, you can combine it with other JetEngine modules or Crocoblock plugins. Isn’t it really a cool asset for your projects?
