Table of Contents
Avada Page Builder
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:
Adding a wpDataTable to a page using 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:
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:
Adding wpDataTables charts 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):
You can choose a chart, and when you click “Save” it will be inserted in your page as wpDataTable as well.
Adding a wpDataTable and wpDataChart to a page 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:
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.
Read more
- Creating editable tables and filling the table data manually
- Creating non-editable tables from Excel files
- Creating non-editable tables from Google Spreadsheets
- Responsive design
- Conditional formatting
- Sorting tables
- Per-column filtering
- Pre-filter tables through URL
- Row grouping
- Using Placeholders – Adjusting MySQL queries dynamically based on shortcode attributes
- Calculating totals (sum row)
- Table layout and word wrap
- Table data export tools
