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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Dynamic-Tables-module.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/General-Settings.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Column-Content.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Fetched-Column.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Filter-Column-Output.png)
If you enable the Customize Column Output option, then you can output the format.
![enabled customize column output toggle](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Customize-Column-Output-2.png)
Post/Term/User/Object Field. Select a field from the current object to show in this column.
![post term user object field data source](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Post-Term-User-Object-Field.png)
Meta Field. Select the meta field from JetEngine fields to show in this column.
![meta field data source and its options](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Meta-Field-1.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Column-Template-1.png)
Table Styles
In this module, you can adjust the width and set the alignment for the table.
![table styles tab](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Table-Styles.png)
You can always preview the result if you click on the “Reload Preview” button.
![dynamic tables preview](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Realod-Preview.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Dynamic-Table-widget-1.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Dynamic-Table-widget-Table-source.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Dynamic-Table-widget-style-section.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Dynamic-Table-widget-in-Gutenberg.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/Dynamic-Table-widget-2.png)
Now you know how to use Tables Builder functionality from the JetEngine plugin.