Tablesorter on Google Web App 

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?

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.

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

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; }

Thanks a lot, very useful for my study

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?

Thank you! :)

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.

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

Thank you very much 😊

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. 😞

Thank you.

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 ?

Thank you

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