How to customize a Google Visualization Table to best fit your page

If you are using Google Visualization Table to show your data like when making Google Spreadsheet as a database, you may have learned that customizing it is not simply declaring an ID to the containing element.

The declaration google.visualization.table in itself contains its own CSS styles which defines what you see when the table gets drawn like background color, font size, font face and so on. There are readily available options that you can turn on or off like alternating background color per row but sometimes that is not enough as what is readily available may not be suited on how your page looks like.

How to override the default styles
For this to work the option allowHtml must be set to true. Also, there should not be any formatting on the source spreadsheet.

For the purpose of this post, let us go back to a previous article that illustrates how to use your google spreadsheet as a database. Let us make this table transparent so that it will match and adopt your page's background color.

• Define the CSS styles for the table elements - create a css class for the following: headerRow, tableRow, oddTableRow, .selectedTableRow, headerCell and tableCell. Set the the background color to transparent and since by default there is no border define one for it as well. Also, since all will be having the same styles, just lump them up in a single declaration within the <style> </style> tag. Here is an example:

Example: 
.hrowclass, .trowclass, .otrowclass, .strowclass, .hcellclass, .tcellclass
{
 background-color: transparent;
 border: 1px solid #c8c8c8;
}

• Use declared classes in the table.draw using the cssClassName property - locate the javascript function containing the actual code that displays the table. In this case it is table.draw(data, {'allowHtml': true, 'alternatingRowStyle': true, 'page': 'enable', 'pageSize': 10, 'sort': 'enable', 'sortAscending': false, 'sortColumn': 0}); and add this 'cssClassNames': {'tableRow': 'trowclass', 'headerRow': 'hrowclass', 'oddTableRow': 'otrowclass', 'selectedTableRow': 'strowclass', 'headerCell': 'hcellclass', 'tableCell': 'tcellclass'}. The final result will be this:

table.draw(data, {'allowHtml': true, 'alternatingRowStyle': true, 'page': 'enable', 'pageSize': 10, 'sort': 'enable', 'sortAscending': false, 'sortColumn': 0, 'cssClassNames': {'tableRow': 'trowclass', 'headerRow': 'hrowclass', 'oddTableRow': 'otrowclass', 'selectedTableRow': 'strowclass', 'headerCell': 'hcellclass', 'tableCell': 'tcellclass'}});

Now save your work and you will have a transparent table with a gray background. You can even change the color of the border or make it thicker, add more styles as you see fit. Try playing on it to give you what you wanted.

Back to CyberLiving home page

Other Posts
Back to home page