Tablesorter on Google Web App

[@CodeWithCurt]

Google Apps Script Code in Video:
function doGet(e) {
return HtmlService.createTemplateFromFile('WebAppSorter').evaluate();
}
function getRecords()
{
var ss= SpreadsheetApp.getActiveSpreadsheet();
var recordsSheet = ss.getSheetByName("RECORDS");
var recordsRange = recordsSheet.getDataRange();
var recordsValues = recordsRange.getValues();
return recordsValues;
}

[@CodeWithCurt]

HTML Code in Video:









$( document ).ready(function() {
getData();
});
function getData()
{
google.script.run.withSuccessHandler(function(ar)
{
console.log(ar);
var displayfooter = "";
displayfooter += "";
displayfooter += "";
displayfooter += "";
displayfooter += "";
displayfooter += "";
displayfooter += "10";
displayfooter += "20";
displayfooter += "30";
displayfooter += "40";
displayfooter += "";
displayfooter += "";
displayfooter += "";
displayfooter += "";
displayfooter += "";
displayfooter += "";
var displayheader = "";
var displaybody = "";
ar.forEach(function(item, index)
{
if(index == 0)
{
displayheader = "";
displayheader += "";
displayheader += ""+item[0]+"";
displayheader += ""+item[1]+"";
displayheader += ""+item[2]+"";
displayheader += ""+item[3]+"";
displayheader += "";
displayheader += "";
}
else if(index > 0)
{
displaybody += "";
displaybody += ""+item[0]+"";
displaybody += ""+item[1]+"";
displaybody += ""+item[2]+"";
displaybody += ""+item[3]+"";
displaybody += "";
}
});
displaybody += "";
var displayTable = '';
displayTable += "";
displayTable += displayheader;
displayTable += displayfooter;
displayTable += displaybody;
displayTable += '';
document.getElementById("rowdata").innerHTML = displayTable;
$("#mainTable").tablesorter({
theme: 'metro-dark',
sortList: [[0,0]],
widthFixed: true,
widgets: ['zebra', 'columns', 'filter']
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
output: '{startRow} to {endRow} ({totalRows})'
});
}).getRecords();
}



JQuery Tablesorter

[@gsheetssolutions]

Hi Curt, i understand this is a theme metro-dark. But how do i change the color? Say Blue?

[@jayasri-ft8040]

Hi, tech Guru, loads of thanks to you. Very useful to us.

[@zaccoza]

Hello, I am grateful for your sharing.
Some data entered into the database may contain a url link. When returning the data in the webapp table, I want to return the linked data as clickable and the unlinked data as text. what is your suggestion for this?

[@temyraverdana6421]

Thanks a lot, very useful for my study

[@gsheetssolutions]

Hi @Code With Curt, could you do also a dialogmodal when cell on table is click and should display some info from the table or prolly from another sheet?

[@RosiTerrab]

Thank you! :)

[@muhammedaadhil5645]

Thank you very much 😊

[@Mrator2010]

Hello. A very interesting lesson. But I ran into a problem. If I copy data to the table from other sources, the script does not work. One more point, if there is a date in the table, then the script also does not work.

[@CodeWithCurt]

You will need to adjust the html size according to the size of the google sheet table.

[@Mrator2010]

@@CodeWithCurt I figured out the size. If you copy and paste data, the script starts displaying only a white sheet. And if the first column in the data contains the date in this format 24.11.2021, the script also displays a blank sheet

[@youtep_le_preux]

with script google you have to use an to integrate into your website, is there a way to integrate directly ?

[@gsheetssolutions]

Hi Curt, How do i change the theme color to Blue? hsl(204,100%,24%,1) Tried to update the theme in Codepen but i dont know how it works to save and apply it here. 😞

[@gsheetssolutions]

Basically I want to tweak some styling on the table. Hope you can teach me. Appreciate it Curt. You're awesome as always.

[@rossmatlashevskiy6304]

Thank you for this amazing demo Curt, would you be able to show how to add a ChildRow in the table and how to use another sheet to fill that child row.

[@nirutsoncha6763]

Thank you.

[@muhammedaadhil5645]

Thank you

[@omarchtchareto3701]

At the first I'd like to thank you for this amazing vedio it's very useful but I have a inquiry can we make a username and password before we reached our data in the Web app ?