CSS properties for general 'Formatters' in a Google Visualization Table - html

Question

Google visualization API's include 'Formatters' which allow you to use things like colored text and arrows representing qualities of data. More information on formatters can be found here.
Now, when I edit the CSS values of the table, or use configurtion options (found here), tables that use fomatters seem to have trouble displaying certain CSS properties i.e, width of cells and text size. An example I've noticed where this is the case when the entire tables text is a smaller than default font, and a row is selected. That row which was selected will revert back to a 10pt Arial font when deselected.
Although this specific instance is annoying, I am curious about ALL formatter css properties and their class names. There is no information, to my knowledge, on the Google developer site.
These are my class names:
'headerRow': 'header-cells',
'tableRow': '.even-background all-cells',
'oddTableRow': 'odd-background all-cells',
'selectedTableRow': 'all-cells',
'hoverevenTableRow': '',
'hoveroddrTableRow': '',
'headerCell': 'header-cells white bold darkgreen-background',
'tableCell': 'all-cells'
};
These are the formatters being used.
var changecolor = new google.visualization.ColorFormat();
changecolor.addRange(null, 0, 'red', 'none');
changecolor.addRange(0.000001, null, 'green', 'none');
changecolor.format(dt, 1); // Apply formatter to second column
var parens = new google.visualization.NumberFormat({
prefix: "$",
negativeParens: true
});
parens.format(dt, 1); // Apply formatter to second column
var arrow = new google.visualization.ArrowFormat();
arrow.format(dt, 1); // Apply formatter to second column
var FormatAll = new google.visualization.NumberFormat({
prefix: "$",
pattern: '#.00##'
});
Style properties:
<style>
.all-cells {
border: 0px;
border-collapse: collapse;
font-size: 9px;
padding-right: 0;
}
.header-cells {
border: 0px;
border-collapse: collapse;
font-size: 9px;
padding-right: 0;
color: white;
font-weight: bold;
}
.darkgreen-background {
background-color: #0B3B0B;
}
.odd-background {
background-color: #E6F8E0;
}
.even-background {
background-color: #FFF5E3;
}
.bold {
font-weight: bold
}
.White {
fontcolor: white;
}
</style>
JS fiddle script in action
If you notice, when a cell is selected, the font size changes. This only happens when the google.visualization.ArrowFormat is applied.
I'd like to get rid of the boarder of the table, but that is not affected by classname or class properties (refer to the fiddle),
There is also a conflict with the parens.format and google.visualization.NumberFormat. Decimals places do not display with parentheses.
Not directly shown in code or fiddle: cell width properties become offset with cells that have formatters applied to them.

Answer 1

There are a couple things going on here. First, the ArrowFormat overrides all other classes placed on a cell, so those cells do not have the all-cells class. This is fine, as long as the <tr> has the all-cells class. The <tr>'s lose the all-cells class when you deselect them, because all-cells is part of both the even/odd row and selected row classes (and deselecting a row removes whatever classes you put on it.
If the reason you put all-cells as the selected row class is because you don't want the style from the default class, I suggest changing the class to something that has no styles associated with it, like this:
'selectedTableRow': 'noStyle'
Also, on a side note, you have a typo in the even row classes: there should not be a . before even-background:
'tableRow': 'even-background all-cells'
see it working here: http://jsfiddle.net/asgallant/1q8yk4f5/3/