Help Center

Dynamic Tables Builder Overview

This overview will describe the general settings of Tables Builder and how to use it.

From this tutorial, you’ll learn how to create and customize Tables Builder from the JetEngine plugin. With Tables Builder, you can get the data from the previously created Query dynamically, fetch a sample of the data to find all possible columns, and preview the table. Also, you can display the table with the help of the Dynamic Table widget in Elementor and Gutenberg. 

Create a Query

The first thing you need to do is to go to JetEngine > JetEngine > Modules > External Modules and enable the Dynamic Tables module.

activated dynamic tables module in the external modules section

The next thing you need to do is to create a Query with Query Builder
In our case, we’ll create a Posts Query for the post.

Tables Builder Overview

After you’ve enabled the Dynamic Tables module, you’ll see the Tables Builder block in the JetEngine dashboard. Let’s have a closer look at it. 

General Settings 

  • Name. Here you can add the name of the Custom Content Type that will be shown in the admin menu;
  • Data Query. In this field, you need to choose the query you’ve created before with the Query Builder. No worries if you didn’t create it. There’s always an opportunity to create a new query or edit the existing one; 
  • Fetch the data. Fetch a sample of the data to find all possible columns and preview the table.
dynamic table general settings
Warning

Don’t forget to click on the “Re-fetch Data” button when you change the post type in the Data Query field.

Columns

In this block, you can add the needed columns for your table. It works similarly to the meta fields.

  • Column Name. The column name is displayed in the table heading;
  • Column Content. Here you can choose the type of content that will be displayed in the column. There are two options: “Raw Value” and “Template”.
column content drop-down select in the tables builder settings

If we choose the Raw Value, then there will be an opportunity to choose the Data Source for the current column, such as Fetched Column, Post/Term/User/Object Field, and Meta field. Let’s have a closer look at each of them.

Fetched Column. Here you can select a column from previously fetched columns.

fetched column data source and its options

You can also enable the Filter Column Output toggle if you need to choose the Callback function to filter the column value.

active filter column output and filter callback options

If you enable the Customize Column Output option, then you can output the format.

enabled customize column output toggle
Warning

Fetched Column doesn’t work with WooCommerce because it has another structure and can’t get data from the database.

Post/Term/User/Object Field. Select a field from the current object to show in this column.

post term user object field data source

Meta Field. Select the meta field from JetEngine fields to show in this column. 

meta field data source and its options

If you choose Template Column Content, then you’ll be able to choose the template to use as the base template for current column items.

column template drop-down select in the tables builder settings

Table Styles

In this module, you can adjust the width and set the alignment for the table. 

table styles tab
Warning

Table Styles that you will add in this module will override styles in the Dynamic Table widget.

You can always preview the result if you click on the “Reload Preview” button. 

dynamic tables preview

Dynamic Table Widget in Elementor

There’s an opportunity to display tables on any page with the Dynamic Table widget. Go to the needed page and click on the Edit with Elementor button. Search for the Dynamic Chart widget and add it to the page. Let’s have a closer look at it.

dynamic table widget in Elementor

In the Table field, you need to select the table we’ve created before. Also, you can show column names in the table header and footer and allow horizontal scroll, which is quite user-friendly. 

dynamic table source in Elementor

Moreover, there’s an opportunity to style the table. Don’t forget that if you want to style the table only in the widget, then you need to remove styles on the backend. Styles on the backend override widget’s styles. What is more, styles in the widget will apply to the whole table, not the separate column.

dynamic table style settings in Elementor

Dynamic Table Block in Gutenberg

You can also add the Dynamic Table block in Gutenberg. Open the needed page, click on the plus icon,  and search for the Dynamic Table widget. 

dynamic table block in Gutenberg

After that, you can simply add the widget to the needed section. In the widget’s settings, you’ll need to choose the Table you’ve created before.

dynamic table block settings in Gutenberg

Now you know how to use Tables Builder functionality from the JetEngine plugin.

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.