You add wpDataTables tables and charts with Divi by inserting the new wpDataTable and wpDataChart modules from the Divi Page Builder “Insert module” popup. The modules are available in both the Divi back-end editor and the Divi Live front-end editor.
Table of Contents
Divi Page Builder is a visual WordPress website builder, and yes — wpDataTables integrates with it so you can insert tables and charts with just a few clicks.
Divi Website Builder is a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.
wpDataTables can be integrated with Divi Page Builder. You can insert tables and charts you’ve created with wpDataTables onto your pages using the Divi Page Builder interface with just a few clicks. 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 the Divi Page Builder.
If you open the Divi Page Builder back-end editor after creating wpDataTables, after scrolling down you will see two new buttons in the “Insert module” Divi Page Builder popup or you can insert “wp” in search:
You add a table by clicking the “wpDataTable” element, configuring it in the Content tab and clicking “Save Changes”.
If you click the “wpDataTable” element, you will see a table configuration popup. The “Content” tab contains a:
Please refer to this documentation section to see what these placeholders are and how they work.
When you choose the table, you can click the “Save Changes” button and Divi Page Builder will store the data.
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 Divi Live front-end editor with the same two modules as on the back-end; the only difference is that the editor shows the shortcode as a string instead of the rendered table or chart.
Same thing if you choose to insert the “wpDataChart” element:
When you save the page, the wpDataTables and wpDataCharts are inserted as shortcodes as you configured them in the Divi Page Builder Live editor. After visiting the live page you will see wpDataTables and wpDataCharts.
The documentation below covers creating tables and the table features you can use on pages built with Divi.
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!
