Hi, Maria

Thanks for reaching out to us

Yes, you should be able to create a very similar table with our plugin.

Just for the "Discovery" column, some extra custom work will be needed from your end, but we will do our best to guide you in the right direction.

1.

This element on the first column with the little + symbol to expand the rows,  can be achieved with a little workaround and our "responsive feature".

You can enable Responsiveness in the table, and choose which columns will be hidden from the front-end on tablet devices. Then, you can go to wpDataTables settings, and change the tablet's width to a bigger value (2000 for example). When you do this, the plugin will consider all screens below 2000px as tablets, and hide the selected columns which would be available on click. A "+" sign will appear in the first column, so when you click on it the data hidden will be displayed.

2.

Regarding the "Discovery" column, in order to have these "pipeline pills",

you can use custom HTML and CSS in a String Column, and to make Conditional rules on the column to achieve it.

Here is an example that we made about making a "star column",  that can change depending on value in  the cell.

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

Of course, you will set those conditions in Conditional formatting for your needs.

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%; }

-

We have another example, from a Premier League Table, that you can check out, I hope it helps,

You can check out how we made that table here, if you wish.

-

Let me know how that seems, and if you have any questions

And, just wanted to point out that we have a Demo Sandbox site, where you can try out the plugin functionalities, on this link

and there is a 15-day money-back guarantee period, So if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)