Now that we've seen how to create a basic template, we will see how to create a cleaner and more complex template with style, script and to put a header to your Awesome Table view.
* Example only, bad practice in Awesome Table *
1 2 3 4 5 6 7
<div style='float:left;padding-right:7px' onclick="myFunction()">
To bypass these limitations, We've added the possibility to use the following special templates :
In the template sheet, you can now use three static headers: < style >, < script > and an empty one.
1 - < style >
The content of this template is pure CSS. It is inserted in the Awesome Table Head element, inside a <style> element.
Insert here the 'static' CSS rules related to your data display.
One use of this new feature is to test your CSS quickly, without uploading any files in Google Site. I also recommend to not put all your CSS in the <style> special template for the simple reason that it is not loaded before the spreadsheet answers the query (and that is not quick !).
Recommended practice : cut your CSS in 2 parts :
- Filters and global Awesome Table styling : goes in the CustomCSS file, then upload it in Google Site
- Data related static CSS : goes in special <style> template
This will allow you to make one CSS file to theme all your Awesome Tables for one web site color theme and to make specific adjustments for data on each spreadsheet !
2 - < script >
3 - empty header
The content of this template is HTML. It is inserted as the first child of the Awesome Table Body element.
Insert here whatever you want !
Note : As these special templates does not depend on the data, they will be inserted only once at the beginning of the Awesome Table code. Direct consequence of this is that tags can not be used inside these template (So this isn't "technically" even a templates !).