How to create statistical tables in WordPress

How to create statistical tables in WordPress

Statistical tables are usually boring. There’s no way to hide around this obvious truth. But that only means there’s room for improvement.

In case you want to have a statistics table that is easy to analyze and read, you can create one in WordPress. In this way, you can customize it to have a modern but clean look. Then you can publish it online and share it with your readers.

The tool that you’ll need to make all of this happen is wpDataTables, the number 1 WordPress table plugin that you could use for creating statistical tables.

Our plugin has a few features that you can use, depending on the data source that you have.

If you need to create a table from scratch we recommend creating a table manually. This is one of the most common uses of wpDataTables: to create tables, and fill them with data taken from the WordPress admin panel, without accessing or having any pre-existing data source available (Excel, CSV, Google Spreadsheet, JSON, XML, MySQL DB, etc.).

If, however, you want to create a table from a certain data source, these guides might help you to get started with wpDataTables:

Now let’s move forward and say you have a lot of columns on the statistical table that you want to present on your website. Obviously, this will make it look a bit crowded. The one solution that you can use is to hide some columns so that it looks good on the page.

For that, you can use the Master-detail tables, an add-on that allows you to show hidden columns with one click so that it will improve your page’s user experience.

In the example that we’ll show you, we’ll create a statistical table from the data that we have in a MySQL database table. We’re going to check our table beforehand in phpMyAdmin and it looks like this:

Now, in wpDataTables, we’ll use the second option of the table wizard (Create a data table linked to an existing data source) and we’ll choose “SQL query” as the data source.

In the SQL editor, we’ll insert a query to show all the columns from this table:

SELECT * FROM statistics_table

Then, we’ll click on the “Save Changes” button and the table is created.

You have detailed instructions about this process in our docs for Creating MySQL-based wpDataTables.

As a side note, if you don’t have access to your database through phpMyAdmin or something similar, or you’re just not familiar with creating queries, you can use wpDataTables built-in WPDB query constructor.

It has a graphical user interface that allows you to pick tables and columns that you need and generates a query and a preview. You can modify the query as needed, and create a wpDataTable based on the modified query.

You can find in our docs detailed instructions on this: Create a MySQL-query-based table by querying a database.

Alright, let’s move forward with the guidelines for creating statistical tables.

Now we’ll need to do some table customization like hiding the column wdt_ID, turning on the responsiveness option, and setting all columns to be hidden on Mobile and Tablet devices, except the Item and the Profit column.

For the Revenue, Cost, and Profit columns, you can use some cell color customization with conditional formatting.

For the Revenue column we’ll set two conditions:

1) if the cell values are higher than zero then Set cell color to #0083c2

2) if the cell values are higher than zero then Set cell CSS class to white-text.

Then we’ll create those classes on the “Custom CSS” field on the “Customize” tab in table settings like this:

.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}

Where number 1 in .wpDataTable-1 is the ID of your table so you will need to change it for your table.

We do the same for the Cost column except we’ll set the color in the condition value to red (#D9534F)

And also for the Profit column, except for the fact that we’ll set the color in condition value to green (#5CB85C)

In all three columns (Revenue, Cost, and Profit) the cell prefix that we have is set to currency $ with the option “Cell content prefix” on the Display tab in the Columns settings for each column.

If you’d like to know more about this, check out our docs about currency, percentage, and other columns.

And that’s it!

Yep, it’s that easy.

The table is ready for publishing on your post or pages. Now what you need to do is for it to show up on your pages in the front-end. As with any other plugin, we use shortcodes for showing tables on users’ pages or posts.

Adding shortcodes is easy, especially if you are using popular page builders like Elementor, WP Bakery, or Gutenberg.

By the way, if you need more features for your statistical tables, you can check the following guides that will help:

You can customize your statistical tables easily with wpDataTables.

Alright, now what we need to do is to show the data that we have as diagrams.

We’re going to create a pie chart. For this one, we’ll use the Highcharts library. There are also two other options, depending on your preferences: Google Charts and Chartjs.

After doing a simple chart setup, you’ll end up with beautiful charts from your statistical data.

You’ll see that when you do this, wpDataTables will show a list of possible chart types, the list depending on the chart engine that you’re using.

When we reach the “Data source” step, we have to define the statistical table that we already created to be used as the data source for this chart.

Now that we’re on the “Data range” step, we will need to provide the data range for the chart.

To do that, we’ll simply drag and drop the columns that we need or just use the arrow buttons. We chose the Items and Revenue columns. In this step, we also set the Follow table filtering option so that we’ll have dynamic charts after table sorting and filtering.

A thing to be aware of is that in wpDataCharts you can only use one string type column(string, date, email) while all others have to be integers or floats.

The next step that we need to take is the “Formatting and preview“ one. Changes that are made are instantly visible on the chart that is rendered on the right side of the screen.

The formatting step is divided into categories representing different chart elements.

Here we can customize the charts as we need. We can set a responsive width, grouping, different customize options for layout, tooltips, export, and more. When we finish, click on the “Save chart” button.

The last step is the “Save and get shortcode” one where your chart is ready. All you need to do is copy that shortcode and insert it on the same page or post where you inserted the statistical table.

We’re going to create a second chart again with the Highchart library. This time, we’ll choose the Stacked area chart type.

On the “Data source” step we define a statistics table the same as for a Pie chart.

On the “Data range” step, we’ll choose the Items, Revenue, Cost and Profit columns.

The “Follow table filtering” option is turned on as well.

On the “Formatting and preview“ step we’ll set options like responsive width, Grouping chart, Colors for series, but you can set it differently for your needs.

On the last step, “Save and get shortcode”, we’ll copy the shortcode the same as for the pie chart and then insert it on the same page where we inserted the Statistic table.

And that’s about it. That’s all there is to statistical tables and the charts that come along with them.

Even though creating statistical tables can be an overwhelming task, creating them with wpDataTables is quite easy, as you’ve seen in this article.

If you’ll follow the steps shown in this article, you’ll end up creating responsive statistical tables and charts on your page or post that are connected. What this means is that when your users filter or sort your tables, the charts will be updated as well.

Up Next:

How to Serve Scaled Images in WordPress

How to Serve Scaled Images in WordPress