Heatmap table examples and how to create one in WordPress

Whenever you see a heatmap table online, you must think it’s quite a fancy and complicated thing to create, right?

Not really, actually.

From afar, it looks like you need to play with lots of numerical data and do complicated technical things to create cells for a table heatmap.

Yet, that’s far from reality if you have the proper tool.

In this article, I’ll go over creating a heatmap table with wpDataTables, the #1 WordPress plugin for creating tables and charts.

What kind of heatmap table can we create? Well, something like this example below:

Yes, that is a really long screenshot. You can view the dynamic heatmap table here.

For creating a heatmap table for you or your visitors to compare data values easier, you have few options depending on your source data.

But before heading to the tutorial, I wanted to let you know that there are two sections of this article that you can jump to directly:

How to create a heatmap table with wpDataTables

1. Creating a table from zero

If you do not have a data source you can create your heatmap table from scratch with the option “Creating tables manually” where you will insert data values manually.

To start creating a data table manually, open your WordPress admin panel, go to wpDataTables -> Create a Table, choose the third option “Create a table manually”, and click “Next“.

You will be shown the wizard step that will assist you to create the table structure where you will create 14 columns: Period, Year, and all other will be names of the months (Jan, Feb…). For Period columns you will leave column type as “One-line string” and for all others, you will set “Integer” column type.

When you have finished configuring the table, click “Create the table”. A dropdown will open with options to “Open in standard editor” or “Open in Excel-like editor” and that’s it. The table structure is created. Now you will insert your numeric data values over the Standard editor or an Excel-like editor.

2. Creating a table heat map from a data source

If you have data in some data source like Excel, CSV, JSON, Google spreadsheet, XML, PHP Serialized array, or in a table in a database (SQL source), you will use the second option in the table wizard.

To start creating a data table linked to an existing data source, open your WordPress admin panel, go to wpDataTables -> Create a Table, choose the second option “Create a data table linked to an existing data source.”, and click “Next“.

Depends on which source you have you will follow instructions:

For this table, we use CSV as a data source that you can download from here. You will choose CSV as “Input data source type” and then over the Browse button find that the source that you previously download and upload on your server. Click Save Changes, so wpDataTables will read the CSV file you uploaded and the table will be created.

After creating the table, with any of the two options, you can customize and configure your WordPress table like you need.

In our case, we first turn on the option “Show filters in a form above the table” on the “Sorting and Filtering” tab in table settings and then configure Advanced filters for each column. For the Period column, we set ‘Select Box filter’ and ‘Number filter’ for all other columns.

Then we turn on the option “Responsiveness” on the “Display” tab in table settings and hide values like the “Month” columns for tablets and mobile devices in each Column settings or quicker in the Column list button above the table.

For customizing the table data color palette in an easy and intuitive way, we’re using Conditional formatting. For the first column, we set the condition that if the cell contains 2 then “Set cell CSS class” to “blue-white text” so that we’ll have a white font color over the blue background.

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

.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}

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

Like this:

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

For all other columns, we set the same conditions to set different colors based on the value in the table for Max Temperature table.

For the second table “Low Temperature” we use the same approach as for the table “Temperature Maximus”, except the conditions in Conditional formatting. Because it is a lower temperature value, we use these conditions.

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

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

.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}

Where number 2 in .wpDataTable2 is the ID of your table so you will need to change it for your table.

That’s it!

You now have a table heatmap where you can compare data values easily without looking like you are reading the fine print of a contract.

If that was an easy and intuitive way to create heatmaps in a table, check out the next part.

Now what you need to do is 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 very easy, especially if you are using popular page builders like Elementor, WP Bakery, or Gutenberg.