Classic Editor
If you have an older version of WordPress (prior to WordPress 5), you will have this editor by default, but if you updated your website to WordPress 5+, you can still use this editor with the help of the Classic Editor Plugin.
Here we will explain how you can add wpDataTables and wpDataCharts via Classic editor.
First, go to Pages, click “Add New” to create a new page or choose one of the existing ones from the list so you can add the shortcodes.
Click on the wpDataTables or wpDataCharts icon and two new options will appear. In wpDataTables you need to choose one of your tables that you want to show, and in “Table view” you need to choose whether you want your table to be shown as “Regular wpDataTable” or “Excel-like table”.
Once you choose those, click ok and a shortcode will be shown. All you need to do after this is to click on “Publish” button and under the table title you will get permalink that you will follow to see your table.
Gutenberg Editor
We already described how you can add wpDataTables through Gutenberg editor here, but that doesn’t mean you can’t use shortcodes if you updated to WordPress 5+.
When you open a blank page, enter its name, and add the “Classic” block:
In the “Classic” block, you will have all options as you do in the Classic Editor, so you can either copy the shortcode from the table (or chart) list, or use the buttons as explained above.
If you copy/paste the shortcode, or manually enter it, the table will always be displayed in Standard view, so to add it in Excel-Like view, you will need to use the button to add the table, or manually add “table_view=excel”.
Gutenberg comes with a cool feature, where you can define more options for the table. You can choose which table you’re going to use, how will it be displayed, define values for our three variable placeholders, and define the default export file name. That file name will be used for all table-export-tools (PDF, Excel and CSV).
There is also an option to pass placeholder values through shortcodes, like shown in the screenshot on the left. For more details about this, please refer to the Placeholders section.
Since 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. You can read more about this on Divi Page Builder integration for wpDataTables.
Since 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. You can read more about this on Avada Page Builder integration for wpDataTables.
Since 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. You can read more about this on this page.
wpDataTables have integration with Elementor Page Builder, you can insert tables and charts you’ve created with wpDataTables onto your pages using Elementor widgets. You can read more about this on this page.
If you use Calculation Functions in your Integer or Float columns, you may also want to place those results outside the table. Every calculation function has its own shortcode, which you can paste in the page, and display only those results.
