Dynamic Tables Builder Overview

First of all, proceed to WordPress Dashboard > JetEngine > JetEngine > Modules > External Modules and enable the Dynamic Tables Builder module.

Proceed to the Query Builder and set up a custom query to serve as the source for the table. In this case, we create a simple Posts Query. 

Now, let’s proceed to WordPress Dashboard > JetEngine > Tables Builder and click the “Add New” button. Let’s have a closer look at the table builder’s settings.

General Settings 

In the General Settings tab, three fields are presented.  

• Name – the name of the table that will be shown in the admin menu;
• Data Query – in this field, you need to choose the query you have created before with the Query Builder. You can also create a new query or edit the existing one by clicking the dedicated links under the input; 
• Fetch the data – to fetch a sample of the data to find all possible columns and preview the table, click the “Re-fetch Data” button.

Warning

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

Columns

Moving to the Columns tab, you can add the columns for the table by clicking the “New column” button. 

• Column Name – the column name is displayed in the table’s heading;
• Column Content – from this dropdown, you can choose the type of content that will be displayed in the column. There are two options: “Raw Value” and “Template”.

If we choose the “Raw Value”, the Data Source field appears. From the newly appeared field, we can select one of the following sources: “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.

Warning

Fetched Column does not work with WooCommerce because it has a different structure and cannot get data from the database.

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

• Meta Field – select the meta field from JetEngine fields to show in this column. 

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

If you enable the Customize Column Output option, you can customize the field’s output. Ensure you use the “%s” to display the field’s value. 

If you select the “Template” Column Content, you will be able to choose the template to use as the base template for the current column items. It is usually used to display images or buttons. 

Table Styles

In the Table Styles section, you can adjust the width and set the alignment for the cells and headings in the table.

Warning

Table Styles that you add in this module will override the styles of the Dynamic Table widget/block/element.

You can always preview the result by clicking the “Reload Preview” button.

Click the “Create Table” button once you are ready.

Open the needed page in the Elementor editor. To display the table on the front end, you can add the Dynamic Table widget.

Let’s have a closer look at the available settings.

• Table – from this dropdown, select the table you created; 
• Show column names in table header – enable the toggle if you need the column names in the table header;
• Show column names in table footer – enable the toggle if you need the column names in the table footer;
• Allow horizontal scroll – enable the toggle if you have a lot of columns to scroll them horizontally; 
• Rewrite table query – turn the toggle on if you need to use a different query. Allow the use of various data for the same layout and avoid table duplication. 

In the Style tab, you can apply the desired styles. If you need to style the table only within the widget, remove the styles on the backend as they override the widget’s settings. Moreover, styles in the widget will apply to the entire table, not just a single column.

Click the “Publish” button once you are ready with the settings.

You can also add the Dynamic Table block in Gutenberg. Open the needed page, and add the Dynamic Table block. 

Select the needed table in the Table field.

• Show column names in table header – enable the toggle if you need the column names in the table header;
• Show column names in table footer – enable the toggle if you need the column names in the table footer;
• Allow horizontal scroll – enable the toggle if you have a lot of columns to scroll them horizontally; 
• Rewrite table query – turn the toggle on if you need to use a different query. Allow the use of various data for the same layout and avoid table duplication. 

Click the “Save” button.

If you work with the Bricks builder, you can add the Dynamic Table element to the needed section. 

Select the table from the Table dropdown and enable the following toggles if needed: 

• Show column names in table header – enable the toggle if you need the column names in the table header;
• Show column names in table footer – enable the toggle if you need the column names in the table footer;
• Allow horizontal scroll – enable the toggle if you have a lot of columns to scroll them horizontally; 
• Rewrite table query – turn the toggle on if you need to use a different query. Allow the use of various data for the same layout and avoid table duplication. 

Click the “Save” icon once you are ready with the setup.