Please wait...

WPBakery Page Builder integration with wpDataTables

Video versionA video overview of WPBakery Page Builder integration in wpDataTables

WPBakery Page Builder drag&drop WPBakery Page Builder integration and how to add tables in the WordPress visual editor

WPBakery Page Builder has became a “standard” of sorts in the world of WordPress. It is a powerful, but extremely easy to use drag&drop page builder that allows a user to change standard page layouts. It can be used without any need for coding, or even for shortcodes of elements such as accordions, buttons, multi-column blocks, headlines, message boxes, pie charts, and other useful UI elements that are not available in WordPress by default. WPBakery Page Builder comes bundled with most modern themes on ThemeForest, and even this site was built using this powerful tool.

wpDataTables can be integrated with WPBakery Page Builder. You can insert tables and charts you’ve created with wpDataTables onto your pages using the WPBakery 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 WPBakery Page Builder.

If you open the WPBakery Page Builder back-end editor after wpDataTables installation you will see two new buttons in the “Add element” WPBakery Page Builder popup:

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

If you click the “wpDataTable” button, you will see a table configuration popup with two tabs. The first tab contains a dropdown with the list of the wpDataTables that you previously created:

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

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 changes” button and WPBakery Page Builder will store the data. You can see the wpDataTable block, and the name of wpDataTable that was chosen on previous step:

You can insert the table inside another WPBakery Page Builder element: column, tab, accordion, etc.

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

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

You can choose a chart, and when you click “Save changes” it will be inserted in your page. You can also insert the charts in other WPBakery Page Builder elements, e.g. row columns, tabs, etc.:

When you save the page, the wpDataTables and wpDataCharts are inserted as you configured them in the WPBakery Page Builder:

Do you have the best

essential plugins installed?

Grab the best 46 plugins. Tested and sorted.

Plugins for SEO, Caching, Security, Design and UX, Stats & analytics, Social sharing. Only the best ones.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).

Thank you for subscribing! Please check your inbox to download the WordPress goodies.