Print a whole HubDB table on the website through CMS

[#1]

solved

[#2]

Hi @cashbackist,

Do you mind sharing your findings with the Community? Your experience could help users in the future with the same question.

Thanks,
Jenny

[#3]

Hi Jenny, 

I'm glad to share what found and how to make a sortable table on CMS. A long time ago, Stuart Langridge had published a Javascript to help people make their table sortable on a webpage. You can find info at https://www.kryogenix.org/code/browser/sorttable/ and feel free to download Javascript library, add the download file as Javascript file in Design Tools as Template, and make a few modifications on the HTML if needed, then you are good to go!

[#4]

Thanks. Any reference to mobile responsiveness for that?

[#5]

First, I created a new CSS file as s template that enhanced a responsive feature. 

@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {

table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr {
margin: 0 0 1rem 0;
}

tr:nth-child(odd) {
background: #ccc;
}

td {

border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {

position: absolute;

top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

td:nth-of-type(1):before { content: "Min. Amount"; }
td:nth-of-type(2):before { content: "Rebates"; }
td:nth-of-type(3):before { content: "Rate"; }
td:nth-of-type(4):before { content: "Store"; }
td:nth-of-type(5):before { content: "Expire"; }
}

It is important to create short names at "td:nth-of-type(3):before { content: "Rate"; }" so that when you use smartphones, the table looks better in a small width screen. 

On the HTML side, I made some modifications on the width of each column. Instead of an exact value of width, I used % of width for each column, so that when the user changed the browser size, each column will be changing its width as well. Here is an example:

<div>
<table class="sortable" style="width: 100%;"><caption><span style="font-size: 20px; color: #0c5394;"><strong>hello world</strong></span></caption>
<thead>
<tr style="height: 18px;">
<th style="height: 18px; text-align: left; width: 17%;"><span style="color: #3d85c6;">column A</span></th>
<th style="height: 18px; text-align: left; width: 24%;"><span style="color: #3d85c6;">column B</span></th>
<th style="height: 18px; text-align: left; width: 15%;"><span style="color: #3d85c6;">column C</span></th>
<th style="height: 18px; text-align: left; width: 28%x;"><span style="color: #3d85c6;">column D</span></th>
<th style="height: 18px; text-align: left; width: 8%px;"><span style="color: #3d85c6;">column E</span></th>
</tr>
</thead>

In this case, when you change the windows size, each column will adjust its width automatically, and when the width of windows is too small to display the content, tables format will be changed. It will no longer sortable since you will see this table in a verticle format, each row will appear as a section with customized titles on the left and values on the right. 

Feel free to try it out at https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100