Print a whole HubDB table on the website through CMS

Highlighted
Occasional Contributor

solved

Reply
0 Upvotes
4 Replies 4
Highlighted
Community Manager

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !
Reply
0 Upvotes
Highlighted
Occasional Contributor

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!

Highlighted
Community Superstar

Thanks. Any reference to mobile responsiveness for that?

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Register here for Inbound 2020

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Reply
0 Upvotes
Highlighted
Occasional Contributor

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