Hello Major Payne

Thank you for your interest in our plugin, and sorry you feel that way.

Our examples simply show what can be done with the plugin, and at the moment the only available tutorial is for the Cryptocurrency table. That tutorial can be found in our FAQ section.

Another tutorial which hasn't yet been published is for the Premier league table, and I can share it with you here:

This table is using the Aqua skin, with some modifications in the main settings. For instance, the surrounding borders are removed, and the table is automatically sorted in ascending fashion by the first column. There is no tutorial for the table in our documentation yet, so I'll just tell you here.

There is conditional formatting for the first "#" column:

And the custom CSS goes:

.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd:hover td{
background-color:#fffbf1 !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.grey,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.grey{
background-color: #dcdcdc !important;
border-left: 1px solid #dcdcdc !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.blue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.blue{
background-color: #0083c2 !important;
border-left: 1px solid #0083c2 !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.red,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.red{
background-color: #d6181f !important;
border-left: 1px solid #d6181f !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.lightblue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.lightblue{
background-color: rgb(91,192,222) !important;
border-left: 1px solid rgb(91,192,222) !important;
}
.white-text {
 color: #fff !important;
}

Then, for the second column, the badges were taken from this link, and added in "String" type column in the following fashion. This is an example for Liverpool:

<span class="badge-1 t1"><a href="https://www.liverpoolfc.com/welcome-to-liverpool-fc">Liverpool</a></span>

So, the class "badge-1" and "badge-1.t1" classes are defined in Custom CSS:

.badge-1 {
    background-image: url(https://wpdatatables.com/wp-content/uploads/2018/12/badges-25-sprite.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    display: block;
    background-position: -50px -350px;
    display: inline-block;
    vertical-align: middle;
    margin-right: .5rem;
}
.badge-1.t1 {
    background-position: -250px -225px;
}

The second class selects the position on the provided image where Liverpool's crest is located.

This is for all the clubs:

.badge-1.t1 {    background-position: -250px -225px;
}
.badge-1.t2 {    background-position: -250px -250px;
}
.badge-1.t3 {    background-position: -275px -325px;
}
.badge-1.t4 {    background-position: -150px -150px;
}
.badge-1.t5{        background-position: 0 -50px;
}
.badge-1.t6{    background-position: -275px -200px;
}
.badge-1.t7 {      background-position: -350px -75px;
}
.badge-1.t8 {    background-position: -50px -125px;
}
.badge-1.t9 {    background-position: -250px -125px;
}
.badge-1.t10 {    background-position: -350px -250px;
}
.badge-1.t11 {    background-position: 0 -200px;
}
.badge-1.t12 {        background-position: -350px -125px;
}
.badge-1.t13 {    background-position: -100px -100px;
}
.badge-1.t14{        background-position: -50px -175px;
}
.badge-1.t15 {    background-position: -250px -225px;
}
.badge-1.t16 {    background-position: -325px -250px;
}
.badge-1.t17 {    background-position: -75px -150px;
}
.badge-1.t18 {    background-position: -25px -150px;
}
.badge-1.t19 {        background-position: -75px -225px;
}
.badge-1.t20 {    background-position: -225px -100px;    }

Now, the remaining columns are just integers, and the last one is the win/loss/draw column. It has a lot of conditional formatting applied to make it look like it does:

It goes all the way up to "20". And here's the rule for Liverpool again:

<div class="score-last-6">
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
<span class="score-last-one win"></span>
</div>

This changes from team to team. Everything else you may need is in the custom CSS:

.score-last-6 {
    margin:0 auto;
    border-collapse: separate;
    display: table;
    border-spacing: 3px 0;
height:11px;
vertical-align: middle;
}
.score-last-one{
    display: table-cell;
    height: .7em;
    width: .7em;
}
.win {background: #0083c2;}
.lose{background: #d6181f;}
.equal {background: #dcdcdc;}

That's about it. You will probably need to dig around all this to make it look exactly the same, but this is how it's done.

People who have little to no knowledge of Excel or spreadsheets can still create basic tables. You can add image columns, URL Link columns, Formula columns, apply different filters on the table, hide columns, use conditional formatting, and so on.

The plugin can do a lot, and please feel free to go through our documentation to get a better picture of what can be done with it. Unfortunately, you can't recreate the table like "Products Table" in 10 minutes, especially when you're not familiar with the plugin. These tables require at least basic knowledge of CSS, while all else can be done with built-in features of the plugin.

Please go through the two tutorials provided, and you should get an idea of how the other example tables are created. We'll create tutorials for all our example tables in the near future, and they'll all be in our FAQ section.

No worries, Major Payne, I understand.

What you're looking for to achieve can be done like this:

You have a row for each t-shirt. Meaning, you have this:

Yellow | Size S | Price #1

Yellow | Size M | Price #2

Yellow | Size L | Price #3

Yellow | Size XL | Price #4

You get what I mean.

Then, you can enable filtering for those two columns with predefined values (see attachment).

If I was to remove the filtering values, I'd see the table with all values:

To remove any possibility of your customers clearing the filtering values, you can add this custom CSS:

#table_1_1_filter > span > div > div > ul > li:nth-child(1),
#table_1_2_filter > span > div > div > ul > li:nth-child(1) {
display: none !important;
}

This will cause the filters not to have the "empty" value:

So, your customers would only be able to choose the size and color. The rest of the data would be hidden.

I hope that helps.

Hi again Major Payne

Have you configured that column to be an integer? It needs to be integer for numerical sorting and filtering to work properly.

Also, when you choose the filtering type, my advice is to enable Exact filtering, so the plugin looks for exact values in the column "1", "10", "100", "1000", etc.

If you meant on our sandbox site - I can't see that because the site refreshes every hour, on the 15th minute mark, so it's not saved.

We have a 15-day money back guarantee, so if you don't like the plugin, you can get a refund in that period of time.

As for the cascade filtering and hiding the table before filtering - those options are coming from our paid add-on Powerful Filters. There, you can choose to hide the table before filtering is applied; add a filter's Search button and disable that search button until all filters are selected. This would force your customers to first select all possible filters before the table is displayed: