Please wait...

Visual Composer Integration

Video versionA video overview of Visual Composer integration in wpDataTables

Visual Composer drag&drop page builderHow to embed wpDataTables in Visual Composer pages

WPBakery Visual Composer became a certain “standard” in WordPress society: it is a powerful, yet  extremely easy to use drag&drop page builder that allows to change standard page layouts, and use without any coding or even shortcodes different elements such as accordions, buttons, multi-column blocks, headlines, message boxes, pie charts, and many many more different useful UI elements not available in WordPress by default. Visual Composer is bundled in most of modern themes on Themeforest, and even this site is built with this mighty tool.

wpDataTables also provides integration with Visual Composer. You can insert tables and charts that you created with wpDataTables to your pages using Visual Composer interface. The only thing to note here is that you should build your tables first (with “Table Creation Wizard“) before inserting these in the page that you create with Visual Composer.

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

Adding a wpDataTable to a pageHow to add a wpDataTable in a page that you create with Visual Composer

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

Second tab contains three inputs where you can configure variable placeholders for your table:

Please refer to this documentation section to see what placeholders are and how they work.

When you choose the table and pick the table view, you can click the “Save changes” button and Visual Composer 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 Visual Composer element: column, tab, accordion, etc.

Adding chartsHow to add charts created in wpDataTables to Visual Composer

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 the chart and when you click “Save changes” it will be inserted in your page. You can insert the charts in other Visual Composer elements, e.g. row columns, tabs, etc.:

When you save the page the wpDataTables and wpDataCharts are inserted as you configured in the Visual Composer:

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.