You add wpDataTables tables and charts with Avada by using the new wpDataTable and wpDataChart elements that appear in the Avada Page Builder “Select element” popup after you install wpDataTables. These elements work in both the Avada back-end editor and the Avada Live front-end editor.
Table of Contents
Avada Page Builder is a popular drag-and-drop WordPress page builder, and yes — wpDataTables integrates with it so you can insert tables and charts directly from its interface.
Avada Website Builder is one of the most known and used page builders in the world of WordPress. It is an elegant, drag&drop page builder that allows a user to change standard page layouts.
wpDataTables can be integrated with Avada Page Builder. You can insert tables and charts you’ve created with wpDataTables onto your pages using the Avada Page Builder interface. The only thing to note here is that you should build your tables first (with the “Table Creation Wizard“) before inserting them in any page you create with Avada Page Builder.
If you open the Avada Page Builder back-end editor after wpDataTables installation you will see two new buttons in the “Select element” Avada Page Builder popup:
You add a table by clicking the “wpDataTable” element, choosing your table and table view in the configuration popup, and clicking “Save”.
If you click the “wpDataTable” element, you will see a table configuration popup with three tabs. The first tab “General” contains a dropdown with the list of the wpDataTables that you previously created and dropdown table view to choose “regular” or “excel-like” layout:
The second tab contains three inputs from which you can configure variable placeholders for your table:
The third tab contains input from which you can configure file name for exporting wpDataTable:
Please refer to this documentation section to see what these placeholders are and how they work.
When you choose the table and pick the table view, you can click the “Save” button and Avada Page Builder will store the data. You can see the wpDataTable block, the name of the wpDataTable that was chosen on the previous step, and the shortcode structure:
You add a chart by clicking the “wpDataChart” button, choosing one of your charts and clicking “Save”.
If you click the “wpDataChart” button, you will see a popup with a list of charts that you created (using the Chart Creation wizard):
You can choose a chart, and when you click “Save” it will be inserted in your page as wpDataTable as well.
You add them in the Avada Live front-end editor through the same wpDataTable and wpDataChart elements in the “Select element” popup, or by searching for “wp”.
If you open the Avada Page Builder Live front-end editor after creating wpDataTables you will see two new buttons in the “Select element” Avada Page Builder Live popup or you can search for “wp” and find it that way:
If you click the “wpDataTable” element, you will see a table configuration on the left sidebar with three tabs like it is already explained above.
When you choose the table and pick the table view, you can click on “Save” and the Avada Live editor will store the data. You can see the wpDataTable block, and the name of wpDataTable that was chosen in the previous step and shortcode structure:
If you click the “wpDataChart” button, you will see in the sidebar the wpDataChart settings with a list of charts that you created (using the Chart Creation wizard) and after choosing the chart id, the wpDataChart element will be created.
When you save the page, the wpDataTables and wpDataCharts are inserted as you configured them in the Avada Page Builder Live editor.
Note: If wpDataTable and wpDataChart elements are inserted over Avada back-end editor, in Avada Live editor it will be shown real wpDataTable and wpDataChart.
The documentation below covers creating tables and the table features you can use on pages built with Avada.
To get your hands on wpDataTables Lite, please enter your email address below. We’ll send you a direct download link and keep you updated on existing features along with helpful tips and tricks!
