Hi David,

Sorry to disappoint you, but at this time, we don't have any built-in solution to add any kind of image or custom HTML as part of the Header cells.

You can suggest it to our developers, though - they will do their best to make a solution in the future.

Please feel free to search on our suggestions page, 

 to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

At the moment, it's only possible to add images with text in the String column cells via Custom HTML, but not in the Header row.

1. You can maybe try, if possible for the use-case, to manually create the first row in the data with the required text and icon as an image;

but then these columns need to be String type - then you won't be able to do any calculation functions on them.

I can see you have a Number Range for one numeric column, so that would be an issue for this table.

For hiding the header Row, you can use :

.wpdt-c .wpDataTablesWrapper table.wpDataTable thead {
display: none !important;
}

You can also add background color to the first row of data and different text color to make it 'stand out'  :

.wpdt-c.wdt-skin-dark .wpDataTablesWrapper table.wpDataTable tr:first-child td {
    background-color: red !important;
}

Your table on the page with the CSS would look like this :

If you wish a CSS code to be added only to one table, add it to the Table's Customize/Custom CSS;

or for all tables - in the Main plugin settings/Custom JS and CSS/Custom CSS.

You can also apply CSS directly to the WP Page :

Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

2. The only other custom workaround idea I have is, to try a CSS ::after Selector, which can be used to insert 'some content' after the selected element.

There are a few online posts and articles about using the ::after CSS pseudo selector to add an image after a specific element, so I hope this helps as an idea what you can try.

You can check out this Post from StackOverflow, and this one from SitePoint where another user asked for help.

You can try a CSS selector for a specific Header, like this, let's say for the "Ski" Column's header :

.wpDataTablesWrapper table.wpDataTable > thead > tr > th.column-ski::after {
    content: "\00a0" !important;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background: url('https://your_Image_URL.png') 0 0 no-repeat;
  background-size: contain;
}

Here is how your Table's "Ski" Column would look if I try an icon as "ski" on that column ( i tried some random image online, just as a quick test, but of course, you would need to supply the image URL for your table) :

Note that when I do that, then a strange visual element appears under the first "name" column, not sure why it happens, but as mentioned, this is a custom solution, so we can't guarantee it would work perfectly as intended.

Please be advised, this is a completely custom solution, our Support does not cover it, but I hope it helps to get you started.