Avada Page Builder integration with wpDataTables

Avada Page BuilderAvada Page Builder integration and how to add tables in the WordPress visual editor

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 “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:

wpdatatables elements for Avada Builder

Adding a wpDataTable to a pageHow to add a wpDataTable in a page that you create with Avada Page Builder

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:

General tab in wpdatatables element

The second tab contains three inputs from which you can configure variable placeholders for your table:

Placeholder tab in wpdatatables element

The third tab contains input from which you can configure file name for exporting wpDataTable:

File tab in wpdatatables element

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:

wpdatatables element description

Adding chartsHow to add charts created in wpDataTables to Avada Page Builder

If you click the “wpDataChart” button, you will see a popup with a list of charts that you created (using the Chart Creation wizard):

wpdatachart element in Avada

You can choose a chart, and when you click “Save” it will be inserted in your page as wpDataTable as well.

wpdatachart element in avada

Adding a wpDataTable and wpDataChart to a page with Avada Live EditorHow to add a wpDataTable and wpDataChart in a page that you create with Avada Live Editor

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:

Live editor
avada editor search

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.

Avala live editor wpdatatbles
Avala live editor wpdatatbles placeholders
Avala live editor wpdatatbles file

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:

Avada live editor wpdatatables shortcode

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.

Avada live wpdatachart insert

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.