How to Add Interactive Responsive Tables in WordPress using Visual Composer and wpDataTables Plugin



you using WP data tables with visual composer visual composer is a plugin developed by WP bakery it's the most popular drag-and-drop page builder plugin for wordpress most of modern themes especially themes sold on ThemeForest integrate visual composer because it really covers WordPress in the maybe most weak part WordPress is a really powerful CMS but in terms of managing different layouts columns maybe some different design blocks it doesn't have the power and enough flexibility and visual composer covers this part so if you didn't use visual composer yet I'd suggest you go and see the demos because even people who know much about page about web design who work with it all the time find that this is a very very flexible very powerful and very easy to use everyday tool for design of pages in this tutorial I would like to show you how WP data tables integrates with visual composer so that you could use use both and have the power both in the same time so if you were worked with the visual composer or even if you didn't you can check how it works now you know that it's the drag-and-drop page builder and it's enabled instead of the classic mode of the WordPress posts and pages editor that you can see here so there is this button which we can toggle and it toggles the visual composer and in this visual composer we can data any elements or blocks so let's add the first element which will be a row and inside of this role that said heading there is it headline and let's say that the title is integrating WP data tables with visual composer let's set one more block here and when you look through the elements if you have WP data tables installed you can see two additional elements to what you already had WP data table and WP data chart so let's first enter let's first place here a WP data table so we just need to choose this element and here in the drop down we need to choose one of the tables that we previously created so when we choose the table we can additionally assign the variable placeholders you can see our video tutorial on placeholders to see what this is and save the changes so basically that inserts the WP data table the only thing to notice here is that you should actually actually create a table before you start to create a deep page because the table has so many settings and configuration blocks that having it all here in this small pop-up window visual composer would overload it and it's much easier to go to the WP data tables and create a new data table from data source or using the WP data table table constructor so once we insert at the table we can save it and then let's add one more sub row here and say that layout is going to be three columns and let's add a couple of charts here so we can click WP data chart and then choose this chart to be toggled to be inserted in this block then the second chart to be inserted in the second block and then one more third chart to be inserted in the third block so you you can see the names of the charts and of the tables that you insert it into the page generated with visual composer here so you always know what table and what chart did you insert here and let's call our page visual composer integration demo and the same for the title then we need just to publish it and once it published it saves all the settings that that we all the settings that all the changes that we made then we need just to go to view page to see how it looks in the front end it's added the headline it added the table that we've chosen or chosen there and it added the charts in three columns as we request it also these charts are linked to the table so whenever we filter the table or whenever we sort the table let us filter it for example from 1st of July to 31st of July there are 4 values here and you see that there are same 4 values in the charts so that's how it works really simple so you just choose the wp data table or chart that you created and you can insert it using using the native design of visual composer thanks for watching and see you next tutorials WP data tables the easiest way to render interactive editable tables on your WordPress site purchase WP data tables exclusively on code Canyon

6 Replies to “How to Add Interactive Responsive Tables in WordPress using Visual Composer and wpDataTables Plugin”

  1. aliul anowar says:

    Can I show database table at local Host address?
    And
    Can I run the website at local Host address?
    Sir
    Please

  2. free ga wpdata tables available ga leva

  3. syed opu says:

    I can not use Visual Composer ??

  4. Emad Nadi says:

    can you customize the excel tables themselves such as background and cells colors?

  5. XJLCA says:

    What theme did you use in this demo?

Leave a Comment

Your email address will not be published. Required fields are marked *