Hello Jochen

Thank you for your interest in our plugin

With some custom CSS you could achieve that, just like in our catalog of books example table.

You would need to add some conditional formatting to the "stars" column:

Each content (<span class) has these in order:

<span class="stars-container stars-96">★★★★★</span>
<span class="stars-container stars-90">★★★★★</span>
<span class="stars-container stars-85">★★★★★</span>
<span class="stars-container stars-80">★★★★★</span>
<span class="stars-container stars-70">★★★★★</span>
<span class="stars-container stars-60">★★★★★</span>

And the classes are defined in wpDataTables settings/Custom JS and CSS/Custom CSS field, like:

.stars-container{
font-size:20px !important;
}
.stars-container { position: relative; display: inline-block; color: transparent; font-size: 50px;
line-height:normal;
}
.stars-container::before{ position: absolute; top: 0; left: 0; content: '★★★★★'; color:lightgray;
}
.stars-container::after { position: absolute; top: 0; left: 0; content: '★★★★★'; color: gold; overflow: hidden;
}
.stars-0::after { width: 0%; }
.stars-10::after { width: 10%; }
.stars-20::after { width: 20%; }
.stars-30::after { width: 30%; }
.stars-40::after { width: 40%; }
.stars-50::after { width: 50%; }
.stars-60::after { width: 60%; }
.stars-70::after { width: 70%; }
.stars-80::after { width: 80%; }
.stars-85::after { width: 85%; }
.stars-90::after { width: 90%; }
.stars-96::after { width: 96%; }
.stars-100::after { width: 100%; }

I hope that helps.

You're welcome, Jochen

If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.

Hi Thomas

wpDataTables is a WYSIWYG (What You See Is What You Get) concept based plugin. This means that the table should look the same both in back-end and in front-end. If your front-end table looks and behaves differently than in back-end, this usually implies that there is another plugin (or the current theme) that's changing the behavior of our plugin.

Can you please change the theme and see if the issue is resolved? If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be). If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred. Once it does reoccur, you will have found the plugin causing the issue.