"Table Filtering for Product Comparison Example Table" (#3159569) / TMS-Plugins

Comments

Brett Stocker started the conversation
November 3, 2022 at 3:05pm
Hello, I just purchased the Premium WpDataTables plugin and I am looking to create the "Amazon product comparison table" example on the website. How should I go about creating this table? Is there a pre-built template you offer?

Also, is searching/sorting/filtering available with this table format?

2,576

Aleksandar replied

November 4, 2022 at 10:10pm

Hello Brett.

Thank you for reaching out to us.

This is a Simple Table which can be fully replicated in this manner:

Create a Simple table with 4 columns and 29 rows.

The 1st column contains only simple text;

Columns 2 - 4 contain similar data.

1st row, column 2:

<img src="https://wpdatatables.com/wp-content/uploads/2021/10/huawei40PRO.png" alt="" width="150" height="143">

1st row, column 3:

<img src="https://wpdatatables.com/wp-content/uploads/2021/10/SamsungS20Ultra.png" alt="" width="120" height="114">

1st row, column 4:

<img src="https://wpdatatables.com/wp-content/uploads/2021/10/XiaomiMi10.png" alt="" width="120" height="151">

Rows 2 and 3 are only text, while row 4 is empty.

Row 5, column 2:

<span class="global-score s-10">
<span class="score">9.4</span><span class="title">Price/Quality <br>Score</span></span>

Row 5, column 3:

<span class="global-score s-10">
<span class="score">9.7</span><span class="title">Price/Quality <br>Score</span></span>

Row 5, column 4:

<span class="global-score s-10">
<span class="score">9.9</span><span class="title">Price/Quality <br>Score</span></span>

I'll skip individual columns for the following rows, as they're similar (just like the ones above) and to save some time.

Row 6, column 2:

<span class="average"><span class="score">8.7</span><span class="round-icon s-9"><svg id="feat_size" class="display-icon" width="12" height="12" viewBox="0 0 12 12">
        <path fill-rule="evenodd" d="M14,187 L18,187 C19.1045695,187 20,187.895431 20,189 L20,197 C20,198.104569 19.1045695,199 18,199 L14,199 C12.8954305,199 12,198.104569 12,197 L12,189 C12,187.895431 12.8954305,187 14,187 Z M13,189 L13,197 L19,197 L19,189 L13,189 Z M23,187 C23.5522847,187 24,187.447715 24,188 L24,198 C24,198.552285 23.5522847,199 23,199 C22.4477153,199 22,198.552285 22,198 L22,188 C22,187.447715 22.4477153,187 23,187 Z" transform="translate(-12 -187)"></path>    </svg></span></span><span class="title">Design</span>

Row 7, column 2:

<span class="average"><span class="score">8.4</span><span class="round-icon s-8"><svg id="feat_soc" class="display-icon" width="12" height="12" viewBox="0 0 12 12">
        <path fill-rule="evenodd" d="M23,20 L23.5,20 C23.7761424,20 24,20.2238576 24,20.5 L24,21.5 C24,21.7761424 23.7761424,22 23.5,22 L23,22 C23,23.1045695 22.1045695,24 21,24 L21,24.5 C21,24.7761424 20.7761424,25 20.5,25 L19.5,25 C19.2238576,25 19,24.7761424 19,24.5 L19,24 L17,24 L17,24.5 C17,24.7761424 16.7761424,25 16.5,25 L15.5,25 C15.2238576,25 15,24.7761424 15,24.5 L15,24 C13.8954305,24 13,23.1045695 13,22 L12.5,22 C12.2238576,22 12,21.7761424 12,21.5 L12,20.5 C12,20.2238576 12.2238576,20 12.5,20 L13,20 L13,18 L12.5,18 C12.2238576,18 12,17.7761424 12,17.5 L12,16.5 C12,16.2238576 12.2238576,16 12.5,16 L13,16 C13,14.8954305 13.8954305,14 15,14 L15,13.5 C15,13.2238576 15.2238576,13 15.5,13 L16.5,13 C16.7761424,13 17,13.2238576 17,13.5 L17,14 L19,14 L19,13.5 C19,13.2238576 19.2238576,13 19.5,13 L20.5,13 C20.7761424,13 21,13.2238576 21,13.5 L21,14 C22.1045695,14 23,14.8954305 23,16 L23.5,16 C23.7761424,16 24,16.2238576 24,16.5 L24,17.5 C24,17.7761424 23.7761424,18 23.5,18 L23,18 L23,20 Z M22,21.5 L22,20.5 L22,17.5 L22,16.5 L22,16 C22,15.4477153 21.5522847,15 21,15 L20.5,15 L19.5,15 L16.5,15 L15.5,15 L15,15 C14.4477153,15 14,15.4477153 14,16 L14,16.5 L14,17.5 L14,20.5 L14,21.5 L14,22 C14,22.5522847 14.4477153,23 15,23 L15.5,23 L16.5,23 L19.5,23 L20.5,23 L21,23 C21.5522847,23 22,22.5522847 22,22 L22,21.5 Z M17,17 L19,17 C19.5522847,17 20,17.4477153 20,18 L20,20 C20,20.5522847 19.5522847,21 19,21 L17,21 C16.4477153,21 16,20.5522847 16,20 L16,18 C16,17.4477153 16.4477153,17 17,17 Z" transform="translate(-12 -13)"></path>    </svg></span></span><span class="title">Performance</span>

Row 8, column 2:

<span class="average"><span class="score">9.5</span><span class="round-icon s-10"><svg id="feat_camera" width="14" height="12" class="display-icon" viewBox="0 0 14 12">
        <path fill-rule="evenodd" d="M17,101 L22,101 C23.6568542,101 25,102.343146 25,104 L25,108 C25,109.656854 23.6568542,111 22,111 L14,111 C12.3431458,111 11,109.656854 11,108 L11,104 C11,102.343146 12.3431458,101 14,101 C14,100.447715 14.4477153,100 15,100 L16,100 C16.5522847,100 17,100.447715 17,101 Z M16,102 C14.8954305,102 14,102.895431 14,104 L14,108 C14,109.104569 14.8954305,110 16,110 L22,110 C23.1045695,110 24,109.104569 24,108 L24,104 C24,102.895431 23.1045695,102 22,102 L16,102 Z M19,109 C17.3431458,109 16,107.656854 16,106 C16,104.343146 17.3431458,103 19,103 C20.6568542,103 22,104.343146 22,106 C22,107.656854 20.6568542,109 19,109 Z M19,108 C20.1045695,108 21,107.104569 21,106 C21,104.895431 20.1045695,104 19,104 C17.8954305,104 17,104.895431 17,106 C17,107.104569 17.8954305,108 19,108 Z" transform="translate(-11 -100)"></path>    </svg></span></span><span class="title">Camera</span>

Row 9, column 2:

<span class="average"><span class="score">7.0</span><span class="round-icon s-7"><svg id="feat_battery" class="display-icon" weight="14" height="8" viewBox="0 0 14 8">
        <path fill-rule="evenodd" d="M24,76 L25,76 L25,78 L24,78 L24,79 C24,80.1045695 23.1045695,81 22,81 L13,81 C11.8954305,81 11,80.1045695 11,79 L11,75 C11,73.8954305 11.8954305,73 13,73 L22,73 C23.1045695,73 24,73.8954305 24,75 L24,76 Z M13,74 C12.4477153,74 12,74.4477153 12,75 L12,79 C12,79.5522847 12.4477153,80 13,80 L22,80 C22.5522847,80 23,79.5522847 23,79 L23,75 C23,74.4477153 22.5522847,74 22,74 L13,74 Z M13,75 L19,75 L19,79 L13,79 L13,75 Z" transform="translate(-11 -73)"></path>    </svg></span></span><span class="title">Battery</span>

Row 10 is also empty for columns 2 - 4.

Row 11, column 2:

<div class="global-user-score">
<div class="score">9.9</div><div class="number-opinions">19 reviews</div></div>

Row 12, empty for columns 2 - 4;

Rows 13 - 16 - simple text; Row 17 - empty; Rows 18 and 19 - simple text; Row 20 - empty; Rows 21 - 23 - simple text;

Row 24, column 2:

<img src="https://wpdatatables.com/wp-content/uploads/2021/07/icon-yes.png" class=" aligncenter size-thumbnail" width="20" height="20" "="">

Row 24, column 3:

<img src="https://wpdatatables.com/wp-content/uploads/2021/07/icon-yes.png" class=" aligncenter size-thumbnail" width="20" height="20" "="">

Row 25, column 4:

<img src="https://wpdatatables.com/wp-content/uploads/2021/07/icon-no.png" class=" aligncenter size-thumbnail" width="20" height="20" "="">

Rows 25 - 28 - simple text;

Row 29 - link to the product on Amazon with the image:

Column 2:

<a href="https://www.amazon.com/dp/B086FFFGJL?tag=gsmarena093-20&linkCode=osi&th=1&psc=1" target="_blank"><img data-media-content="wpdt-media-content" src="https://wpdatatables.com/wp-content/uploads/2021/07/Screenshot-from-2021-06-29-10-53-24.png" class=" aligncenter size-full" width="128" height="64"></a>

Column 3:

<a href="https://www.amazon.com/Samsung-Unlocked-Smartphone-Pro-Grade-Lavender/dp/B08FYTRF6J/ref=sr_1_2_sspa?crid=75BPC49WFO16&dchild=1&keywords=samsung+galaxy+s20+ultra+5g&qid=1624955033&sprefix=Samsung+Galaxy+S20+Ultra%2Caps%2C281&sr=8-2-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEzOTBGTVQ2WDkxQ1YxJmVuY3J5cHRlZElkPUEwOTMzODYzWFdWVzBaOU05MzIzJmVuY3J5cHRlZEFkSWQ9QTA5NzkyNTkxVlM5T1VZMTBQN1hIJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==" target="_blank"><img data-media-content="wpdt-media-content" src="https://wpdatatables.com/wp-content/uploads/2021/07/Screenshot-from-2021-06-29-10-53-24.png" class=" aligncenter size-full" width="128" height="64"></a>

Column 4:

<a href="https://www.amazon.com/Xiaomi-Note-10-Lite-International/dp/B0887V5WZ6/ref=sr_1_4?dchild=1&keywords=Xiaomi+Mi+10&qid=1624954920&sr=8-4" target="_blank"><img data-media-content="wpdt-media-content" src="https://wpdatatables.com/wp-content/uploads/2021/07/Screenshot-from-2021-06-29-10-53-24.png" class=" aligncenter size-full" width="128" height="64"></a>

Now, that completes the content of the table.

As for the styling of that table on the front end, you need to add the following CSS to the page where the table will be:

.wdt-white-background {
    background: #FFF;
    padding-top: 30px;
}
.vc_tta-tab>a {
    background-color: #091D70 !important;
    color: #FFFFFF !important;
}
.vc_tta-tab>a:hover,.vc_tta-tab.vc_active>a {
    background-color: #FFFFFF !important;
    color: #091D70 !important;
}
#wpdtSimpleTable-171 td .global-score.s-10 {
    background-color: #07ce7d;
}
#wpdtSimpleTable-171 td .global-score {
    display: inline-block;
    vertical-align: top;
    padding: 6px 12px;
    margin-bottom: 6px;
    border-radius: 12px;
}
#wpdtSimpleTable-171 td .global-score .score {
    display: inline-block;
    vertical-align: top;
    line-height: .9;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    min-width: 48px;
}
#wpdtSimpleTable-171 td .global-score .title {
    display: inline-block !important;
    vertical-align: top;
    margin-left: 6px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}
#wpdtSimpleTable-171 td .average {
    margin-left: 7%;
}
#wpdtSimpleTable-171 td .average .score {
    line-height: 1;
    min-width: 32px;
}
#wpdtSimpleTable-171 td .average .score {
    font-size: 20px;
    line-height: .8;
    font-weight: 700;
    display: -moz-inline-stack;
    display: inline-block;
}
#wpdtSimpleTable-171 td .average .round-icon {
    margin: -7px 4px -1px 8px;
}
#wpdtSimpleTable-171 td .average .round-icon.s-10 {
    background: #08e58b;
}
#wpdtSimpleTable-171 td .average .round-icon.s-9 {
    background: #41ea67;
}
#wpdtSimpleTable-171 td .average .round-icon.s-8 {
    background: #76ef53;
}
#wpdtSimpleTable-171 td .average .round-icon.s-7 {
    background: #a8f340;
}
#wpdtSimpleTable-171 td .round-icon {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
    text-align: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4f4e56;
}
#wpdtSimpleTable-171 td .display-icon {
    fill: #fff;
    margin-top: 5px;
}
#wpdtSimpleTable-171 td .average + .title {
    vertical-align: middle;
    display: inline-block;
    margin-top: -5px;
}
#wpdtSimpleTable-171 td .title {
    font-size: 12px;
    color: #a7a7b1;
}
#wpdtSimpleTable-171 td .global-user-score .score {
    display: inline-block;
    vertical-align: top;
    line-height: .9;
    font-size: 30px;
    font-weight: 700;
    color: #4f4e56;
    min-width: 48px;
}
#wpdtSimpleTable-171 td {
    font-size: 14px;;
}
#wpdtSimpleTable-171 td .h {
    box-shadow: inset 0 -7px #ffffa0;
    display: inline;
    font-size: 16px;
    font-weight: 600;
    color: #4f4e56;
}
#wpdtSimpleTable-171 td .price {
    font-size: 30px;
    font-weight: 600;
    color: #4f4e56;
    padding: 20px 0;
    display: inline-block;
}
#wpdtSimpleTable-171 tr:first-child td img {
    padding: 20px;
}

Please note that you need to replace all instances of "wpdtSimpleTable-171" with the ID of your table, so if your table has ID: 15, it would be "wpdtSimpleTable-15".

I hope that helps, and I apologize for the length of my response.

Kind Regards,

Aleksandar Vuković
[email protected]

Rate my support

You can try wpDataTables add-ons before purchasing on these sandbox sites:

Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

1 Like

Brett Stocker replied
December 9, 2022 at 5:37pm
Thank you Aleksandar. And I'm guessing sorting/filtering is not available with a simple table like this. Is that correct?
2,576
Aleksandar replied
December 12, 2022 at 10:02am
Hi again Brett.
Yes, unfortunately, that is correct. Simple tables don't have sorting, filtering, editing, or pagination.
Kind Regards,

Aleksandar Vuković
[email protected]

Rate my support

wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

You can try wpDataTables add-ons before purchasing on these sandbox sites:

Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables